Removal and replacement of bootstrap

package.json

@@ -18,9 +18,6 @@
     "build-site-for-staging": "PRODUCTION=false OPTIMIZE=true tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts",
     "build-site-for-production": "PRODUCTION=true OPTIMIZE=true tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts"
   },
-  "dependencies": {
-    "bootstrap-scss": "^4.6.2"
-  },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "@types/hast": "^3.0.4",

src/_includes/cookie-notice.html

@@ -4,6 +4,6 @@
       enhance the quality of its services and to analyze traffic.
       <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.
     </p>
-    <button id="cookie-consent" class="btn btn-primary">OK, got it</button>
+    <button id="cookie-consent" class="filled-button">OK, got it</button>
   </div>
 </section>

src/_includes/docs/app-figure.md

@@ -13,8 +13,8 @@
 
 <figure class="{{class}}">
   <div class="site-figure-container">
-    <img src='/assets/images/docs/{{image}}' class='{{img-class}}' alt='{{alt}}' style='{{width}} {{height}}'>
-    {% if caption -%}
+    <img src="/assets/images/docs/{{image}}" class="{{img-class}}" alt="{{alt | escape}}" style="{{width}} {{height}} {{img-style}}">
+    {% if caption and caption != '' -%}
       <figcaption class="figure-caption">{{caption}}</figcaption>
     {% endif -%}
   </div>

src/_includes/docs/catalog-page-material.md

@@ -7,22 +7,22 @@
 
 ## {{sub.name}}
 
-<div class="card-grid">
+<div class="card-grid material-cards">
   {% for comp in components -%}
-  <div class="card">
-    <a href="{{comp.link}}">
-      <div class="card-image-holder-material-3" style="--bg-color: {{sub.color}}">
-        <img alt="Rendered example of the {{comp.name}} Material widget." src="{{comp.image.src}}">
-        <div class="card-image-material-3-hover">
-          <img alt="Decorated background for material widget visualizations." src="{{comp.hoverBackground.src}}" aria-hidden="true">
-        </div>
+  <a class="card outlined-card" href="{{comp.link}}">
+    <div class="card-image-holder-material-3" style="--bg-color: {{sub.color}}">
+      <img alt="Rendered example of the {{comp.name}} Material widget." src="{{comp.image.src}}">
+      <div class="card-image-material-3-hover">
+        <img alt="Decorated background for material widget visualizations." src="{{comp.hoverBackground.src}}" aria-hidden="true">
       </div>
-    </a>
-    <div class="card-body">
-      <a href="{{comp.link}}"><header class="card-title card-title-material-3">{{comp.name}}</header></a>
-      <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>
     </div>
-  </div>
+    <div class="card-header">
+      <header class="card-title">{{comp.name}}</header>
+    </div>
+    <div class="card-content">
+      <p>{{ comp.description | truncatewords: 25 }}</p>
+    </div>
+  </a>
   {% endfor -%}
 </div>
 

src/_includes/docs/catalog-page.md

@@ -6,23 +6,23 @@
 {% if components.size != 0 -%}
 <div class="card-grid">
 {% for comp in components -%}
-  <div class="card">
-    <a href="{{comp.link}}">
-      <div class="card-image-holder">
-        {% if comp.vector -%}
-          {{comp.vector}}
-        {% elsif comp.image -%}
-          <img alt="Image/visualization of the {{comp.name}} widget." src="{{comp.image.src}}">
-        {% else -%}
-          <img alt="Flutter logo for widget missing visualization image." src="/assets/images/docs/catalog-widget-placeholder.png" aria-hidden="true">
-        {% endif -%}
-      </div>
-    </a>
-    <div class="card-body">
-      <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>
-      <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>
+  <a class="card outlined-card" href="{{comp.link}}">
+    <div class="card-image-holder">
+      {% if comp.vector -%}
+        {{comp.vector}}
+      {% elsif comp.image -%}
+        <img alt="Image/visualization of the {{comp.name}} widget." src="{{comp.image.src}}">
+      {% else -%}
+        <img alt="Flutter logo for widget missing visualization image." src="/assets/images/docs/catalog-widget-placeholder.png" aria-hidden="true">
+      {% endif -%}
     </div>
-  </div>
+    <div class="card-header">
+      <header class="card-title">{{comp.name}}</header>
+    </div>
+    <div class="card-content">
+      <p>{{ comp.description | truncatewords: 25 }}</p>
+    </div>
+  </a>
 {% endfor -%}
 </div>
 {% endif -%}
@@ -36,23 +36,23 @@
 
   <div class="card-grid">
     {% for comp in components -%}
-      <div class="card">
-        <a href="{{comp.link}}">
-          <div class="card-image-holder">
-            {% if comp.vector -%}
-              {{comp.vector}}
-            {% elsif comp.image -%}
-              <img alt="Rendered image or visualization of the {{comp.name}} widget." src="{{comp.image.src}}">
-            {% else -%}
-              <img alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png" aria-hidden="true">
-            {% endif -%}
-          </div>
-        </a>
-        <div class="card-body">
-          <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>
-          <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>
+      <a class="card outlined-card" href="{{comp.link}}">
+        <div class="card-image-holder">
+          {% if comp.vector -%}
+            {{comp.vector}}
+          {% elsif comp.image -%}
+            <img alt="Rendered image or visualization of the {{comp.name}} widget." src="{{comp.image.src}}">
+          {% else -%}
+            <img alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png" aria-hidden="true">
+          {% endif -%}
+        </div>
+        <div class="card-header">
+          <header class="card-title">{{comp.name}}</header>
+        </div>
+        <div class="card-content">
+          <p>{{ comp.description | truncatewords: 25 }}</p>
         </div>
-      </div>
+      </a>
     {% endfor -%}
   </div>
   {% endif -%}

src/_includes/docs/code-and-image.md

@@ -12,20 +12,17 @@
 {% endif -%}
 
 
-<figure class="{{class}}">
-  <div class="row {{figure-class}}">
-      <div class="col-md-7 {{code-class}}" style="padding-right:12px"> 
-        {{code}}
-      </div>
-      <div class="col-md-5" style="padding-left:0">
-        <img src='/assets/images/docs/{{image}}' class='{{img-class}}' alt='{{alt}}' style='{{width}} {{height}}'>
-         {% if caption -%}
-           <figcaption class="figure-caption {{figcaption-class}}" style="margin-top: 6px">
-            {{caption}}
-           </figcaption>
-        {% endif -%}
-      </div>
+<figure class="code-and-image {{class}}">
+  <div class="{{code-class}}">
+    {{code}}
+  </div>
+  <div>
+    <img src="/assets/images/docs/{{image}}" class="{{img-class}}" alt="{{alt | escape}}" style="{{img-style}} {{width}} {{height}}">
+     {% if caption and caption != '' -%}
+     <figcaption class="figure-caption {{figcaption-class}}">
+       {{caption}}
+     </figcaption>
+    {% endif -%}
   </div>
 </figure>
 
-

src/_includes/docs/install/deprecated/get-sdk-linux.md

@@ -35,7 +35,7 @@ If you aren't using `snapd`, follow these steps to install Flutter.
 1. Download the installation bundle for the latest
    {{site.sdk.channel}} release of the Flutter SDK:
 
-   [(loading...)](#){:.download-latest-link-{{os}} .btn .btn-primary}
+   [(loading...)](#){:.download-latest-link-{{os}} .filled-button}
 
    You can find older builds and other release channels in the [SDK archive][].
 

src/_includes/docs/install/deprecated/get-sdk-mac.md

@@ -7,7 +7,7 @@
 
     |Intel | | <span class="apple-silicon">Apple Silicon</span> |
     |------| | ---------------|
-    |[(loading...)](#){:.download-latest-link-{{os}} .btn .btn-primary} | | [(loading...)](#){:.download-latest-link-{{os}}-arm64 .apple-silicon .btn .btn-primary} |
+    |[(loading...)](#){:.download-latest-link-{{os}} .filled-button} | | [(loading...)](#){:.download-latest-link-{{os}}-arm64 .apple-silicon .filled-button} |
 
     <br>
     For other release channels, and older builds,

src/_includes/docs/install/deprecated/get-sdk-win.md

@@ -7,7 +7,7 @@
  1. Download the following installation bundle to get the latest
     {{site.sdk.channel}} release of the Flutter SDK:
 
-    [(loading...)](#){:.download-latest-link-{{os}} .btn .btn-primary}
+    [(loading...)](#){:.download-latest-link-{{os}} .filled-button}
 
     For other release channels, and older builds,
     check out the [SDK archive][].

src/_includes/docs/install/deprecated/ios-setup.md

@@ -137,7 +137,7 @@ Configure your physical iOS device to connect to Xcode.
 
 1. Click **Trust**.
 
-   ![Trust Mac][]{:.mw-100}
+   ![Trust Mac][]
 
 1. When prompted, unlock your iOS device.
 
@@ -218,7 +218,7 @@ Follow the Xcode signing flow to provision your project.
 
    The **Team** dropdown displays that option as **Your Name (Personal Team)**.
 
-   ![Xcode account add][]{:.mw-100}
+   ![Xcode account add][]
 
    After you select a team, Xcode performs the following tasks:
 
@@ -232,7 +232,7 @@ If automatic signing fails in Xcode, verify that the project's
 **Identity** <span aria-label="and then">></span>
 **Bundle Identifier** value is unique.
 
-![Check the app's Bundle ID][]{:.mw-100}
+![Check the app's Bundle ID][]
 
 #### Enable trust of your Mac and iOS device {:#trust}
 

src/_includes/docs/install/devices/ios-physical.md

@@ -38,7 +38,7 @@ Configure your physical iOS device to connect to Xcode.
 
 1. Click **Trust**.
 
-   ![Trust Mac][]{:.mw-100}
+   ![Trust Mac][]
 
 1. When prompted, unlock your iOS device.
 
@@ -119,7 +119,7 @@ To provision your project, follow the Xcode signing flow.
 
    The **Team** dropdown displays that option as **Your Name (Personal Team)**.
 
-   ![Xcode account add][]{:.mw-100}
+   ![Xcode account add][]
 
    After you select a team, Xcode performs the following tasks:
 
@@ -132,7 +132,7 @@ If automatic signing fails in Xcode, verify that the project's
 **Identity** <span aria-label="and then">></span>
 **Bundle Identifier** value is unique.
 
-![Check the app's Bundle ID][]{:.mw-100}
+![Check the app's Bundle ID][]
 
 ##### Enable trust of your Mac and iOS device {:#trust}
 

src/_includes/docs/install/flutter/download.md

@@ -15,7 +15,7 @@
    {% assign dirdl='%USERPROFILE%\\Downloads' %}
    {% assign ps-dir-dl='$env:USERPROFILE\\Downloads\\' %}
    {% assign ps-dir-target='$env:USERPROFILE\\dev\\' %}
-   {% capture uz %}
+   {% capture uz -%}
      {{prompt}} Expand-Archive `
          –Path {{ps-dir-dl}}flutter_sdk_v1.0.0.zip `
          -Destination {{ps-dir-target}}
@@ -57,13 +57,13 @@ then extract the SDK.
 
    {% if include.os=='macOS' %}
 
-   | Intel Processor                                                     | Apple Silicon                                                                             |
-   |---------------------------------------------------------------------|-------------------------------------------------------------------------------------------|
-   | [(loading...)](#){:.download-latest-link-{{osl}} .btn .btn-primary} | [(loading...)](#){:.download-latest-link-{{osl}}-arm64 .apple-silicon .btn .btn-primary}  |
+   | Intel Processor                                                  | Apple Silicon                                                                         |
+   |------------------------------------------------------------------|---------------------------------------------------------------------------------------|
+   | [(loading...)](#){:.download-latest-link-{{osl}} .filled-button} | [(loading...)](#){:.download-latest-link-{{osl}}-arm64 .apple-silicon .filled-button} |
 
    {% else %}
 
-   [(loading...)](#){:.download-latest-link-{{osl}} .btn .btn-primary}
+   [(loading...)](#){:.download-latest-link-{{osl}} .filled-button}
 
    {% endif -%}
 

src/_includes/docs/install/test-drive/androidstudio.md

@@ -49,7 +49,7 @@ uses [Material Components][].
 1. Locate the main Android Studio toolbar at the top of the
    Android Studio edit window.
 
-   ![Main IntelliJ toolbar][]{:.mw-100}
+   ![Main IntelliJ toolbar][]
 
 1. In the **target selector**, select an Android device for running the app.
    You created your Android target device in the **Install** section.