v.5.2.9

Author: SimonPadbury

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ## 2 Nov 2023 -- v.5.2.9
 
+* Added `xs:`, `sm:`, `md:`, and `lg:` media query tiered variants to all `flex` modifier classes.
 * Improved `t-link-inside` and `t-link`
 
 ## 25 Oct 2023 -- v.5.2.8

README.md

@@ -18,7 +18,7 @@ Install via Git: https://github.com/codebase-frontend-library/codebase-5.git
 
 ***
 
-* Current version: 5.2.9 -- see [log](https://github.com/codebase-frontend-library/codebase-5/blob/main/LOG.md)
+* Current version: 5.2.9 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
 * CSS file size: 89 KB
 * Licence: MIT
 * Developer: Simon Padbury

docs/dist/codebase.css

@@ -591,6 +591,9 @@ <h2 id="notes-on-flex" tabindex="-1">Notes on <code>flex</code></h2>
 <li>
 <p>If required in your design, you can override a flexbox at a wider breakpoint the element so that it is back to being a full-width block, using a responsive <a href="/codebase-5/docs/3-layout-utilities/blocks">block</a> utility.</p>
 </li>
+<li>
+<p>New in <code>v.5.2.9</code>: In addition to the <code>flex</code> setup class, you can also override eah of the flex modifier classes at the <code>xs</code>, <code>sm</code>, <code>md</code>, and <code>lg</code> breakpoint widths — see <a href="#responsive-flex-modifier-tiers">responsive flex modifier tiers</a>.</p>
+</li>
 </ol>
 <h2 id="setting-up-a-flex-flexbox" tabindex="-1">Setting up a <code>flex</code> flexbox</h2>
 <p>All you need is <code>flex</code>:</p>
@@ -674,6 +677,24 @@ <h3 id="using-grow-to-stretch-individual-flex-items" tabindex="-1">Using <code>g
 </div>
 </div>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex flex-column<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 250px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><br>  &lt;div class="grow>grow<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre>
+<h2 id="responsive-flex-modifier-tiers" tabindex="-1">Responsive flex modifier tiers</h2>
+<p>New in <code>v.5.2.9</code>: In addition to the <code>flex</code> setup class, you can also override eah of the flex modifier classes at the <code>xs</code>, <code>sm</code>, <code>md</code>, and <code>lg</code> breakpoint widths:</p>
+<ul>
+<li><code>flex-start</code> / <code>flex-center</code> / <code>flex-end</code></li>
+<li><code>flex-top</code> / <code>flex-middle</code> / <code>flex-bottom</code></li>
+<li><code>flex-column</code> / <code>flex-column-reverse</code></li>
+<li><code>flex-row</code> / <code>flex-row-reverse</code></li>
+<li><code>flex-space-around</code> / <code>flex-space-between</code></li>
+<li><code>flex-grow-auto</code> / <code>flex-grow-equal</code></li>
+<li><code>flex-wrap</code></li>
+</ul>
+<p>Example: in this simple menubar, the links are centered forsmall viewports and right-aligned for medium viewports up:</p>
+<nav class="mb-3 b-thin p-block flex flex-center md:flex-end gap-2">
+  <a href="#/">About</a>
+  <a href="#/">Blog</a>
+  <a href="#/">Contact</a>
+</nav>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b-thin p-block flex flex-center md:flex-end gap-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span></code></pre>
 <h2 id="adding-gaps" tabindex="-1">Adding gaps</h2>
 <p>There are two ways to add gaps in <code>flex</code> sets.</p>
 <h3 id="gaps-using-gap-*" tabindex="-1">Gaps using <code>gap-*</code></h3>

docs/dist/codebase.css.map

@@ -180,19 +180,19 @@
 
 <section class="h-100vh grid md:equal-2-cols">
 
-  <div class="pt-6 md:pt-0 md:px-6 flex flex-column flex-center flex-middle t-white bg-teal-600">
+  <div class="pt-6 md:pt-0 md:px-6 flex flex-column flex-center flex-middle t-center md:t-left t-white bg-teal-600">
     <div class="pt-3 container-xs t-long-read">
-      <h1 class="mb-0 t-thin t-center sm:t-left">Codebase is a <span class="h5 t-heavy">business class</span> CSS style library for the modern web</h1>
+      <h1 class="mb-0 t-thin">Codebase is a <span class="h5 t-heavy t-nowrap">business class</span> CSS style library for the modern web</h1>
     </div>
-    <div class="container-xs my-4 md:my-6 inline-flex flex-wrap gap-2 h4">
+    <div class="container-xs my-4 md:my-6 flex flex-wrap flex-center md:flex-start gap-2 h4">
       <a class="inline-block b-thin b-white rounded-pill p-block t-semibold t-white hover:t-teal-600 t-decoration-none hover:bg-white" href="/codebase-5/docs/1-getting-started/introduction/">Docs</a>
       <a class="inline-block b-thin b-white rounded-pill p-block t-semibold t-white hover:t-teal-600 t-decoration-none hover:bg-white" href="/codebase-5/dist/codebase.css?v=5.2.9">Download CSS</a>
       <a class="inline-block b-thin b-white rounded-pill p-block t-semibold t-white hover:t-teal-600 t-decoration-none hover:bg-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub repo</a>
     </div>
     <div class="pb-3 container-xs mx-auto grid xs:equal-2-cols col-gap-3 row-gap-1">
       <div class="flex flex-column gap-1">
         <span>Current version: 5.2.9</span>
-        <span>CSS file size: 89 KB</span>
+        <span>CSS file size: 91 KB</span>
       </div>
       <div class="flex flex-column gap-1">
         <span>Licence: <a class="t-teal-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/LICENCE">MIT</a></span>
@@ -215,7 +215,7 @@ <h1 class="mb-0 t-thin t-center sm:t-left">Codebase is a <span class="h5 t-heavy
     <p>Starting from a beautifully minimalist set of classless HTML tag styles for cross-browser compatibility, Codebase brings you a “utility first” approach to all this and more:</p>
   </div>
 
-    <div class="container-lg grid xs:equal-2-cols md:equal-3-cols gap-3 md:gap-6">
+    <div class="container-lg grid xs:equal-2-cols md:equal-3-cols gap-2 sm:gap-4 lg:gap-6">
 
       <div class="bs-3 rounded-lg p-2 md:p-4 bg-white">
         <h2>Typography</h2>

docs/docs/3-layout-utilities/flexbox/index.html

@@ -1,5 +1,5 @@
 {
   "title": "Codebase",
   "version": "5.2.9",
-  "css_filesize": "89 KB"
+  "css_filesize": "91 KB"
 }

docs/index.html

@@ -98,7 +98,7 @@ $mq-value in $mq-width {
 $mq-value in $mq-width {
   .#{$mq-key}\:flex {
     @include break-min(#{$mq-value}) {
-      display: flex;
+      @include flex;
     }
   }
 }