clairity.css 0.1.2 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +227 -45
- data/README.md +5 -5
- data/lib/assets/css/clairity/base.css +13 -6
- data/lib/assets/css/clairity/classes.css +42 -104
- data/lib/assets/css/clairity/components.css +74 -45
- data/lib/assets/css/clairity/cosmetic.css +359 -5
- data/lib/assets/css/clairity/legacy.css +65 -0
- data/lib/assets/css/clairity/palette.css +308 -225
- data/lib/assets/css/clairity/states.css +3 -295
- data/lib/assets/css/clairity/utilities.css +39 -7
- data/lib/assets/css/clairity.css +4 -1
- data/lib/assets/images/fiery_sunburst.jpg +0 -0
- data/lib/clairity.css/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 163be46874756a5231e475c95d45a25d38a8a885a37e310db7241f6a3e263afe
|
|
4
|
+
data.tar.gz: a96f76cc8e47c0db378013e9c53e2fdbbb616a27d65bab50318eaba640b4e677
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 10c2542beddd54bdb64cb7a7814a8ed7759c219ed3fc20805793f178918a6b22e29a29a4c18742304a23b8e96c5ea4f57d28cc4fb260fe9c857884bfe9ca56a4
|
|
7
|
+
data.tar.gz: '073693dbf6e84957586a0bc2f05a562f4d3cc5ae9a6d1a0a6906565c93c2d9e8e35afbf35d2fd2f6c25e21577d0bcf3170a79956b785eae2a0d1d07a1cbe4c3c'
|
data/CHANGELOG.md
CHANGED
|
@@ -4,55 +4,211 @@ The early parts of this changelog are going to be a little ambiguous and incompl
|
|
|
4
4
|
|
|
5
5
|
Expect pre-v1.0 releases to have many backwards incompatible changes, being primarily meant for testing and feedback as we experiment with different approaches to common challenges leading up to a production-ready release.
|
|
6
6
|
|
|
7
|
+
Going forward, this changelog will use the [keep a changelog](https://keepachangelog.com/) format and version according to [semantic versioning](https://semver.org/).
|
|
8
|
+
|
|
7
9
|
|
|
8
10
|
## [Unreleased]
|
|
9
11
|
|
|
10
12
|
This section is for recording changes committed since the last release.
|
|
11
13
|
|
|
12
|
-
###
|
|
14
|
+
### Added
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Changed
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Deprecated
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Removed
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### Fixed
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### Security
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
## [v0.2.0] - 20230504
|
|
34
|
+
|
|
35
|
+
This release focused on three distinct improvements:
|
|
36
|
+
|
|
37
|
+
1. fixing/updating `palette.css` so that HSL and okLCH palette sets are harmonious and complete
|
|
38
|
+
1. fixing full-bleed layouts for hero headers and fat footers
|
|
39
|
+
1. adding documentation pages (all still very much works-in-progress) to flesh out both the content and structure of our fledgling documentation set
|
|
40
|
+
|
|
41
|
+
One note related to the palette: okLCH officially lands in Firefox next week with [version 113](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/113) (the last major browser engine to do so), so we'll deprecate the HSL palette set in a year or so, and move on to primarily using okLCH then.
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### Added
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
#### [clairity.css]
|
|
48
|
+
|
|
49
|
+
* now importing `shims.css` in `clairity.css` by default (previously commented out) to be able to start moving css that is specifically meant to support non-semantic but common ("legacy") markup styles (like adding `<div>` tags around form inputs) there
|
|
50
|
+
* added `legacy.css` for supporting legacy (prior to ~2020) browsers (as opposed to "legacy" markup, which is what `shims.css` adresses)
|
|
51
|
+
* added future `print.css` `@import` line, as a TODO marker
|
|
52
|
+
|
|
53
|
+
#### [palette.css]
|
|
54
|
+
|
|
55
|
+
* better described the structure of `palette.css` in the opening comments
|
|
56
|
+
* expanded the saturation scale (HSL only)
|
|
57
|
+
* explicitly define the primary (9 colors) & complementary (5 colors) color sets for both HSL & okLCH
|
|
58
|
+
* provide full color scales for `--primary`, `--complementary`, `--secondary`, and `--neutral` colors for both HSL & okLCH
|
|
59
|
+
* provide semantic color sets for both HSL & okLCH
|
|
60
|
+
* messaging colors: `--info`, `--success`, `--warning`, `--error`
|
|
61
|
+
* state colors: `--valid`, `--invalid`, `--unknown`
|
|
62
|
+
|
|
13
63
|
|
|
64
|
+
#### [base.css]
|
|
14
65
|
|
|
15
|
-
|
|
66
|
+
* noted that a `<meta charset="utf-8">` declaration is needed to get certain non-Latin glyphs (like open-quote in blockquotes) to render correctly
|
|
67
|
+
* added `form` as an element that gets a default `container-name` applied for `inline-size` containment/container queries
|
|
16
68
|
|
|
69
|
+
#### [cosmetic.css]
|
|
17
70
|
|
|
18
|
-
|
|
71
|
+
* make bare divs in the default body grid exclude the outermost columns (aka be "padded") by default
|
|
72
|
+
* add a default `--l` (large) top margin to the site footer — that is, `footer:last-of-type` within the `<body>` element, which is not a perfect proxy for the site footer as it presumes a given html structure, but as close as we can get for now
|
|
73
|
+
* rather than being confined to the `elements` grid column, let fieldsets span the `full` grid of a parent form container on narrower width viewports (`<= 35rem`), and give the legend a slightly de-emphasized treatment as well
|
|
19
74
|
|
|
20
75
|
|
|
21
|
-
|
|
76
|
+
#### [states.css]
|
|
77
|
+
* in accordance with other read-only input types, remove borders for `<input>` that don't have a `type` attribute if `:read-only` and `:enabled`
|
|
22
78
|
|
|
79
|
+
#### [components.css]
|
|
23
80
|
|
|
24
|
-
|
|
81
|
+
* added `HACK` to better contain `<footer>` elements that have the `.100dvi` class applied to them to create a full-bleed (fat) footer
|
|
82
|
+
* added container query to add `--s` (small) `padding-inline` to non-`.hero`/`<img>` `.banner` elements at container sizes `<= 50rem` (800px @ 16px/rem), because there would be no inline padding/margin otherwise and content would abut the viewport edges
|
|
83
|
+
* added a `max-width` to `search` inputs of `100cqi` (100% of container width) to keep it from breaking out of the containing form (this helps the `.button_to` mini-form component in particular)
|
|
84
|
+
* added `.tag` class to `.tags > li` rule styling tags (this should probably be a separate rule in `classes.css` and kept in sync with `.tags > li` until css mixins become a reality, if ever)
|
|
25
85
|
|
|
86
|
+
#### [utilities.css]
|
|
26
87
|
|
|
27
|
-
|
|
88
|
+
* added a general `prefers-reduced-motion` rule [as recommended](https://css-tricks.com/a-complete-guide-to-css-media-queries/#aa-accessibility)
|
|
28
89
|
|
|
29
90
|
|
|
30
|
-
|
|
91
|
+
#### Documentation
|
|
31
92
|
|
|
93
|
+
* added `classes.html`, `components.html`, `grid.html`, and `palette.html` doc pages (still works in progress)
|
|
94
|
+
* added `dropin.html` and `cssbed.html` sample pages, to showcase shimming for alternate html structures
|
|
95
|
+
* added `site.webmanifest` to `docs` and `public` folders, mainly for [declaring favicons portably](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
|
|
96
|
+
* added a version of the Navier-Stokes equation (which describes fluid flows) to docs as another slightly more complicated example of MathML
|
|
32
97
|
|
|
33
|
-
### `icons.css`
|
|
34
98
|
|
|
99
|
+
### Changed
|
|
35
100
|
|
|
36
|
-
### `base.css`
|
|
37
101
|
|
|
102
|
+
#### [palette.css]
|
|
38
103
|
|
|
39
|
-
|
|
104
|
+
* consolidated lightness scale for HSL & okLCH (using percentages)
|
|
105
|
+
*
|
|
40
106
|
|
|
107
|
+
#### [cosmetic.css]
|
|
41
108
|
|
|
42
|
-
|
|
109
|
+
* moved numerous non-state related css rules here from cosmetic.css
|
|
110
|
+
* icons for specialized links
|
|
111
|
+
* scroll-margin for elements with an `id` property
|
|
112
|
+
* removing vertical gaps between consecutive unordered/ordered lists
|
|
113
|
+
* sticky table styles for `<thead>`, `<tbody>`, and `<tfoot>`
|
|
114
|
+
* zebra striping for table rows
|
|
115
|
+
* unstyling unordered lists in forms (because they typically list out form controls like checkboxes/radio buttons rather than text)
|
|
116
|
+
* implementing the default form grid on `<fieldset>` elements
|
|
117
|
+
* extending grids into container subelements, `<section>`, `<p>`, and `<div>` (using `<p>` this way is un-semantic, but not uncommon), and fix the placement of checkboxes/radio buttons and their labels
|
|
118
|
+
* aligning labels to top for `<textarea>` and multiple `<select>` elements, which are typically multi-line in height
|
|
119
|
+
* respecting an `<input>` element's `size` property when set (we typically force form controls to fit the standard form grid)
|
|
120
|
+
* adding context icons for specialized form inputs
|
|
121
|
+
* adding gaps between inline radios/checkboxes for readability
|
|
122
|
+
* removing search decorations on search boxes
|
|
123
|
+
* styling `<blockquote>` elements
|
|
124
|
+
* adding context to `<q>` elements with a `cite` property (i.e., citations)
|
|
125
|
+
* adjustments for `<figure>` elements containing headings or blockquotes
|
|
126
|
+
* constraining non-root `<svg>` elements by default in a document
|
|
127
|
+
* styling `<dialog>` elements for better usability
|
|
128
|
+
* styling `<details>` elements in accordian configurations
|
|
129
|
+
* for `<section>`, `<p>`, and `<div>` elements within forms, `display` is set to `contents` (which acts as if the container isn't there), so also unset the element's `container-type` so it can respond to container queries on the parent container (which should be the form itself in most cases)
|
|
43
130
|
|
|
131
|
+
#### [states.css]
|
|
44
132
|
|
|
45
|
-
|
|
133
|
+
* moved numerous non-state related css rules to cosmetic.css (see above)
|
|
46
134
|
|
|
135
|
+
#### [classes.css]
|
|
47
136
|
|
|
48
|
-
|
|
137
|
+
* moved `body > *:not(.fluid)` rule to `legacy.css`
|
|
138
|
+
* moved `.subgrid` alternative rules for browsers not supporting subgrid into `legacy.css`
|
|
139
|
+
* moved experimental non-semantic color classes (like `.red`) to `utilities.css`
|
|
140
|
+
* moved `.grid` and `.flex` layout classes into `components.css` as they're more component-like than simple class declarations
|
|
141
|
+
* removed extra negative margin (`--xs` / `--s`) on `margin-inline` for the `.100vw` and `.100dvi` classes because it was causing centering and scrollbar issues at certain viewport widths
|
|
142
|
+
* tentatively removed the `max-width: none;` declaration on the `.full` class because it interferes with applying `.full` within `.subgrid`
|
|
143
|
+
* renamed the `.section` class to `.sectioning` to reduce confusion with the `<section>` element
|
|
49
144
|
|
|
145
|
+
#### [components.css]
|
|
50
146
|
|
|
51
|
-
|
|
147
|
+
* moved `.grid` and `.flex` component layout classes here from `classes.css`
|
|
148
|
+
* make `<header>` elements that don't have `.banner` applied align its items to the `baseline` so that flexed text in the header lines up visually
|
|
149
|
+
* add `.subtitle` (along with `<p>`) to `<header>` subelements that flex to a full row, which forces a line wrap
|
|
150
|
+
* `unset` `max-width` on `.banner` items to negate `<header>` `max-width` being set to `--line-length` by default in `cosmetic.css`
|
|
151
|
+
* set `max-width` on `.content` and `<nav>` items in `.banner` to `100dvi` to keep `.content` and `<nav>` from overflowing the `.banner` in full-bleed situations
|
|
152
|
+
* for `.banner` `<nav>` direct children, set `place-self` to `flex-start center` rather than `start center` to account for flex
|
|
153
|
+
* moved `.button_to` mini-form (a rails-specific construct) rules here from `utilities.css`
|
|
154
|
+
* moved `.card`/`.cards` media query rules for browsers that don't support container queries from here to `legacy.css`
|
|
155
|
+
* moved `.tags + .buttons` rule for browsers that don't support `:has()` from here to `legacy.css`
|
|
156
|
+
* moved `.dual-aside` class to `classes.css`
|
|
52
157
|
|
|
158
|
+
#### [utilities.css]
|
|
53
159
|
|
|
160
|
+
* moved experimental non-semantic color classes (like `.red`) to here from `classes.css`
|
|
161
|
+
* moved `.button_to` mini-form (a rails-specific construct) rules to `components.css`
|
|
54
162
|
|
|
55
|
-
|
|
163
|
+
#### Documentation
|
|
164
|
+
|
|
165
|
+
* implement the [keep a changelog](https://keepachangelog.com/) format
|
|
166
|
+
* rewrote the copy on the `index.html` page (still a work in progress) to be more generally descriptive of the <samp class="clairity">clairity.css</samp> framework
|
|
167
|
+
* copied `index.html` and its sample hero image to the `public` folder, for parity with the `docs` folder (TODO: remove `public` in favor of `docs` for local testing)
|
|
168
|
+
* in the `docs/css` folder, separated out of `clairity.html.css` the palette-related sample css into `palette.html.css` for reuse in the `palette.html` doc page while also remaining in `clairity.html.css` as an `@import`
|
|
169
|
+
* updated header and footer links on existing docs/public pages (`index.html`, `about.html`, & `clairity.html`) to include newly added pages
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
### Deprecated
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
#### Documentation
|
|
177
|
+
|
|
178
|
+
* deprecated the `public` folder for local testing, in favor of the `docs` folder, which also serves as the [docs site](https://css.clairity.blog) on github (TODO: still need to deal with symlinks for the `assets` and `css` directories, for serving local assets without duplication)
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
### Removed
|
|
182
|
+
|
|
183
|
+
#### [palette.css]
|
|
184
|
+
|
|
185
|
+
* removed non-numeric/semantic lightness and chroma scales in favor of uniform numeric scales (okLCH)
|
|
186
|
+
|
|
187
|
+
#### [components.css]
|
|
188
|
+
|
|
189
|
+
* removed `padding-inline` as a default from `footer` elements
|
|
190
|
+
* removed unnecessary and funky `flex-basis` calculation on `<nav>` elements inside `.nav` containers that create odd wrapping situations on `<nav>` elements at certain larger viewport widths
|
|
191
|
+
|
|
192
|
+
### Fixed
|
|
193
|
+
|
|
194
|
+
#### [base.css]
|
|
195
|
+
|
|
196
|
+
* put buttons (`button`, `[type="button"]`, `[type="submit"]`, `[type="reset"]`, and `::file-selector-button`) in the `elements` `grid-column` by default (forms default to 2-column grids), so they sit under form elements rather than under the labels
|
|
197
|
+
|
|
198
|
+
#### Documentation
|
|
199
|
+
|
|
200
|
+
* remove unused `.home` class on the `<body>` of `index.html`
|
|
201
|
+
* remove unnecessary `.readable` class on the `<body>` and the `.full` class on `<main>` of `about.html`, which breaks the fat footer
|
|
202
|
+
* removed unnecessary `.readable` class on the `<body>` of `clairity.html`, which breaks the fat footer
|
|
203
|
+
* clarify in `README.md` when/why gem is moved to the `pkg` directory
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
### Security
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
## [v0.1.2] - 2023-04-21
|
|
56
212
|
|
|
57
213
|
The big change here is fixing the color palette, which was left in an inconsistent state after attempting to use css relative color syntax, which is very much not ready for prime time. We also still need to fix accent coloring for differentiated text (e.g., `<code>`, `<var>`, `<pre>`, `<xmp>`, `<kbd>`) when using okLCH rather than HSL (TODO).
|
|
58
214
|
|
|
@@ -67,7 +223,7 @@ Our experiment using the perceptually-uniform (but not volumetrically-uniform) o
|
|
|
67
223
|
* add spec page stylesheet (`clairity.html.css`) to show a full sample color palette in both hsl and oklch color spaces (most, if not all, sites will not have 9 brand colors, so we don't define all of these in the framework itself)
|
|
68
224
|
|
|
69
225
|
|
|
70
|
-
###
|
|
226
|
+
### [variables.css]
|
|
71
227
|
|
|
72
228
|
Note that `variables.css` defines logical/semantic colors to be used in sites/apps while `palette.css` defines the color palette to which logical colors are mapped, decoupling semantic meaning from the underlying color definition (we dove headlong into the naming things problem).
|
|
73
229
|
|
|
@@ -77,7 +233,7 @@ Note that `variables.css` defines logical/semantic colors to be used in sites/ap
|
|
|
77
233
|
* for dark mode, lighten the `--link` color a bit
|
|
78
234
|
|
|
79
235
|
|
|
80
|
-
###
|
|
236
|
+
### [palette.css]
|
|
81
237
|
|
|
82
238
|
|
|
83
239
|
* add `--a2` to alpha transparency scale (not sure if we need a full scale here or not)
|
|
@@ -85,32 +241,32 @@ Note that `variables.css` defines logical/semantic colors to be used in sites/ap
|
|
|
85
241
|
* add okLCH version of the `--primary` color scale (this fixes most of the mismatched/missing color problems when using okLCH)
|
|
86
242
|
|
|
87
243
|
|
|
88
|
-
###
|
|
244
|
+
### [cosmetic.css]
|
|
89
245
|
|
|
90
246
|
* links in headings shouldn't be differentiated by color, to reduce visual distraction
|
|
91
247
|
* set the `--heading` color explicitly on heading elements (an equivalent from for heading classes is set in `classes.css` to avoid violating our no classes rule for `cosmetic.css`)
|
|
92
248
|
* add the `:visited` state (which only applies to `<a>` and `<area>` elements that have an `href`) to the elements this rule applies to
|
|
93
249
|
|
|
94
250
|
|
|
95
|
-
###
|
|
251
|
+
### [classes.css]
|
|
96
252
|
|
|
97
253
|
* restore `width` and `margin-inline` on `100dvi` class to address the horizontal scrollbar issue (works in some cases, but not all)
|
|
98
254
|
* as in `cosmetic.css` with heading elements, set the `--heading` color explicitly on unvisited and `:visited` links in heading classes
|
|
99
255
|
|
|
100
256
|
|
|
101
|
-
###
|
|
257
|
+
### [components.css]
|
|
102
258
|
|
|
103
259
|
* explicitly set `z-index` to `0` (creating a stacking context) on a `.banner` `.content` block, as safari uses source order otherwise, as a `.banner` hero image has a z-index of `-1` (and otherwise sits on top of `.content` if it comes before the image in the source)
|
|
104
260
|
* remove the superfluous `a` designation on `:visited` in the rule to color `[aria-label="primary"]` and `nav menu li` links with the `--link` color, as it unnecessarily increases specificity and `:visited` only applies to `<a>` and `<area>` elements with an `href` anyway
|
|
105
261
|
|
|
106
262
|
|
|
107
|
-
## v0.1.1 - 2023-04-19
|
|
263
|
+
## [v0.1.1] - 2023-04-19
|
|
108
264
|
|
|
109
265
|
* github added `docs` directory with a `CNAME` file to deploy to github pages (the gemspec doesn't need this file, since it's for github only)
|
|
110
266
|
* added sample `index.html` to docs directory to see it in action
|
|
111
267
|
|
|
112
268
|
|
|
113
|
-
## v0.1.0 - 2023-04-19
|
|
269
|
+
## [v0.1.0] - 2023-04-19
|
|
114
270
|
|
|
115
271
|
These changes bring <samp class="clairity">clairity.css</samp> to present day, hence the bump to v0.1.0 rather than v0.0.4. This is also the first version to release on rubygems.
|
|
116
272
|
|
|
@@ -121,23 +277,23 @@ These changes bring <samp class="clairity">clairity.css</samp> to present day, h
|
|
|
121
277
|
* note that `Gemfile.lock` might change, so `bundle` it again if need be
|
|
122
278
|
|
|
123
279
|
|
|
124
|
-
###
|
|
280
|
+
### [variables.css]
|
|
125
281
|
|
|
126
282
|
* tweak the `--small` font size from `0.9rem` to `0.875rem` for more differentiation with `--medium`
|
|
127
283
|
* add the `--field-max` variable, set to `min(47ch, 100%)`, so that form fields can stretch to a reasonable (but not unreadable) length on larger screens, but take as much space as available on small screens
|
|
128
284
|
|
|
129
285
|
|
|
130
|
-
###
|
|
286
|
+
### [palette.css]
|
|
131
287
|
|
|
132
288
|
* similar to `--info`, `--success`, `--warning`, and `--error` semantic info colors, add semantic (icon) state colors `--valid` (green), `--invalid` (red) and `--unknown` (yellow), with `-high`, `-low` and `bg-` variants
|
|
133
289
|
|
|
134
290
|
|
|
135
|
-
###
|
|
291
|
+
### [icons.css]
|
|
136
292
|
|
|
137
293
|
* add `--i-home-edit`, `--i-mail-check`, `--i-mail-x`, `--i-send`, `--i-server-cog`, `--i-user-circle`, `--i-user-off` icons from tabler
|
|
138
294
|
|
|
139
295
|
|
|
140
|
-
###
|
|
296
|
+
### [base.css]
|
|
141
297
|
|
|
142
298
|
Base acts like a css reset in that it (re-)defines the default styles of all html (pseudo-)elements.
|
|
143
299
|
|
|
@@ -147,14 +303,14 @@ Base acts like a css reset in that it (re-)defines the default styles of all htm
|
|
|
147
303
|
* set `max-width` to `--field-max` on `<meter>` and `<progress>` elements as well
|
|
148
304
|
|
|
149
305
|
|
|
150
|
-
###
|
|
306
|
+
### [cosmetic.css]
|
|
151
307
|
|
|
152
308
|
Cosmetic adjustments typically tweak base styles for specific situations.
|
|
153
309
|
|
|
154
310
|
* remove `<body>` grid from pages that don't have a `<main>` element but do have `<h1>` and/or `<p>` elements (aka, bare pages)
|
|
155
311
|
|
|
156
312
|
|
|
157
|
-
###
|
|
313
|
+
### [states.css]
|
|
158
314
|
|
|
159
315
|
* define link signifier `--icon`s on the element rather than its `::before` or `::after` pseudo-element, letting inheritance define it for the pseudos
|
|
160
316
|
* move `mailto` link signifier icon to be `::after` the `href` link by default
|
|
@@ -164,7 +320,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
|
164
320
|
* might want to move this base style to `cosmetic.css` (to allow it to remain part of the `classless` set of styles), or move the whole enchilada to `components.css` with the other button styles
|
|
165
321
|
|
|
166
322
|
|
|
167
|
-
###
|
|
323
|
+
### [classes.css]
|
|
168
324
|
|
|
169
325
|
* temporarily remove `width` and `margin-inline` on `100dvi` class to address the horizontal scrollbar issue
|
|
170
326
|
* add semantic state color classes `.valid`, `.invalid`, and `.unknown`
|
|
@@ -172,7 +328,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
|
172
328
|
* add `.unadorned` class to remove `::before` and `::after` content, which is useful for adding a custom icon to an element that already has a default icon
|
|
173
329
|
|
|
174
330
|
|
|
175
|
-
###
|
|
331
|
+
### [components.css]
|
|
176
332
|
|
|
177
333
|
* remove top margin from the `:first-child` `<header>` in the `<body>`, typically because this header is meant to sit flush with the top of the page
|
|
178
334
|
* removed the `[role=banner]` selector from this rule, because a banner may not necessarily always sit at the top of the page (even if they often do), as they could be placed inside another container
|
|
@@ -196,7 +352,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
|
196
352
|
* firefox has limited support for `:has()` currently, and it is therefore [recommended](https://www.bram.us/2023/01/04/css-has-feature-detection-with-supportsselector-you-want-has-not-has/#the-problem) that it be unused on firefox, but we're pre-release, so leave this on for now so we can see how bad it is in firefox
|
|
197
353
|
|
|
198
354
|
|
|
199
|
-
###
|
|
355
|
+
### [utilities.css]
|
|
200
356
|
|
|
201
357
|
* *rails-specific*: rails adds the `.button_to` class to field-less forms it creates with the `:button_to` helper, and while this mini-form looks like a button, it tries to take up space like a form
|
|
202
358
|
* taking advantage of this narrowly-targeted class, adjust widths on the form and its embedded `submit` button so it looks/behaves like other buttons
|
|
@@ -204,7 +360,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
|
204
360
|
|
|
205
361
|
|
|
206
362
|
|
|
207
|
-
## v0.0.3 - 2023-04-18
|
|
363
|
+
## [v0.0.3] - 2023-04-18
|
|
208
364
|
|
|
209
365
|
The changes encompassed by this release were largely completed by about October 2022 (~6 months prior), but recorded (and released) here for posterity.
|
|
210
366
|
|
|
@@ -227,12 +383,12 @@ The changes encompassed by this release were largely completed by about October
|
|
|
227
383
|
- added block-style comments to css files to differentiate the different sections more easily
|
|
228
384
|
|
|
229
385
|
|
|
230
|
-
###
|
|
386
|
+
### [clairity.css]
|
|
231
387
|
|
|
232
388
|
- experimented with the new `@layer` css cascade layers feature, but commented it out for now because it breaks firefox dev tools
|
|
233
389
|
|
|
234
390
|
|
|
235
|
-
###
|
|
391
|
+
### [variables.css]
|
|
236
392
|
|
|
237
393
|
`variables.css` defines all the custom properties (css variables) used in <samp class="clairity">clairity.css</samp> other than the color palette, which is defined in `palette.css`.
|
|
238
394
|
|
|
@@ -261,7 +417,7 @@ The changes encompassed by this release were largely completed by about October
|
|
|
261
417
|
- comment out the redefinition of `--action` (can't remember why)
|
|
262
418
|
|
|
263
419
|
|
|
264
|
-
###
|
|
420
|
+
### [palette.css]
|
|
265
421
|
|
|
266
422
|
Note that the structure of the color palette, never mind the palette itself, is still very much in flux. Initially, we hoped that one of the new [LCH/okLCH color spaces](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) would provide a nice perceptually uniform, rich palette that could be programmatically generated and also predictably transformable using css color functions for any color we desired. We wanted to have our cake and to eat it too. But alas, neither LCH or okLCH are truly capable of hands-off, mechanical palette generation and transformation for any set of colors, because of issues like [the dark yellow problem](https://uxdesign.cc/the-dark-yellow-problem-in-design-system-color-palettes-a0db1eedc99d?gi=971e71981fd1). We still like okLCH for its other qualities and will use it where we can, but our hopes of auto-paletting purely in css were but a childlike dream.
|
|
267
423
|
|
|
@@ -281,7 +437,7 @@ So with that said, the palette will probably move toward manually-adjusted sets
|
|
|
281
437
|
- early indications are that this doesn't work nearly as well as we'd hoped
|
|
282
438
|
|
|
283
439
|
|
|
284
|
-
###
|
|
440
|
+
### [functions.css]
|
|
285
441
|
|
|
286
442
|
- added `.h1, .h2, .h3, .h4, .h5, .h6` classes to fluid typography heading rule
|
|
287
443
|
- removed experimental relative color scale variables (`--0` through `--15`)
|
|
@@ -293,7 +449,7 @@ So with that said, the palette will probably move toward manually-adjusted sets
|
|
|
293
449
|
- this works in the common case but isn't quite as robust as we'd hoped (TODO: needs investigation)
|
|
294
450
|
|
|
295
451
|
|
|
296
|
-
###
|
|
452
|
+
### [icons.css]
|
|
297
453
|
|
|
298
454
|
Eventually, we want to have a consistent set of svg icons that are uniform and pleasing, but for now, we grab whatever we can from existing sources, so that we can figure out what the minimal set of icons we need are.
|
|
299
455
|
|
|
@@ -301,7 +457,7 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
|
|
|
301
457
|
- added 14 [tabler icons](https://tabler-icons.io/) as well (`--i-bookmark`, `--i-browser`, `--i-calendar`, `--i-calendar-time`, `--i-external-link`, `--i-edit`, `--i-file`, `--i-file-download`, `--i-lock`, `--i-mail`, `--i-message-2`, `--i-numbers`, `--i-phone`, `--i-trash`)
|
|
302
458
|
|
|
303
459
|
|
|
304
|
-
###
|
|
460
|
+
### [base.css]
|
|
305
461
|
|
|
306
462
|
- `*, *::before, *::after` (applies to all elements): moved non-essential defaults out of this rule (margin, padding, border, font-size, vertical-align), as `<svg>` documents can also fall under `*` (also `*` rules are less efficient, applying to everything, as it does, so minimize its use)
|
|
307
463
|
- `<main>`, `<aside>`, `<article>`, `<nav>`, `<section>`, `<header>`, `<footer>`: EXPERIMENTAL - designate `inline-size` container name for these common container-type elements
|
|
@@ -320,7 +476,7 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
|
|
|
320
476
|
- `<hr>`: make horizontal rules span the full width of a containing grid
|
|
321
477
|
|
|
322
478
|
|
|
323
|
-
###
|
|
479
|
+
### [cosmetic.css]
|
|
324
480
|
|
|
325
481
|
This file includes cosmetic adjustments to the base elements, typically via combo selectors, which don't fit the scope of `base.css`.
|
|
326
482
|
|
|
@@ -334,7 +490,7 @@ This file includes cosmetic adjustments to the base elements, typically via comb
|
|
|
334
490
|
- put left-side labels for checkboxes in the `elements` grid column, left-justified
|
|
335
491
|
|
|
336
492
|
|
|
337
|
-
###
|
|
493
|
+
### [states.css]
|
|
338
494
|
|
|
339
495
|
The big change here is using css variables for svg masked icons rather than inlining them in the css, so that we can just set any icon to the `--icon` variable to get it to show up. Note that this uses a finicky masking technique that needs to be more fully documented (TODO), but we were able to support hover effects and to get it to support both light and dark modes with some mucking about with `--icon-blend-mode` (set in `variables.css`).
|
|
340
496
|
|
|
@@ -366,7 +522,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
|
366
522
|
- for non-root `<svg>` elements, lower the specificity using `:where()` and remove the max-width restriction
|
|
367
523
|
|
|
368
524
|
|
|
369
|
-
###
|
|
525
|
+
### [classes.css]
|
|
370
526
|
|
|
371
527
|
`classes.css` encompasses mostly singular helper class rules, while `components.css` encompasses rules for multiple elements designed to work together. Meanwhile, `utilities.css` is for rules that proxy a single (or perhaps a couple related) underlying css declaration as a class.
|
|
372
528
|
|
|
@@ -398,7 +554,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
|
398
554
|
- these allow constructs like `<i class="i-burger"></i>` to show an svg icon, similar to what font icon libraries do (e.g., fontawesome)
|
|
399
555
|
|
|
400
556
|
|
|
401
|
-
###
|
|
557
|
+
### [components.css]
|
|
402
558
|
|
|
403
559
|
- `<body>` has a default grid applied here
|
|
404
560
|
- rename `fullwidth` grid column name to just `full`
|
|
@@ -447,7 +603,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
|
447
603
|
- moved `<meter>` and `<progress>` pseudo-class definitions to `base.css` (which had the base element definitions already)
|
|
448
604
|
|
|
449
605
|
|
|
450
|
-
###
|
|
606
|
+
### [utilities.css]
|
|
451
607
|
|
|
452
608
|
- moved `.container` here from `classes.css`
|
|
453
609
|
- moved `.block` here from `classes.css`
|
|
@@ -458,7 +614,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
|
458
614
|
- moved `.clairity` here from `classes.css`: sets a differentiating font for our favorite css framework!
|
|
459
615
|
|
|
460
616
|
|
|
461
|
-
## v0.0.2 - 2023-04-15
|
|
617
|
+
## [v0.0.2] - 2023-04-15
|
|
462
618
|
|
|
463
619
|
After a number of diversions, including developing a (as yet unreleased) Jekyll theme for <samp class="clairity">clairity.css</samp>, our attention is back on the core css framework. This release packages <samp class="clairity">clairity.css</samp> as a Rails engine so we can use it in our Rails projects.
|
|
464
620
|
|
|
@@ -476,7 +632,7 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
|
476
632
|
- `shims.css` - a place to put styles meant to support graceful degradation for older sites (not browsers, that goes in `legacy.css`)
|
|
477
633
|
|
|
478
634
|
|
|
479
|
-
## v0.0.1 - 2022-06-24
|
|
635
|
+
## [v0.0.1] - 2022-06-24
|
|
480
636
|
|
|
481
637
|
<samp class="clairity">clairity.css</samp> was inspired by classless css libraries like `almond.css` and `sakura.css`, as well as a longing for a nice semantic, HTML-first css framework, like a modernized Semantic UI, but employing cutting-edge css features to remove the need for css tooling (i.e., Sass).
|
|
482
638
|
|
|
@@ -485,3 +641,29 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
|
485
641
|
- `variables.css` - structure css variables (custom properties) for flexible theming
|
|
486
642
|
- `base.css` - add styling block for every html element, even if empty
|
|
487
643
|
- `palette.css` - separate out the color scheme into its own css file
|
|
644
|
+
|
|
645
|
+
|
|
646
|
+
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.2.0...HEAD
|
|
647
|
+
[v0.2.0]: https://github.com/clairity/clairity.css/compare/v0.1.2...v0.2.0
|
|
648
|
+
[v0.1.2]: https://github.com/clairity/clairity.css/compare/v0.1.1...v0.1.2
|
|
649
|
+
[v0.1.1]: https://github.com/clairity/clairity.css/compare/v0.1.0...v0.1.1
|
|
650
|
+
[v0.1.0]: https://github.com/clairity/clairity.css/compare/v0.0.3...v0.1.0
|
|
651
|
+
[v0.0.3]: https://github.com/clairity/clairity.css/compare/v0.0.2...v0.0.3
|
|
652
|
+
[v0.0.2]: https://github.com/clairity/clairity.css/compare/v0.0.1...v0.0.2
|
|
653
|
+
[v0.0.1]: https://github.com/clairity/clairity.css/releases/tag/v0.0.1
|
|
654
|
+
|
|
655
|
+
[clairity.basic.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.basic.css
|
|
656
|
+
[clairity.classless.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.class.css
|
|
657
|
+
[clairity.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.css
|
|
658
|
+
[variables.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/variables.css
|
|
659
|
+
[palette.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/palette.css
|
|
660
|
+
[functions.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/functions.css
|
|
661
|
+
[icons.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/icons.css
|
|
662
|
+
[base.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/base.css
|
|
663
|
+
[cosmetic.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/cosmetic.css
|
|
664
|
+
[states.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/states.css
|
|
665
|
+
[classes.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/classes.css
|
|
666
|
+
[components.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/components.css
|
|
667
|
+
[utilities.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/utilities.css
|
|
668
|
+
[shims.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/shims.css
|
|
669
|
+
[legacy.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/legacy.css
|
data/README.md
CHANGED
|
@@ -130,7 +130,8 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
|
|
|
130
130
|
|
|
131
131
|
To install this gem onto your local machine, run `bundle exec rake install`.
|
|
132
132
|
|
|
133
|
-
To release a new version (for gem owners), follow the release checklist in the next section (i.e., don't `rake release` yet, until we have everything set up the way we like it).
|
|
133
|
+
To release a new version (for gem owners), follow the release checklist in the next section (i.e., don't `rake release` yet, until we have everything set up the way we like it). TODO: consider automating using [release-please](https://dev.to/ajrom/release-please-ci-deployment-for-ruby-gems-4md6).
|
|
134
|
+
|
|
134
135
|
|
|
135
136
|
|
|
136
137
|
### Release Checklist
|
|
@@ -147,14 +148,13 @@ To release this gem, follow these steps:
|
|
|
147
148
|
1. update the version number `X.Y.Z` in `lib/clairity.css/version.rb`
|
|
148
149
|
1. `Gemfile.lock` likely needs to be updated due to the version number change, so update it via `bundle && git add Gemfile.lock`
|
|
149
150
|
1. update the `s.files` array in `clairity.css.gemspec` with any new files outside the main gem directories (such as `lib`) that need to be *packaged in the gem itself*
|
|
150
|
-
1. build the gem with `gem build clairity.css.gemspec`
|
|
151
|
+
1. build the gem with `gem build clairity.css.gemspec`
|
|
152
|
+
1. manually (as it doesn't do it automatically, despite what the docs say) move the gem package to the `pkg` directory: `mv clairity.css-X.Y.Z.gem pkg` (`pkg` is gitignored, so move the gem now to show a clean working directory)
|
|
151
153
|
1. (optional) confirm the gem contents by unpacking it with `gem unpack clairity.css-X.Y.Z.gem` in the `pkg` directory (and delete the resultant `clairity.css-X.Y.Z` folder when finished)
|
|
152
154
|
1. `git commit -m "with a descriptive commit message here"` (or using our standard shortcut, `git cm "message"`)
|
|
153
155
|
1. tag the newly-created commit with an annotated tag `git tag vX.Y.Z -am "summary of the tag"` (calling `git tag` without a commit hash tags the last commit)
|
|
154
156
|
1. push the commit *with annotated tags* to github: `git push --follow-tags` (check that git remote points to `origin` at `clairity/clairity.css` with `git remote -v`)
|
|
155
|
-
1. push the gem (
|
|
156
|
-
1. manually (as it doesn't do it automatically, despite what the docs say) move the gem package to the `pkg` directory: `mv clairity.css-X.Y.Z.gem pkg`
|
|
157
|
-
|
|
157
|
+
1. push the gem (from the `pkg` directory) to rubygems: `gem push clairity.css-X.Y.Z.gem`
|
|
158
158
|
|
|
159
159
|
### Contributing
|
|
160
160
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
BASE - these are the base styles for *all* elements and certain core pseudo-
|
|
3
3
|
elments / -classes. for simple sites this stylesheet plus variables.css
|
|
4
4
|
(where :root vars & color-scheme: light dark; are set) should suffice.
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
Note that simple & full :is() support (without multiple declarations)
|
|
7
7
|
only landed broadly in ~Jan 2020. With it came :where() support, and
|
|
8
8
|
both now have forgiving selector lists. Since we're already implcitly
|
|
@@ -11,13 +11,17 @@
|
|
|
11
11
|
|
|
12
12
|
specificity is a 4-element designation:
|
|
13
13
|
[inline, #id, .class/[attr]/:pseudo-class, element/::pseudo-element]
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
we'll generally shoot for [0001] specificity in this base.css file,
|
|
16
16
|
with a few notable exceptions, like button-type input elements and
|
|
17
17
|
[multiple] selects, and relegate higher specificity niceties to the
|
|
18
18
|
states.css stylesheet. exceptions have [0010] or [0011] specificity.
|
|
19
|
-
|
|
20
|
-
Quickly search for elements using hashtag syntax, e.g., #a for anchors
|
|
19
|
+
|
|
20
|
+
Quickly search for elements using hashtag syntax, e.g., #a for anchors,
|
|
21
|
+
reducing unwanted matches and better narrowing in on what you searched.
|
|
22
|
+
|
|
23
|
+
NOTE that a <meta charset="utf-8"> declaration is needed to get certain
|
|
24
|
+
non-Latin glyphs (like open-quote in blockquotes) to render correctly.
|
|
21
25
|
|
|
22
26
|
A few key styles from normalize.css are repeated here, and marked as
|
|
23
27
|
such via comments, in case normalize.css is not being used.
|
|
@@ -115,7 +119,7 @@ noscript { }
|
|
|
115
119
|
/* container queries - default names/types for common container elements -
|
|
116
120
|
EXPERIMENTAL - only safari 16+ & chrome 93+ behind a flag for now
|
|
117
121
|
// .......................................................................... */
|
|
118
|
-
main, aside, article, nav, section, header, footer {
|
|
122
|
+
main, aside, article, nav, section, form, header, footer {
|
|
119
123
|
container-type: inline-size;
|
|
120
124
|
/*font-size: clamp(1rem, 1rem + 1cqi, 2rem);*/
|
|
121
125
|
}
|
|
@@ -124,6 +128,7 @@ aside { container-name: aside; }
|
|
|
124
128
|
article { container-name: article; }
|
|
125
129
|
nav { container-name: nav; }
|
|
126
130
|
section { container-name: section; }
|
|
131
|
+
form { container-name: form; }
|
|
127
132
|
header { container-name: header; }
|
|
128
133
|
footer { container-name: footer; }
|
|
129
134
|
|
|
@@ -404,7 +409,9 @@ button, [type="button"],[type="submit"],[type="reset"], ::file-selector-button {
|
|
|
404
409
|
padding: 0 var(--m);
|
|
405
410
|
border: var(--solid) var(--transparent);
|
|
406
411
|
border-radius: var(--radius);
|
|
412
|
+
|
|
407
413
|
/*vertical-align: bottom;*/
|
|
414
|
+
grid-column: elements;
|
|
408
415
|
}
|
|
409
416
|
/* #reset */
|
|
410
417
|
[type="reset"] { /* [0010] specificity */
|
|
@@ -901,7 +908,7 @@ hr, hr:hover {
|
|
|
901
908
|
margin: var(--l) auto;
|
|
902
909
|
max-width: var(--width);
|
|
903
910
|
width: 50%;
|
|
904
|
-
grid-column: 1 / -1;
|
|
911
|
+
grid-column: 1 / -1; /* span full width of an enclosing grid */
|
|
905
912
|
}
|
|
906
913
|
|
|
907
914
|
/* #disabled - needs to be last to "beat" the other [0010] specificity rules
|