v.5.1.0

Author: SimonPadbury

LOG.md

@@ -4,6 +4,13 @@ _Note: update version numbers need updating every time in `metadata.json`, `pack
 
 ***
 
+## 20 Oct 2022 -- v.5.1.0
+
+* **Breaking change:** improved CSS grid gap and flexbox gap, using the full set of responsive spacing variables: now `gap-1` thru `gap-6` (and column only and row only versions, and breakpoint alternatives) instead of the simpler `gap-sm`, `gap-md`, and `gap-lg`. Also `flexbox-gap` has gone; use these new `gap-*` utilities instead.
+* Improved `focus-visible` focus ring: black and white "checker" dotted line, comprised of black dotted outline overlaying a solid white box-shadow of the same thickness.
+* `btn` class (for links) now _doesn't_ have the input focus ring; it has the link focus ring.
+* Updated npm packages.
+
 ## 26 Sep 2022 -- v.5.0.10
 
 * Added hover states to opacity utilities.

README.md

@@ -12,7 +12,7 @@ Docs: https://codebase-frontend-library.github.io/codebase-5/
 
 ***
 
-* Current version: 5.0.10 -- see [log](https://github.com/codebase-frontend-library/codebase-5/blob/main/LOG.md)
-* CSS file size: 91 KB
+* Current version: 5.1.0 -- see [log](https://github.com/codebase-frontend-library/codebase-5/blob/main/LOG.md)
+* CSS file size: 93 KB
 * Licence: MIT
 * Developer: Simon Padbury

docs/dist/codebase.css

@@ -8,7 +8,7 @@
   <title>Accessibility - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.0.10" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.1.0" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -273,7 +273,7 @@
 
     <div class="grow">
       <div class="menu flex flex-end sm:hidden-below">
-        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
         <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
       </div>  
     </div>
@@ -327,7 +327,7 @@
         <div id="side-menu-wrap" class="p-2 pb-6">
 
           <div class="mb-3 sm:hidden">
-            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
             <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
           </div>
 
@@ -599,8 +599,8 @@ <h2 id="focus-ring-styling" tabindex="-1">Focus ring styling</h2>
 <p>Interactive elements require a visual indicator that to lake them obvious for sighted keyboard users, who use “tabbing” to get around the webpage’s <a href="https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree">accessibility tree</a> (a.k.a. tab index).</p>
 <p>In Codebase, focus ring styling has been improved for links, buttons, form inputs, etc. Seeing that Chrome, Edge, Firefox, and Safari all now have a similar-looking default focus ring, since v.5.0.7 Codebase improves upon this as follows:</p>
 <ul>
-<li><code>:focus-visible</code> focus rings on links are now the <em>default gray outline</em>, offset by 2px, with a solid white 2px box-shadow inside the offset (this improves focus ring visibility over dark backgrounds).</li>
-<li><code>:focus</code> focus rings on form elements and buttons (including styled <code>.btn</code> pseudo-buttons) have a 0.25rem light blue box shadow.</li>
+<li><code>:focus-visible</code> – since Codebase v.5.1.0, focus rings on links have black and white &quot;checker&quot; dotted line, comprised of black dotted outline overlaying a solid white box-shadow of the same thickness. The black makes the focus ring easy to see over light colors whereas the white makes it easy to see over dark colors.</li>
+<li><code>:focus</code> – focus rings on form elements and buttons (including styled <code>.btn</code> pseudo-buttons) have a 0.25rem light blue box shadow.</li>
 </ul>
 <h2 id="alpinejs-powered-components" tabindex="-1">AlpineJS powered components</h2>
 <p>Besides moving up to AlpineJS version 3, the Alpine powered components in these docs have been improved to enable usability via keyboard and assistive tech:</p>
@@ -714,7 +714,7 @@ <h3 id="apps-and-browser-extensions" tabindex="-1">Apps and browser extensions</
     </a>
   </p>
 
-  <p>Version 5.0.10 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
+  <p>Version 5.1.0 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
 
 </footer>
 

docs/dist/codebase.css.map

@@ -8,7 +8,7 @@
   <title>Element grid - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.0.10" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.1.0" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -273,7 +273,7 @@
 
     <div class="grow">
       <div class="menu flex flex-end sm:hidden-below">
-        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
         <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
       </div>  
     </div>
@@ -327,7 +327,7 @@
         <div id="side-menu-wrap" class="p-2 pb-6">
 
           <div class="mb-3 sm:hidden">
-            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
             <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
           </div>
 
@@ -562,12 +562,9 @@ <h1 class="mb-0 t-heavy t-primary">The Codebase element grid</h1>
 <h2 id="how-the-element-grid-is-used" tabindex="-1">How the element grid is used</h2>
 <p>The Codebase element grid has been deployed a follows:</p>
 <ol>
-<li>Element grid increments of 0.5rem have been used for setting all line-heights, margins and paddings throughout Codebase.</li>
 <li>By default, the base typography vertical rhythm (line-height) is set at 1.5rem (= 3 element grid units).
 The line heights for headers have also been set using 0.5rem increments.</li>
-<li>For <a href="/codebase-5/docs/3-responsive-layouts/flex">flex</a> layouts, <code>flex-gap</code> has been set at 2rem.</li>
-<li>For <a href="/codebase-5/docs/3-responsive-layouts/grid">grid</a> layouts, <code>gap</code> has been set at 2rem.</li>
-<li>Decoration utilities for margins and paddings have been set using values from the 0.5rem element grid.</li>
+<li>Spacing utilities for margins, paddings and gaps (used in both flexbox and grid) have been set using values from the 0.5rem element grid.</li>
 </ol>
 <h2 id="infographic%3A-the-codebase-element-grid" tabindex="-1">Infographic: the Codebase element grid</h2>
 <div class="my-6">
@@ -646,7 +643,7 @@ <h2 id="utility-class-spacing" tabindex="-1">Utility class spacing</h2>
     </a>
   </p>
 
-  <p>Version 5.0.10 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
+  <p>Version 5.1.0 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
 
 </footer>
 

docs/docs/1-getting-started/accessibility/index.html

@@ -8,7 +8,7 @@
   <title>Improvements - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.0.10" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.1.0" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -273,7 +273,7 @@
 
     <div class="grow">
       <div class="menu flex flex-end sm:hidden-below">
-        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
         <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
       </div>  
     </div>
@@ -327,7 +327,7 @@
         <div id="side-menu-wrap" class="p-2 pb-6">
 
           <div class="mb-3 sm:hidden">
-            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
             <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
           </div>
 
@@ -571,6 +571,7 @@ <h3 id="utilities-with-madia-query-variants" tabindex="-1">Utilities with madia
 <li><a href="/codebase-5/docs/4-layout-utilities/positions">Positions</a> - <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code>, <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code></li>
 <li><a href="/codebase-5/docs/4-layout-utilities/floats">Floats</a> – <code>right</code> and <code>left</code></li>
 <li><a href="/codebase-5/docs/5-decoration-utilities/spacing">Spacing</a> – margins and paddings</li>
+<li><code>Gap-*</code> in <a href="/codebase-5/docs/3-layout-utilities/flexbox/#adding-gaps">flexbox</a> and <a href="/codebase-5/docs/3-layout-utilities/grid/#adding-gaps">grid</a></li>
 <li><a href="/codebase-5/docs/5-decoration-utilities/borders">Borders</a></li>
 </ul>
 <h3 id="real-css-grid-system" tabindex="-1">Real CSS grid system</h3>
@@ -602,20 +603,18 @@ <h2 id="things-that-have-been-removed" tabindex="-1">Things that have been remov
 <li>“Dark mode” styling is not included in Codebase. (Dark mode may come back again as a side project in future.)</li>
 <li>The flexbox percentile “pseudo grid” system has been removed from Codebase. You can use the real CSS Grid <a href="/codebase-5/docs/3-layout-utilities/grid">grid system</a> instead.</li>
 <li>Support for Internet Explorer 11 has been dropped.</li>
-<li>The Codebase 4 <code>activator.js</code> has been retired, therefore Codebase 5 does not have CSS pertaining to it.</li>
+<li>The Codebase 4 <code>activator.js</code> has been retired, and all CSS pertaining to it has been removed. (Use AlpineJS instead.)</li>
 </ul>
 <h2 id="internet-explorer-11-is-not-supported" tabindex="-1">Internet Explorer 11 is not supported</h2>
-<p>IE11 came out in 2013, and <a href="https://docs.microsoft.com/en-us/lifecycle/announcements/m365-ie11-microsoft-edge-legacy">Microsoft stopped supporting IE11 in August 2021</a> as a standalone browser. However, as IE11 is integral to older Windows operating systems, it continued to receive continual support until the <a href="https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge">end of it’s life cycle</a> in <strong>May 2022</strong> for these old versions of Windows. But now, Internet explorer has finally been <a href="https://death-to-ie11.com">laid to rest</a>.</p>
+<p>IE11 came out in 2013, and <a href="https://docs.microsoft.com/en-us/lifecycle/announcements/m365-ie11-microsoft-edge-legacy">Microsoft stopped supporting IE11 in August 2021</a> as a standalone browser. Microsoft stopped supporting IE11 in <a href="https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge">May 2022</a>.</p>
 <p>Several things have been included in Codebase CSS that have no backward-compatibility to older browsers such as IE11:</p>
 <ul>
-<li>The real <em>CSS Grid</em> based <a href="/codebase-5/docs/3-layout-utilities/grid">grid system</a>.</li>
+<li>The real <em>CSS Grid</em> based <a href="/codebase-5/docs/3-layout-utilities/grid">grid system</a></li>
+<li>The <code>gap</code> CSS property for flexbox and grid</li>
 <li><a href="/codebase-5/docs/3-layout-utilities/aspect-ratios">Aspect-ratio</a> wrappers</li>
-<li>Some styles have size constraints using <code>clamp()</code>.</li>
+<li>Some styles have size constraints using <code>clamp()</code></li>
 </ul>
 <p><strong>Note:</strong> also, <a href="https://alpinejs.dev/upgrade-guide#no-ie-11">Alpine 3 does not support Interet Explorer 11</a>.</p>
-<h2 id="activator.js-has-been-discontinued" tabindex="-1">Activator.JS has been discontinued</h2>
-<p>Since IE11 is not supported in Codebase 5, Codebase 4’s Activator JavaScript <code>activator.js</code> have been removed (both the vanilla JS and jQuery versions).</p>
-<p>Now, Codebase uses only AlpineJS (verion 3.x) for HTML/JS components.</p>
 <h2 id="gulp-is-no-longer-required" tabindex="-1">Gulp is no longer required</h2>
 <p>The <a href="https://gulpjs.com/">Gulp</a> taskrunner is no longer required.</p>
 <ul>
@@ -661,7 +660,7 @@ <h2 id="gulp-is-no-longer-required" tabindex="-1">Gulp is no longer required</h2
     </a>
   </p>
 
-  <p>Version 5.0.10 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
+  <p>Version 5.1.0 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
 
 </footer>
 

docs/docs/1-getting-started/element-grid/index.html

@@ -8,7 +8,7 @@
   <title>Introduction - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.0.10" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.1.0" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -273,7 +273,7 @@
 
     <div class="grow">
       <div class="menu flex flex-end sm:hidden-below">
-        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+        <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
         <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
       </div>  
     </div>
@@ -327,7 +327,7 @@
         <div id="side-menu-wrap" class="p-2 pb-6">
 
           <div class="mb-3 sm:hidden">
-            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.0.10">Download</a></div>
+            <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.1.0">Download</a></div>
             <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
           </div>
 
@@ -554,7 +554,7 @@ <h1 class="mb-0 t-heavy t-primary">Introduction</h1>
   <main class="col-1 sm:col-2">
     <div class="container-sm">
       <p>You can start working immediately with Codebase in a simple HTML setup.</p>
-<div class="my-6 flex flex-gap flex-wrap flex-center t-center">
+<div class="my-6 flex gap-3 flex-wrap flex-center t-center">
   <div>
     <a class="btn btn-primary btn-lg rounded-pill" href="/codebase-5/dist/codebase.css">Download CSS</code></a>
   </div>
@@ -666,7 +666,7 @@ <h2 id="browser-support" tabindex="-1">Browser support</h2>
     </a>
   </p>
 
-  <p>Version 5.0.10 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
+  <p>Version 5.1.0 • <a href="https://github.com/codebase-frontend-library/codebase-5/blob/master/LICENSE">MIT licence</a> • <a href="https://github.com/codebase-frontend-library/codebase-5">GitHub</a></p>
 
 </footer>