v.1.2.1

SimonPadbury · Dec 20, 2023 · 2e3963b · 2e3963b
1 parent 76c97f1
commit 2e3963b
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,8 @@
 ## Baselayer 3
 
-A modern starter CSS library with container queries, a real CSS grid system, clamp() powered typography and spacing sizes, OKLCH color utilities, and custom properties.
-
 v.1.2.1
-Filesize: `baselayer.min.css` 22.3 KB
+
+A modern starter CSS library with container queries, a real CSS grid system, clamp() powered typography and spacing sizes, OKLCH color utilities, and custom properties.
 
 Designed as a good place to start, Baselayer may be all you need — for small web projects. Or you may use it as a _baselayer_ to quick-start your mega project.
 
@@ -21,6 +20,10 @@ Ready to use as-is, Baselayer gives you all this and more:
 
 Baselayer uses some modern web technologies such as CSS Grid, CSS math functions (e.g. clamp), CSS variables, CSS cascade layers, and the OKLCH color model. Therefore it supports only up-to-date (2023 forward) evergreen web browsers (Safari, Firefox, Chrome, Edge, etc.).
 
+> If you would rather use media queries for these utility classes, or if you need to support older (pre-container query) browsers a while longer, this is easy to do: in `layout.css` simply do a search-and-replace `@container → @media` (and then you don’t need to use the Baselayer’s `container` context class).
+
+**Filesize:** `baselayer.min.css` 22.3 KB
+
 **Documentation:** [https://simonpadbury.github.io/baselayer-3/](https://simonpadbury.github.io/baselayer-3/)
 
 **Changelog:** [https://github.com/SimonPadbury/baselayer-3/blob/main/README.md](https://github.com/baselayer/blob/main/CHANGELOG.md)
diff --git a/_src/colors.md b/_src/colors.md
@@ -10,7 +10,7 @@ nextLink: "Forms"
 ---
 
 <div aria-label="Note" class="popout mb-2 bl-3 b-blue b-300 p-2 t-black bg-blue bg-100">
-  Since June 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new <code class="t-black bg-blue bg-200">oklch()</code> color model (see <a  class="t-blue t-600 hover:t-700"href="https://caniuse.com/?search=oklch">Can I use OKLCH</a>). And in each of these browsers the lightness, chroma, and hue  channels can be separately controlled by CSS variables.
+  Since June 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new <code class="t-black bg-blue bg-200">oklch()</code> color model (see <a class="t-blue t-600 hover:t-700" href="https://caniuse.com/?search=oklch">Can I use OKLCH</a>). And in each of these browsers the lightness, chroma, and hue  channels can be separately controlled by CSS variables.
 </div>
 
 <div class="full-bleed m-2 p-2 flex flex-center flex-wrap">

diff --git a/_src/index.md b/_src/index.md
@@ -6,6 +6,12 @@ nextPage: "/typography/"
 nextLink: "Typography"
 ---
 
+<div aria-label="Note" class="popout mb-2 bl-3 b-blue b-300 p-2 t-black bg-blue bg-100">
+  <p><strong>Baselayer 3 v.1.2.x uses <em>container queries</em> for its responsive flexbox, grid, and visibility classes.</strong></p>
+  <p>All “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see <a class="t-blue t-600 hover:t-700" href="https://caniuse.com/?search=container">Can I use Container Queries</a>) since September 2023. See <a class="t-blue t-600 hover:t-700" href="/baselayer-3/layout/#container-query-powered-layouts">container query powered layouts</a>.</p>
+  <p class="mb-0">If you would rather use media queries for these utility classes, or if you need to support older (pre-container query) browsers a while longer, this is easy to do: in <code class="t-black bg-blue bg-200">layout.css</code> simply do a search-and-replace <code class="t-black bg-blue bg-200">@container → @media</code> (and then you don’t need to use Baselayer’s <code class="t-black bg-blue bg-200">container</code> context class).</p>
+</div>
+
 ## Introduction
 
 <p class="t-big">Designed as a good place to start, Baselayer may be all you need — for small static websites and blogs. Or you may use it as a <em>baselayer</em> to quick-start your mega project.</p>

diff --git a/_src/templates/base.njk b/_src/templates/base.njk
@@ -35,7 +35,18 @@
     .theme-light .label-light .check-box::before { content: '✓'; }
     .theme-dark .label-dark .check-box::before { content: '✓'; }
 
-    @media (min-width: 960px) {
+    body {
+      container-type: inline-size;
+      container-name: page;
+    }
+
+    @container page (max-width: 1279px) {
+      #toc ul ul {
+        display: none;
+      }
+    }
+
+    @container page (min-width: 960px) {
       #site-title { 
         max-width: 200px;
         margin-inline: auto;
@@ -53,7 +64,7 @@
         overflow-y: auto;
       }
     }
-    @media (min-width: 1280px) {
+    @container page (min-width: 1280px) {
       article > .grid {
         grid-template-columns: 1fr var(--w-xs);
       }
@@ -132,15 +143,15 @@
 
             <footer class="lg:col-1 content-grid">
               <nav class="popout mt-3 mb-2 b-1 r-pill p-cell popout">
-                <ul class="m-0 unlist p-0 flex flex-space-between">
+                <ul class="m-0 unlist p-0 grid gap-2 sm:equal-2-cols">
                   {% if prevPage %}
                   <li class="my-1 flex flex-middle gap-1">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
                     <a href="{{ prevPage | url }}"> {{ prevLink if prevLink else "Previous page" }}</a>
                   </li>
                   {% endif %}
                   {% if nextPage %}
-                  <li class="my-1 flex flex-middle gap-1 t-right">
+                  <li class="sm:col-2 my-1 flex flex-middle flex-end gap-1">
                     <a href="{{ nextPage | url }}">{{ nextLink if nextLink else "Next page" }}</a>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
                   </li>

diff --git a/docs/buttons/index.html b/docs/buttons/index.html
@@ -35,7 +35,18 @@
     .theme-light .label-light .check-box::before { content: '✓'; }
     .theme-dark .label-dark .check-box::before { content: '✓'; }
 
-    @media (min-width: 960px) {
+    body {
+      container-type: inline-size;
+      container-name: page;
+    }
+
+    @container page (max-width: 1279px) {
+      #toc ul ul {
+        display: none;
+      }
+    }
+
+    @container page (min-width: 960px) {
       #site-title { 
         max-width: 200px;
         margin-inline: auto;
@@ -53,7 +64,7 @@
         overflow-y: auto;
       }
     }
-    @media (min-width: 1280px) {
+    @container page (min-width: 1280px) {
       article > .grid {
         grid-template-columns: 1fr var(--w-xs);
       }
@@ -472,15 +483,15 @@ <h2 id="stretch-buttons" tabindex="-1">Stretch buttons</h2>
 
             <footer class="lg:col-1 content-grid">
               <nav class="popout mt-3 mb-2 b-1 r-pill p-cell popout">
-                <ul class="m-0 unlist p-0 flex flex-space-between">
+                <ul class="m-0 unlist p-0 grid gap-2 sm:equal-2-cols">
 
                   <li class="my-1 flex flex-middle gap-1">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
                     <a href="/baselayer-3/forms/"> Forms</a>
                   </li>
 
 
-                  <li class="my-1 flex flex-middle gap-1 t-right">
+                  <li class="sm:col-2 my-1 flex flex-middle flex-end gap-1">
                     <a href="/baselayer-3/examples/">Examples</a>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
                   </li>

diff --git a/docs/colors/index.html b/docs/colors/index.html
@@ -35,7 +35,18 @@
     .theme-light .label-light .check-box::before { content: '✓'; }
     .theme-dark .label-dark .check-box::before { content: '✓'; }
 
-    @media (min-width: 960px) {
+    body {
+      container-type: inline-size;
+      container-name: page;
+    }
+
+    @container page (max-width: 1279px) {
+      #toc ul ul {
+        display: none;
+      }
+    }
+
+    @container page (min-width: 960px) {
       #site-title { 
         max-width: 200px;
         margin-inline: auto;
@@ -53,7 +64,7 @@
         overflow-y: auto;
       }
     }
-    @media (min-width: 1280px) {
+    @container page (min-width: 1280px) {
       article > .grid {
         grid-template-columns: 1fr var(--w-xs);
       }
@@ -317,7 +328,7 @@ <h1 class="t-semibold">Colors</h1>
             <main id="article-content" class="lg:col-1">
               <div class="content-grid">
                 <div aria-label="Note" class="popout mb-2 bl-3 b-blue b-300 p-2 t-black bg-blue bg-100">
-  Since June 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new <code class="t-black bg-blue bg-200">oklch()</code> color model (see <a  class="t-blue t-600 hover:t-700"href="https://caniuse.com/?search=oklch">Can I use OKLCH</a>). And in each of these browsers the lightness, chroma, and hue  channels can be separately controlled by CSS variables.
+  Since June 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new <code class="t-black bg-blue bg-200">oklch()</code> color model (see <a class="t-blue t-600 hover:t-700" href="https://caniuse.com/?search=oklch">Can I use OKLCH</a>). And in each of these browsers the lightness, chroma, and hue  channels can be separately controlled by CSS variables.
 </div>
 <div class="full-bleed m-2 p-2 flex flex-center flex-wrap">
   <div style="width: max(72px, 160px)">
@@ -962,15 +973,15 @@ <h3 id="dark%2Flight-theme-toggle" tabindex="-1">Dark/light theme toggle</h3>
 
             <footer class="lg:col-1 content-grid">
               <nav class="popout mt-3 mb-2 b-1 r-pill p-cell popout">
-                <ul class="m-0 unlist p-0 flex flex-space-between">
+                <ul class="m-0 unlist p-0 grid gap-2 sm:equal-2-cols">
 
                   <li class="my-1 flex flex-middle gap-1">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
                     <a href="/baselayer-3/decoration/"> Decoration</a>
                   </li>
 
 
-                  <li class="my-1 flex flex-middle gap-1 t-right">
+                  <li class="sm:col-2 my-1 flex flex-middle flex-end gap-1">
                     <a href="/baselayer-3/forms/">Forms</a>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
                   </li>

diff --git a/docs/decoration/index.html b/docs/decoration/index.html
@@ -35,7 +35,18 @@
     .theme-light .label-light .check-box::before { content: '✓'; }
     .theme-dark .label-dark .check-box::before { content: '✓'; }
 
-    @media (min-width: 960px) {
+    body {
+      container-type: inline-size;
+      container-name: page;
+    }
+
+    @container page (max-width: 1279px) {
+      #toc ul ul {
+        display: none;
+      }
+    }
+
+    @container page (min-width: 960px) {
       #site-title { 
         max-width: 200px;
         margin-inline: auto;
@@ -53,7 +64,7 @@
         overflow-y: auto;
       }
     }
-    @media (min-width: 1280px) {
+    @container page (min-width: 1280px) {
       article > .grid {
         grid-template-columns: 1fr var(--w-xs);
       }
@@ -460,15 +471,15 @@ <h2 id="opacity" tabindex="-1">Opacity</h2>
 
             <footer class="lg:col-1 content-grid">
               <nav class="popout mt-3 mb-2 b-1 r-pill p-cell popout">
-                <ul class="m-0 unlist p-0 flex flex-space-between">
+                <ul class="m-0 unlist p-0 grid gap-2 sm:equal-2-cols">
 
                   <li class="my-1 flex flex-middle gap-1">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
                     <a href="/baselayer-3/layout/"> Layout</a>
                   </li>
 
 
-                  <li class="my-1 flex flex-middle gap-1 t-right">
+                  <li class="sm:col-2 my-1 flex flex-middle flex-end gap-1">
                     <a href="/baselayer-3/colors/">Colors</a>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
                   </li>

diff --git a/docs/forms/index.html b/docs/forms/index.html
@@ -35,7 +35,18 @@
     .theme-light .label-light .check-box::before { content: '✓'; }
     .theme-dark .label-dark .check-box::before { content: '✓'; }
 
-    @media (min-width: 960px) {
+    body {
+      container-type: inline-size;
+      container-name: page;
+    }
+
+    @container page (max-width: 1279px) {
+      #toc ul ul {
+        display: none;
+      }
+    }
+
+    @container page (min-width: 960px) {
       #site-title { 
         max-width: 200px;
         margin-inline: auto;
@@ -53,7 +64,7 @@
         overflow-y: auto;
       }
     }
-    @media (min-width: 1280px) {
+    @container page (min-width: 1280px) {
       article > .grid {
         grid-template-columns: 1fr var(--w-xs);
       }
@@ -487,15 +498,15 @@ <h2 id="form-buttons" tabindex="-1">Form buttons</h2>
 
             <footer class="lg:col-1 content-grid">
               <nav class="popout mt-3 mb-2 b-1 r-pill p-cell popout">
-                <ul class="m-0 unlist p-0 flex flex-space-between">
+                <ul class="m-0 unlist p-0 grid gap-2 sm:equal-2-cols">
 
                   <li class="my-1 flex flex-middle gap-1">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
                     <a href="/baselayer-3/colors/"> Colors</a>
                   </li>
 
 
-                  <li class="my-1 flex flex-middle gap-1 t-right">
+                  <li class="sm:col-2 my-1 flex flex-middle flex-end gap-1">
                     <a href="/baselayer-3/buttons/">Buttons</a>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
                   </li>

diff --git a/docs/index.html b/docs/index.html
@@ -35,7 +35,18 @@
     .theme-light .label-light .check-box::before { content: '✓'; }
     .theme-dark .label-dark .check-box::before { content: '✓'; }
 
-    @media (min-width: 960px) {
+    body {
+      container-type: inline-size;
+      container-name: page;
+    }
+
+    @container page (max-width: 1279px) {
+      #toc ul ul {
+        display: none;
+      }
+    }
+
+    @container page (min-width: 960px) {
       #site-title { 
         max-width: 200px;
         margin-inline: auto;
@@ -53,7 +64,7 @@
         overflow-y: auto;
       }
     }
-    @media (min-width: 1280px) {
+    @container page (min-width: 1280px) {
       article > .grid {
         grid-template-columns: 1fr var(--w-xs);
       }
@@ -316,7 +327,12 @@ <h1 class="t-semibold">Baselayer 3 is a powerful, modern, tiny CSS library</h1>
 
             <main id="article-content" class="lg:col-1">
               <div class="content-grid">
-                <h2 id="introduction" tabindex="-1">Introduction</h2>
+                <div aria-label="Note" class="popout mb-2 bl-3 b-blue b-300 p-2 t-black bg-blue bg-100">
+  <p><strong>Baselayer 3 v.1.2.x uses <em>container queries</em> for its responsive flexbox, grid, and visibility classes.</strong></p>
+  <p>All “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see <a class="t-blue t-600 hover:t-700" href="https://caniuse.com/?search=container">Can I use Container Queries</a>) since September 2023. See <a class="t-blue t-600 hover:t-700" href="/baselayer-3/layout/#container-query-powered-layouts">container query powered layouts</a>.</p>
+  <p class="mb-0">If you would rather use media queries for these utility classes, or if you need to support older (pre-container query) browsers a while longer, this is easy to do: in <code class="t-black bg-blue bg-200">layout.css</code> simply do a search-and-replace <code class="t-black bg-blue bg-200">@container → @media</code> (and then you don’t need to use Baselayer’s <code class="t-black bg-blue bg-200">container</code> context class).</p>
+</div>
+<h2 id="introduction" tabindex="-1">Introduction</h2>
 <p class="t-big">Designed as a good place to start, Baselayer may be all you need — for small static websites and blogs. Or you may use it as a <em>baselayer</em> to quick-start your mega project.</p>
 <p>Ready to use as-is, Baselayer 3’s 22.3 KB (minified) stylesheet gives you all this:</p>
 <ul>
@@ -418,10 +434,10 @@ <h3 id="(2.)-the-visually-hidden-class" tabindex="-1">(2.) The <code>visually-hi
 
             <footer class="lg:col-1 content-grid">
               <nav class="popout mt-3 mb-2 b-1 r-pill p-cell popout">
-                <ul class="m-0 unlist p-0 flex flex-space-between">
+                <ul class="m-0 unlist p-0 grid gap-2 sm:equal-2-cols">
 
 
-                  <li class="my-1 flex flex-middle gap-1 t-right">
+                  <li class="sm:col-2 my-1 flex flex-middle flex-end gap-1">
                     <a href="/baselayer-3/typography/">Typography</a>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
                   </li>