Rename CSS utility classes.

damiendart · Jun 19, 2024 · 2489e8e · 2489e8e
1 parent c9c4b15
commit 2489e8e
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 47 deletions.
diff --git a/src/javascript/site-preferences.js b/src/javascript/site-preferences.js
@@ -16,13 +16,13 @@ class SitePreferencesDialog extends HTMLElement {
         <dialog class="dialog">
           <form method="dialog">
             <div class="dialog__header">
-              <button autofocus class="dialog__close" formmethod="dialog" value="cancel"><span class="visually-hidden">Cancel</span></button>
+              <button autofocus class="dialog__close" formmethod="dialog" value="cancel"><span class="u-visually-hidden">Cancel</span></button>
               <hr aria-hidden="true">
               <h1 class="h3">Preferences</h2>
             </div>
-            <div class="dialog__body stack">
+            <div class="dialog__body u-stack">
               <p>Your preferences will be saved locally. For more information, see the <a href="/privacy-policy">privacy policy</a>.</p>
-              <fieldset class="stack">
+              <fieldset class="u-stack">
                 <legend>Site theme</legend>
                 ${
                   Object

diff --git a/src/sass/app.scss b/src/sass/app.scss
@@ -4,3 +4,4 @@
 
 @use "base";
 @use "components";
+@use "utilities";
diff --git a/src/sass/components/index.scss b/src/sass/components/index.scss
@@ -2,9 +2,7 @@
 // This file is distributed under the MIT licence. For more information,
 // please refer to the accompanying "LICENCE" file.
 
-@use "anchor";
 @use "button";
-@use "collapsible";
 @use "content";
 @use "cta-download";
 @use "cta-sharing";
@@ -18,7 +16,5 @@
 @use "site-footer";
 @use "site-preferences-dialog";
 @use "skip-links";
-@use "stack";
 @use "social-share-list";
 @use "tag-list";
-@use "visually-hidden";
diff --git a/src/sass/components/_anchor.scss → src/sass/utilities/_anchor.scss b/src/sass/components/_anchor.scss → src/sass/utilities/_anchor.scss
@@ -2,7 +2,7 @@
 // This file is distributed under the MIT licence. For more information,
 // please refer to the accompanying "LICENCE" file.
 
-.anchor {
+.u-anchor {
   position: absolute;
   visibility: hidden;
 }
diff --git a/src/sass/components/_collapsible.scss → src/sass/utilities/_collapsible.scss b/src/sass/components/_collapsible.scss → src/sass/utilities/_collapsible.scss
@@ -4,7 +4,7 @@
 
 @use "../mixins";
 
-.collapsible {
+.u-collapsible {
   &--x-small-down {
     @include mixins.breakpoint-down(x-small) {
       display: none;

diff --git a/src/sass/components/_stack.scss → src/sass/utilities/_stack.scss b/src/sass/components/_stack.scss → src/sass/utilities/_stack.scss
@@ -6,7 +6,9 @@
 @use "../mixins";
 @use "../variables";
 
-.stack {
+.u-stack {
+  $s: &;
+
   & > * + * {
     margin-top: math.div(variables.$base-line-height, 2);
   }
@@ -19,8 +21,8 @@
 
   & > h1 + *,
   & > h1 + h2,
-  & > * + .stack__widest,
-  & > .stack__widest + * {
+  & > * + #{$s}__widest,
+  & > #{$s}__widest + * {
     margin-top: variables.$base-line-height * 2;
   }
 
@@ -38,7 +40,7 @@
     margin-top: 0;
   }
 
-  & > * + .stack__hug {
+  & > * + #{$s}__hug {
     margin-top: 0;
   }
 }
diff --git a/src/sass/components/_visually-hidden.scss → src/sass/utilities/_visually-hidden.scss b/src/sass/components/_visually-hidden.scss → src/sass/utilities/_visually-hidden.scss
@@ -2,7 +2,7 @@
 // This file is distributed under the MIT licence. For more information,
 // please refer to the accompanying "LICENCE" file.
 
-.visually-hidden:not(:focus):not(:active) {
+.u-visually-hidden:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;

diff --git a/src/sass/utilities/index.scss b/src/sass/utilities/index.scss
@@ -0,0 +1,4 @@
+@use "anchor";
+@use "collapsible";
+@use "stack";
+@use "visually-hidden";
diff --git a/src/yassg/.templates/base.html.twig b/src/yassg/.templates/base.html.twig
@@ -71,7 +71,7 @@
     <hr aria-hidden="true">
 
     <main class="{{ 'content page__main ' ~ contentClasses | default('content page__main') }}" id="content">
-        <div class="content__container stack">
+        <div class="content__container u-stack">
             {% block heading %}
                 <h1>{{ title | smartypants | widont }}</h1>
             {% endblock %}
@@ -82,7 +82,7 @@
 
     <hr aria-hidden="true">
 
-    <footer id="footer" class="page__footer site-footer stack">
+    <footer id="footer" class="page__footer site-footer u-stack">
         <nav class="site-footer__navigation">
             <ul class="site-footer__navigation__list" role="list">
                 <li><a href="/privacy-policy">Privacy Policy</a></li>

diff --git a/src/yassg/.templates/homepage.html.twig b/src/yassg/.templates/homepage.html.twig
@@ -17,7 +17,7 @@
                 <img alt="A black-and-white drawing of a waving robot in a poncho." height="375" src="/assets/homepage-robot.{{ releaseTimestamp }}.png" srcset="/assets/homepage-robot@2x.{{ releaseTimestamp }}.png 2x" title="Hello!" width="350">
             </picture>
         </div>
-        <div class="image-and-text__text stack">
+        <div class="image-and-text__text u-stack">
             {{ renderedMarkdown | raw }}
         </div>
     </div>

diff --git a/src/yassg/.templates/partials/sharing-links.html.twig b/src/yassg/.templates/partials/sharing-links.html.twig
@@ -1,5 +1,5 @@
 <hr aria-hidden="true">
-<div class="cta-sharing stack__widest">
+<div class="cta-sharing u-stack__widest">
     <p class="cta-sharing__heading">Share this page:</p>
     <ul class="social-share-list" role="list">
         <li class="social-share-list__item social-share-list__item--twitter">
@@ -8,18 +8,18 @@
                 target="_blank"
                 rel="noopener noreferrer"
                 title="Share on Twitter"
-            ><span class="visually-hidden">Share on Twitter</span></a>
+            ><span class="u-visually-hidden">Share on Twitter</span></a>
         </li>
         <li class="social-share-list__item social-share-list__item--facebook">
             <a
                 href="https://www.facebook.com/sharer.php?u={{ link | escape('url') }}"
                 target="_blank"
                 rel="noopener noreferrer"
                 title="Share on Facebook"
-            ><span class="visually-hidden">Share on Facebook</span></a>
+            ><span class="u-visually-hidden">Share on Facebook</span></a>
         </li>
         <li class="social-share-list__item social-share-list__item--permalink">
-            <a data-clipboard="{{ link }}" href="{{ link }}" title="Permalink"><span class="visually-hidden">Permalink</span></a>
+            <a data-clipboard="{{ link }}" href="{{ link }}" title="Permalink"><span class="u-visually-hidden">Permalink</span></a>
         </li>
     </ul>
 </div>
diff --git a/src/yassg/git/index.html.twig b/src/yassg/git/index.html.twig
@@ -18,18 +18,18 @@
     <p>For more information on these repositories, see the
         <a href="/projects/">projects page</a>.</p>
 
-    <span class="anchor" id="adventofcode"></span>
-    <span class="anchor" id="brainfuck"></span>
-    <span class="anchor" id="flippywindow"></span>
-    <span class="anchor" id="kew"></span>
-    <span class="anchor" id="nt"></span>
-    <span class="anchor" id="pathshorten"></span>
-    <span class="anchor" id="robotinaponcho"></span>
-    <span class="anchor" id="setup"></span>
-    <span class="anchor" id="snippets"></span>
-    <span class="anchor" id="timetracker"></span>
-    <span class="anchor" id="toolbox"></span>
-    <span class="anchor" id="yassg"></span>
+    <span class="u-anchor" id="adventofcode"></span>
+    <span class="u-anchor" id="brainfuck"></span>
+    <span class="u-anchor" id="flippywindow"></span>
+    <span class="u-anchor" id="kew"></span>
+    <span class="u-anchor" id="nt"></span>
+    <span class="u-anchor" id="pathshorten"></span>
+    <span class="u-anchor" id="robotinaponcho"></span>
+    <span class="u-anchor" id="setup"></span>
+    <span class="u-anchor" id="snippets"></span>
+    <span class="u-anchor" id="timetracker"></span>
+    <span class="u-anchor" id="toolbox"></span>
+    <span class="u-anchor" id="yassg"></span>
     <h2>Active repositories</h2>
     <pre><code>https://www.robotinaponcho.net/git/adventofcode.git
 https://www.robotinaponcho.net/git/brainfuck.git
@@ -45,13 +45,13 @@ https://www.robotinaponcho.net/git/toolbox.git
 https://www.robotinaponcho.net/git/toolbox-sass.git
 https://www.robotinaponcho.net/git/yassg.git</code></pre>
 
-    <span class="anchor" id="bastardsnake"></span>
-    <span class="anchor" id="knr-solutions"></span>
-    <span class="anchor" id="nfsnapi-python"></span>
-    <span class="anchor" id="notes"></span>
-    <span class="anchor" id="obtaincornhoop"></span>
-    <span class="anchor" id="timeline"></span>
-    <span class="anchor" id="toolbox-sass"></span>
+    <span class="u-anchor" id="bastardsnake"></span>
+    <span class="u-anchor" id="knr-solutions"></span>
+    <span class="u-anchor" id="nfsnapi-python"></span>
+    <span class="u-anchor" id="notes"></span>
+    <span class="u-anchor" id="obtaincornhoop"></span>
+    <span class="u-anchor" id="timeline"></span>
+    <span class="u-anchor" id="toolbox-sass"></span>
     <h2>Archived repositories</h2>
     <pre><code>https://www.robotinaponcho.net/git/bastardsnake.git
 https://www.robotinaponcho.net/git/knr-solutions.git

diff --git a/src/yassg/notes/index.html.twig b/src/yassg/notes/index.html.twig
@@ -41,13 +41,13 @@
     {% for category, notes in collections | filter((v, k) => k != 'notes') %}
         <h2 id="{{ category }}">{{ categoryNames[category] ?? category | smartypants }}</h2>
 
-        <ul class="notes-list stack" role="list">
+        <ul class="notes-list u-stack" role="list">
             {% for note in notes | sort((a, b) => a.metadata.title <=> b.metadata.title) %}
                 {% set verb = note.metadata.git.createdAt == note.metadata.git.updatedAt ? 'Created' : 'Updated' %}
 
                 <li class="notes-list__item">
                     <a href="/{{ note.metadata.slug }}">{{ note.metadata.title | smartypants }}</a>
-                    <span class="notes-list__item__meta"><span class="visually-hidden">(</span><span>{{ verb }} </span>{{ note.metadata.git.updatedAt | date('d M, Y') }}<span class="visually-hidden">)</span></span>
+                    <span class="notes-list__item__meta"><span class="u-visually-hidden">(</span><span>{{ verb }} </span>{{ note.metadata.git.updatedAt | date('d M, Y') }}<span class="u-visually-hidden">)</span></span>
                 </li>
             {% endfor %}
         </ul>

diff --git a/src/yassg/projects/flippywindow/index.html.twig b/src/yassg/projects/flippywindow/index.html.twig
@@ -31,18 +31,18 @@
         <a href="http://www.comic-tools.com/2008/10/my-mirror-is-most-important.html">spotting
         visual issues</a>.</p>
 
-    <div class="cta-download stack stack__widest">
+    <div class="cta-download u-stack u-stack__widest">
         <h2>
             <a class="button button--inverted" href="https://damiendart.itch.io/flippywindow">
-                <span class="button__download">Download</span><span class="collapsible collapsible--medium-down">
-                FlippyWindow</span> <span class="collapsible collapsible--small-down">from</span>
-                <span class="button__itchio collapsible collapsible--x-small-down"><span class="visually-hidden">itch.io</span></span></a>
+                <span class="button__download">Download</span><span class="u-collapsible u-collapsible--medium-down">
+                FlippyWindow</span> <span class="u-collapsible u-collapsible--small-down">from</span>
+                <span class="button__itchio u-collapsible u-collapsible--x-small-down"><span class="u-visually-hidden">itch.io</span></span></a>
         </h2>
         <ul role="list">
             <li class="cta-download__information-list__item"><strong>It's
                 free! Requires&nbsp;Windows&nbsp;8&nbsp;or&nbsp;later.</strong></li>
             <li class="cta-download__information-list__item">Nothing to
-                install: just&nbsp;unzip&nbsp;and&nbsp;run<span class="collapsible collapsible--small-down">
+                install: just&nbsp;unzip&nbsp;and&nbsp;run<span class="u-collapsible u-collapsible--small-down">
                 the executable</span>.</li>
             <li class="cta-download__information-list__item">FlippyWindow is
                 <a href="https://www.robotinaponcho.net/git/#flippywindow">open-source</a>.</li>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,4 @@

		@use "base";
		@use "components";
		@use "utilities";