v.1.2.3

CHANGELOG.md

@@ -9,6 +9,13 @@
 
 # Baselayer 3 changelog
 
+## v.1.2.3 -- 10 Jan 2024
+
+* Improved `box-sizing: border-box`.
+* Transparent 1px solid border on buttons (previously `border: 0`).
+* Added `!important` to typography utilities `t-small` and `t-big`.
+* Changed min-height to height on buttons (and `.btn` utility).
+
 ## v.1.2.2 -- 5 Jan 2024
 
 * Minor typographic improvements.

README.md

@@ -22,7 +22,7 @@ Baselayer uses some modern web technologies such as CSS Grid, CSS math functions
 
 > 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
+**Filesize:** `baselayer.min.css` 24 KB
 
 **Documentation:** [https://simonpadbury.github.io/baselayer-3/](https://simonpadbury.github.io/baselayer-3/)
 

_src/buttons.md

@@ -8,7 +8,7 @@ nextPage: "/examples/"
 nextLink: "Examples"
 ---
 
-Baselayer form elements have simple background, hover/active and focus styling (no default border). 
+Baselayer form elements have simple background, hover/active and focus styling (border is set to `1px solid transparent`). 
 
 ### Button types and link “pseudo-buttons”
 
@@ -34,7 +34,7 @@ Baselayer form elements have simple background, hover/active and focus styling (
 
 **Notes:**
 
-1. Form inputs, textareas, buttons, and the `btn` class, have `font-size: inherit`. This means their font sizes can be modified by any font-size class in Baselayer.
+1. Form inputs, textareas, buttons, and the `btn` class, have `font-size: inherit`. This means their font sizes can be modified by any font-size wrapper around the button in Baselayer.
 2. The font-family of form elements, buttons, `btn` is controlled by `var(--base)` (default is sans-serif).
 3. The `btn` class doesn’t include the input focus ring (that is set only on form inputs, textareas, and the `<button>` tag). But if the `btn` utility class is used on an `<a href="">` link tag, then will get the link focus ring insead (this is only visible when keyboard-tabbing or using assistive tech).
 
@@ -97,9 +97,9 @@ When colorizing buttons, remember to set their `hover:` hover state shades too.
 <form>
   <p>
     <button type="button" name="button">Button</button>
-    <button class="b-blue b-600 hover:b-700 bg-blue bg-600 hover:bg-700" type="button" name="button">Button</button>
-    <button class="b-orange b-300 hover:b-400 t-black hover:t-black bg-orange bg-300 hover:bg-400" type="button" name="button">Button</button>
-    <a class="btn b-1 b-green bg-transparent bg-600 t-green t-600 hover:b-700 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>
+    <button class="bg-blue bg-600 hover:bg-700" type="button" name="button">Button</button>
+    <button class="t-black hover:t-black bg-orange bg-300 hover:bg-400" type="button" name="button">Button</button>
+    <a class="btn b-green hover:b-700 bg-transparent bg-600 t-green t-600 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>
   </p>
 </form>
 
@@ -108,13 +108,13 @@ When colorizing buttons, remember to set their `hover:` hover state shades too.
 <button type="button" name="button">Button</button>
 
 <!-- Blue button -->
-<button class="b-blue b-600 hover:b-700 bg-blue bg-600 hover:bg-700" type="button" name="button">Button</button>
+<button class="bg-blue bg-600 hover:bg-700" type="button" name="button">Button</button>
 
 <!-- orange button -->
-<button class="b-orange b-300 hover:b-400 t-black hover:t-black bg-orange bg-300 hover:bg-400" type="button" name="button">Button</button>
+<button class="t-black hover:t-black bg-orange bg-300 hover:bg-400" type="button" name="button">Button</button>
 
 <!-- Green outline (a.k.a. ghost) link “button” -->
-<a class="btn b-1 b-green bg-transparent bg-600 t-green t-600 hover:b-700 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>
+<a class="btn b-green hover:b-700 bg-transparent bg-600 t-green t-600 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>
 ```
 
 ## Buttons with icons
@@ -174,7 +174,9 @@ The `r-pill` class on a square icon button will make it circular. (See [decorati
 
 ## Button sizes
 
-The typographic size modifier classes `t-small` and `t-big` work on buttons.
+Buttons (and the `btn` utility) will resize according to the font-size of the block that they are inside.
+
+You can also use the typographic size classes `t-small` and `t-big` to modify buttons directly.
 
 <form class="mt-2 mb-3 flex flex-middle gap-1">
   <button type="button" name="button" class="t-small">Button</button>
@@ -190,7 +192,7 @@ The typographic size modifier classes `t-small` and `t-big` work on buttons.
 </form>
 ```
 
-**Note:** button x-axis padding is `1em`, so that it responds to the text size of the button.
+**Note:** button x-axis padding is `1em`, so that it will also respond to the text size of the button.
 
 ## Stretch buttons
 

_src/colors.md

@@ -701,7 +701,7 @@ baselayerInit();
 You will also need a toggle button, like the one in the sidebar. The checkmarks are added in by CSS pseudo-selectors.
 
 <p class="flex flex-center">
-  <button class="p-cell flex flex-column gap-1 bg-blue hover:bg-600" onclick="toggleTheme()">
+  <button class="toggler p-cell flex flex-column gap-1 bg-blue hover:bg-600" onclick="toggleTheme()">
     <div class="label-light w-100% flex flex-middle gap-1">
       <div class="check-box flex flex-center flex-middle t-black bg-white"></div>
       <div class="grow left">Light theme</div>

_src/css/baselayer.css

@@ -1,5 +1,5 @@
 /*!
-Baselayer 3 CSS v.1.2.1
+Baselayer 3 CSS v.1.2.3
 https://github.com/SimonPadbury/baselayer
 */
 

_src/css/partials/forms.css

@@ -83,12 +83,12 @@
     position: relative;
     -webkit-appearance: none;
     appearance: none;
-    min-height: var(--mh-input);
+    height: var(--h-input);
     display: inline-flex;
     justify-content: center;
     align-items: center;
     margin: 0;
-    border: 0;
+    border: 1px solid transparent;
     padding: var(--sp-1) 1em;
     font-family: var(--t-base);
     font-size: inherit;

_src/css/partials/reset.css

@@ -9,12 +9,13 @@
     -moz-text-size-adjust: none;
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
+    box-sizing: border-box;
   }
 
   *,
   *::before,
   *::after {
-    box-sizing: border-box;
+    box-sizing: inherit;
   }
 
   body {

_src/css/partials/typography.css

@@ -230,12 +230,12 @@
   }
 
   .t-big {
-    font-size: 150%;
+    font-size: 150% !important;
   }
 
   small,
   .t-small {
-    font-size: 75%;
+    font-size: 75% !important;
   }
 
   .t-lighter {
@@ -313,4 +313,137 @@
     font-size: var(--fs-long-read-prose);
   } */
 
+  fieldset {
+    border: var(--b-1);
+  }
+
+  label,
+  legend {
+    font-family: var(--t-base);
+  }
+
+  ::placeholder {
+    color: var(--tc-input);
+    opacity: .7;
+  }
+
+  input,
+  textarea,
+  select {
+    outline: 0 none;
+    min-height: var(--mh-input);
+    /* -webkit-appearance: none; */
+    border: 0;
+    border-radius: unset;
+    padding: var(--p-cell);
+    font-family: var(--t-base);
+    font-size: inherit;
+    text-align: start;
+    color: var(--tc-input);
+    background: var(--bgc-input);
+  }
+
+  input:focus,
+  select:focus,
+  textarea:focus {
+    position: relative;
+    z-index: 1;
+    outline: 0;
+    box-shadow: 0 0 0 4px var(--focus-ring);
+  }
+
+  select:not([multiple]) {
+    height: var(--mh-input);
+  }
+
+  [type="color"] {
+    width: var(--mh-input);
+    height: var(--mh-input);
+    padding: .25em;
+  }
+
+  [type="checkbox"],
+  [type="radio"] {
+    display: inline;
+    height: 0.85em;
+    min-height: unset;
+    width: 1em;
+  }
+
+  [type=search] {
+    -webkit-appearance: textfield;
+  }
+
+  ::file-selector-button {
+    border: 0;
+    font-size: 1em;
+    color: white;
+    background: var(--bgc-btn);
+  }
+
+  :disabled:hover {
+    cursor: not-allowed;
+  }
+
+  textarea:not([rows]) {
+    min-height: 6em;
+  }
+
+  button,
+  [type="button"],
+  [type="submit"],
+  [type="reset"],
+  .btn {
+    position: relative;
+    -webkit-appearance: none;
+    appearance: none;
+    height: var(--h-input);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    border: 1px solid transparent;
+    padding: var(--sp-1) 1em;
+    font-family: var(--t-base);
+    font-size: inherit;
+    font-weight: var(--fw-btn);
+    text-decoration: none;
+    color: var(--tc-btn);
+    background: var(--bgc-btn);
+    transition: all 0.15s ease;
+  }
+
+  button:hover,
+  button:active,
+  [type="button"]:hover,
+  [type="button"]:active,
+  [type="submit"]:hover,
+  [type="submit"]:active,
+  [type="reset"]:hover,
+  [type="reset"]:active,
+  .btn:hover,
+  .btn:active {
+    color: var(--tc-btn-hover);
+    background: var(--bgc-btn-hover);
+    cursor: pointer;
+  }
+
+  button:focus-visible,
+  [type="button"]:focus-visible,
+  [type="submit"]:focus-visible,
+  [type="reset"]:focus-visible {
+    z-index: 1;
+    outline: 0;
+    box-shadow: 0 0 0 4px var(--focus-ring);
+  }
+
+  /* Note: The .btn class doesn’t get this input focus ring. As normal, it will 
+  get the link focus ring insead when you do <a class="btn" href="">...</a>. */
+
+  .btn-icon {
+    width: var(--mh-input);
+    height: var(--mh-input);
+    padding: 0;
+    line-height: inherit;
+  }
 }

_src/css/partials/variables.css

@@ -226,8 +226,8 @@ Alternatively, you could set these up using...
   --do-link: .3rem;
   /* link decoration thickness */
   --dt-link: 1px;
-  /* input and button minimum height */
-  --mh-input: 2.5em;
+  /* input and button height */
+  --h-input: 2.5em;
   /* button font-weight */
   --fw-btn: var(--fw-semibold);
 

_src/data/metadata.json

@@ -1,8 +1,8 @@
 {
   "title": "Baselayer 3 CSS",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "licence": "MIT",
-  "filesize": "22.3 KB",
+  "filesize": "24 KB",
   "developer": {
     "name": "Simon Padbury",
     "url": "https://github.com/SimonPadbury"

_src/templates/base.njk

@@ -23,6 +23,9 @@
       overflow-x: auto;
       background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='silver' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
     }
+    button.toggler {
+      height: 3.625em;
+    }
     .check-box {
       width: 1rem;
       height: 1rem;

_src/templates/includes/site-nav.njk

@@ -35,7 +35,7 @@
         </div>
 
         <div class="mb-2 p-cell">
-          <button class="w-100% mb-1 p-1 flex flex-column gap-1 bg-gray bg-600 hover:bg-700" onclick="toggleFont()">
+          <button class="toggler w-100% mb-1 p-1 flex flex-column gap-1 bg-gray bg-600 hover:bg-700" onclick="toggleFont()">
             <div class="label-base w-100% flex flex-middle gap-1">
               <div class="check-box flex flex-center flex-middle t-black bg-white"></div>
               <div class="grow t-left">Base font</div>
@@ -46,7 +46,7 @@
             </div>
           </button>
 
-          <button class="w-100% mb-1 p-1 flex flex-column gap-1 bg-gray bg-600 hover:bg-700" onclick="toggleFS()">
+          <button class="toggler w-100% mb-1 p-1 flex flex-column gap-1 bg-gray bg-600 hover:bg-700" onclick="toggleFS()">
             <div class="label-normal w-100% flex flex-middle gap-1">
               <div class="check-box flex flex-center flex-middle t-black bg-white"></div>
               <div class="grow t-left">Normal font-size</div>
@@ -57,7 +57,7 @@
             </div>
           </button>
 
-          <button class="w-100% mb-1 p-1 flex flex-column gap-1 bg-gray bg-600 hover:bg-700" onclick="toggleTheme()">
+          <button class="toggler w-100% mb-1 p-1 flex flex-column gap-1 bg-gray bg-600 hover:bg-700" onclick="toggleTheme()">
             <div class="label-light w-100% flex flex-middle gap-1">
               <div class="check-box flex flex-center flex-middle t-black bg-white"></div>
               <div class="grow t-left">Light theme</div>

_src/typography.md

@@ -25,14 +25,16 @@ A few native font stacks are set in the `root-vars.css` file.
 }
 ```
 
-In Baselayer 3 v.1.2.1, the sans-serif and serif native font stacks have been improved and isolated to their own CSS variables. These are not accessed directly, but they are loaded into the Baselayer variabes `--t-base` and `--t-prose`. (Baselayer’s earlier “Old Style” serif stack remains available as `--t-old-serif`, but it is no longer deployed in Baselayer. If you want to use it, it’s still there for you to access) .
+Since Baselayer 3 v.1.2.1, the sans-serif and serif native font stacks have been improved and isolated to their own CSS variables. These are not accessed directly, but they are loaded into the Baselayer variabes `--t-base` and `--t-prose`.
+
+(Baselayer’s earlier “Old Style” serif stack remains available as `--t-old-serif`, but it is no longer deployed in Baselayer. If you want to use it, it’s still there for you to access) .
 
 Everything here is an example, a place to start. Your own `--base` and `--prose` don’t need to be both sans-serif and serif. See [setting font stacks](#setting-font-stacks) for more information.
 
 The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between `--base` and `--prose` in this main content area.
 
 <p class="flex flex-center">
-  <button class="p-cell flex flex-column gap-1 bg-blue bg-600 hover:bg-700" onclick="toggleFont()">
+  <button class="toggler p-cell flex flex-column gap-1 bg-blue bg-600 hover:bg-700" onclick="toggleFont()">
     <div class="label-base w-100% flex flex-middle gap-1">
       <div class="check-box flex flex-center flex-middle t-black bg-white"></div>
       <div class="grow t-left">Base font</div>
@@ -344,7 +346,7 @@ Container query powered long-read
 The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between normal and long-read font size in this main article column.
 
 <p class="flex flex-center">
-  <button class="p-cell flex flex-column gap-1 bg-blue bg-600 hover:bg-700" onclick="toggleFS()">
+  <button class="toggler p-cell flex flex-column gap-1 bg-blue bg-600 hover:bg-700" onclick="toggleFS()">
     <div class="label-normal w-100% flex flex-middle gap-1">
       <div class="check-box flex flex-center flex-middle t-black bg-white"></div>
       <div class="grow t-left">Normal font-size</div>