From 707ecf6902aa57d6f5e1702a3db949b155bfa799 Mon Sep 17 00:00:00 2001 From: Simon Padbury Date: Wed, 10 Jan 2024 07:34:45 +0000 Subject: [PATCH] v.1.2.3 --- CHANGELOG.md | 7 ++ README.md | 2 +- _src/buttons.md | 22 +++-- _src/colors.md | 2 +- _src/css/baselayer.css | 2 +- _src/css/min/baselayer.min.css | 4 +- _src/css/partials/forms.css | 4 +- _src/css/partials/reset.css | 3 +- _src/css/partials/typography.css | 137 ++++++++++++++++++++++++++- _src/css/partials/variables.css | 4 +- _src/data/metadata.json | 4 +- _src/templates/base.njk | 3 + _src/templates/includes/site-nav.njk | 6 +- _src/typography.md | 8 +- docs/buttons/index.html | 40 ++++---- docs/colors/index.html | 21 ++-- docs/css/min/baselayer.min.css | 4 +- docs/decoration/index.html | 19 ++-- docs/examples/index.html | 2 +- docs/forms/index.html | 19 ++-- docs/index.html | 23 +++-- docs/layout/index.html | 19 ++-- docs/typography/index.html | 26 ++--- package-lock.json | 4 +- package.json | 2 +- 25 files changed, 279 insertions(+), 108 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 81ff396..a421044 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index efa1eca..e3b1346 100644 --- a/README.md +++ b/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/) diff --git a/_src/buttons.md b/_src/buttons.md index aa61430..59823ba 100644 --- a/_src/buttons.md +++ b/_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 ` - - - Link “button” + + + Link “button”

@@ -108,13 +108,13 @@ When colorizing buttons, remember to set their `hover:` hover state shades too. - + - + -Link “button” +Link “button” ``` ## 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.
@@ -190,7 +192,7 @@ The typographic size modifier classes `t-small` and `t-big` work on buttons.
``` -**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 diff --git a/_src/colors.md b/_src/colors.md index b144d8b..da3820f 100644 --- a/_src/colors.md +++ b/_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.

- - -