v5.3.5

Author: SimonPadbury

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

@@ -534,7 +534,7 @@ <h1 class="h2 mt-0 t-bold t-balance">Accessibility features in Codebase</h1>
       <p>Numerous accessibility considerations have been factored into Codebase 5. These are, in summary:</p>
 <ol>
 <li>Default font size is 100% (usually defaults to 16px), bumping up to 112.5% (18px) for <code>sm</code> viewports up (see <a href="/codebase-5/docs/1-getting-started/responsive-design/">responsive design</a>).</li>
-<li>Accessible UI colors</li>
+<li>Accessible user interface (UI) colors</li>
 <li>Link underine becomes thicker on hover, making the hover state more obvious</li>
 <li><code>:focus</code> ring styling for form elements and buttons</li>
 <li><code>:focus-visible</code> styling for links</li>
@@ -543,7 +543,7 @@ <h1 class="h2 mt-0 t-bold t-balance">Accessibility features in Codebase</h1>
 <h2 id="default-font-size" tabindex="-1">Default font size</h2>
 <p>The 100% font size defaults to 16px in most web browsers. Various guidelines recommend a larger font size, so the Codebase default bumps up 10 112.5% (18px) for devices larger than phones.</p>
 <p>The advantage of <em>not setting a default font size in px</em> is that it allows your website to be scaled to the <em>user’s</em> preferred default font size – some people with sight impairments may increase their default font size in their browser settings. You don’t want to prevent that from happening by setting your font size in px.</p>
-<p>From there, all typography sizes and spacing sizes (margins, paddings, and gaps) in Codebase are set in rems or ems -- making them dependant on the root font size.</p>
+<p>From there, all typography sizes and spacing sizes (margins, paddings, and gaps) in Codebase are set in rems or ems – making them dependant on the root font size.</p>
 <pre class="language-scss"><code class="language-scss"><span class="token comment">// In: 00_setup/_default-variables.scss</span><br><span class="token selector">:root </span><span class="token punctuation">{</span><br>  <span class="token property">--t-fs</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token comment">/* usually 16px */</span><br>  <span class="token property">--t-fs-bump</span><span class="token punctuation">:</span> 112.5%<span class="token punctuation">;</span> <span class="token comment">/* usually 18px */</span><br><span class="token punctuation">}</span><br><br><span class="token comment">// In: 01_basics/_base.scss</span><br><span class="token selector">body </span><span class="token punctuation">{</span><br>  ...<br>  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--t-fs<span class="token punctuation">)</span><span class="token punctuation">;</span><br>  ...<br><span class="token punctuation">}</span><br><br><span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$font-size-bump</span> == true </span><span class="token punctuation">{</span><br>  <span class="token keyword">@include</span> <span class="token function">break-min</span><span class="token punctuation">(</span>w-sm<span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token selector">body </span><span class="token punctuation">{</span><br>      <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--t-fs-bump<span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br>  <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
 <p>For more information on font size and accessibility, see:</p>
 <ul>
@@ -595,9 +595,9 @@ <h2 id="focus-state-styling" tabindex="-1">Focus state styling</h2>
 </form>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span>A button in a form:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span></code></pre>
 <ol start="2">
-<li>If a scrollable element has overflowing content, then it will recieve <code>:focus-visible</code> when tabbing — except that are using the Safari browser can't tab onto e.g. overflowing <code>&lt;pre&gt;</code> elements, or overflowing elements with the Codebase <code>overflow-x</code> or <code>overflow-y</code> class.</li>
+<li>If a scrollable element has overflowing content, then it will recieve <code>:focus-visible</code> when tabbing — except that are using the Safari browser can’t tab onto e.g. overflowing <code>&lt;pre&gt;</code> elements, or overflowing elements with the Codebase <code>overflow-x</code> or <code>overflow-y</code> class.</li>
 <li>Images within Links (i.e. <code>a img</code>) will become slightly transparent (using an opacity filter) when the link has recieved <code>:focus-visible</code>, allowing the amber background to show though. See <a href="/codebase-5/docs/2-classless-basics/media/#linked-images">media: linked images</a></li>
-<li>Codebase also has <a href="/codebase-5/docs/6-simple-components/panel-links/">panel links</a> — these are simply links where you want only <em>some</em> of the text to look like a link (e.g. maybe you have an explainer in smaller text on a big button; maybe you have a feature panel where you want the whole thing wrapped in an <code>&lt;a href=&quot;&quot;&gt;</code> (link), but only the title to be styled as a link (with an underscore etc.)). For these, when the panel recieves <code>:focus-visible</code>, only the panel link title text becomes black and recieves the thick black underline, while  the other text becomes a dark amber color (so that the user's attention goes to the link title), while the whole panel gets the amber background <code>:focus-visible</code> panel gets the amber background. And if there's an image in your panel link, then it will get the opacity filter effect too.</li>
+<li>Codebase also has <a href="/codebase-5/docs/6-simple-components/panel-links/">panel links</a> — these are simply links where you want only <em>some</em> of the text to look like a link (e.g. maybe you have an explainer in smaller text on a big button; maybe you have a feature panel where you want the whole thing wrapped in an <code>&lt;a href=&quot;&quot;&gt;</code> (link), but only the title to be styled as a link (with an underscore etc.)). For these, when the panel recieves <code>:focus-visible</code>, only the panel link title text becomes black and recieves the thick black underline, while  the other text becomes a dark amber color (so that the user's attention goes to the link title), while the whole panel gets the amber background <code>:focus-visible</code> panel gets the amber background. And if there’s an image in your panel link, then it will get the opacity filter effect too.</li>
 </ol>
 <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>

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

@@ -558,36 +558,44 @@ <h2 id="utility-class-spacing" tabindex="-1">Utility class spacing</h2>
   <thead>
     <tr>
       <th>Element grid measure</th>
+      <th>CSS variable</th>
       <th>Utility class suffix</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><code>0.5rem</code></td>
+      <td><code>--sp-1</code></td>
       <td><code>-1</code></td>
     </tr>
     <tr>
       <td><code>1rem</code></td>
+      <td><code>--sp-2</code></td>
       <td><code>-2</code></td>
     </tr>
     <tr>
       <td><code>1.5rem</code> = 1 line height</td>
+      <td><code>--sp-3</code></td>
       <td><code>-3</code></td>
     </tr>
     <tr>
       <td><code>2rem</code></td>
+      <td><code>--sp-4</code></td>
       <td><code>-4</code></td>
     </tr>
     <tr>
       <td><code>2.5rem</code></td>
+      <td><code>--sp-5</code></td>
       <td><code>-5</code></td>
     </tr>
     <tr>
       <td><code>3rem</code> = 2 lines</td>
+      <td><code>--sp-6</code></td>
       <td><code>-6</code></td>
     </tr>
   </tbody>
 </table>
+
     </div>
   </main>
 

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

@@ -544,7 +544,7 @@ <h1 class="h2 mt-0 t-bold t-balance">Introduction</h1>
 <pre class="language-js"><code class="language-js">dist<span class="token operator">/</span><br> ├─ codebase<span class="token punctuation">.</span>css<br> └─ codebase<span class="token punctuation">.</span>css<span class="token punctuation">.</span>map</code></pre>
 <h2 id="simple-html-setup" tabindex="-1">Simple HTML setup</h2>
 <ol>
-<li><a href="/codebase-5/dist/codebase.css">Download the CSS</a> (alternatively, get the entire <code>dist/</code>) and place it in your project.</li>
+<li><a href="/codebase-5/dist/codebase.css">Download the CSS</a> and place it in your project.</li>
 <li>Create your first HTML page – e.g. copying the starter example below.</li>
 <li>Link to <code>codebase.css</code> and <code>alpine.js</code> in the HTML <code>&lt;head&gt;</code>:</li>
 </ol>
@@ -564,7 +564,7 @@ <h3 id="components" tabindex="-1">Components</h3>
 <li>For complex Codebase components that require some added features (e.g. for CSS transitions) for visualising their change of state.</li>
 </ol>
 <h4 id="simple-components" tabindex="-1">Simple components</h4>
-<p>Here are some simple components that you can build using Codebase (I’m calling a component “simple” if it requires only CSS and no JavaScript for functionality):</p>
+<p>Here are some simple component examples that you can build using Codebase (I’m calling a component “simple” if it requires only CSS and no JavaScript for functionality):</p>
 <ul>
 <li><a href="/codebase-5/docs/6-simple-components/menus-and-menubars">Menus and menubars</a></li>
 <li><a href="/codebase-5/docs/6-simple-components/heros">Heros</a></li>
@@ -577,7 +577,7 @@ <h4 id="simple-components" tabindex="-1">Simple components</h4>
 <li><a href="/codebase-5/docs/6-simple-components/panel-links/">Panel links</a></li>
 </ul>
 <h4 id="components-using-alpinejs" tabindex="-1">Components using AlpineJS</h4>
-<p>Codebase pairs well with <a href="https://alpinejs.dev/">AlpineJS</a>. The Codebase components examples in these docs have been re-factored to use Alpine v3.</p>
+<p>Codebase pairs well with <a href="https://alpinejs.dev/">AlpineJS</a>. The Codebase-plus-AlpineJS component examples in these docs have been re-factored to use Alpine v3.</p>
 <p><strong>Notes:</strong></p>
 <ol>
 <li><code>codebase.css</code> does not require Alpine as a dependency. You can use Codebase with other JS frameworks, or none at all.</li>
@@ -599,7 +599,7 @@ <h2 id="the-scss-library" tabindex="-1">The SCSS library</h2>
 <p>Available in the repository are all the Codebase <a href="https://github.com/codebase-frontend-library/codebase-5/tree/main/src/codebase/scss">SCSS files</a>.</p>
 <p><strong>Notes:</strong></p>
 <ol>
-<li>Codebase uses <a href="/codebase-5/docs/1-getting-started/css-variables/">CSS variables</a>**, not Sass variables.</li>
+<li>Codebase uses <a href="/codebase-5/docs/1-getting-started/css-variables/">CSS variables</a>, not Sass variables.</li>
 <li><em>PostCSS</em> and its associated dependencies have not been used. So there are no generated vendor prefixes (for supporting pre ~2018 browsers). In the few places where vendor prefixes are still required (in the body tag, and in the glassmorphic overlays), I have added them manually. CSS minification is done thorugh <code>--style compact</code> on the <em>Sass</em> package (not CSS Nano).</li>
 <li>Internet Explorer is not supported.</li>
 </ol>