clairity.css 0.1.2 → 0.3.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 +244 -45
- data/README.md +8 -6
- data/lib/assets/css/clairity/base.css +19 -6
- data/lib/assets/css/clairity/classes.css +43 -104
- data/lib/assets/css/clairity/components.css +88 -59
- data/lib/assets/css/clairity/cosmetic.css +369 -5
- data/lib/assets/css/clairity/icons.css +1 -0
- 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 +5 -297
- 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 +5 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7b72fdbcec2b2d980f9a9c29277faebfd6b98e20723458f1938bd59fe01f25c8
|
4
|
+
data.tar.gz: 19cfbc2063ec59d6d405cb289205817193c9fd8f8947702cd54bdde74c5df1f3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 339dd3bb5d0d7967915ca022093d19b6dff439fca037a36d41c605b055d0467430813fe945cbc580a656e11dd8f21a7438c0e9dfc00da6af63ec3e6e43a67e98
|
7
|
+
data.tar.gz: 4efc8f1596a4f9857168ba445d1fcf26db8ad530aa01aa1e24f0901585239b67ca8c62c25764fd69670cc3d98afb25ab15b9a2929edea8ca8fea88bf47c4712e
|
data/CHANGELOG.md
CHANGED
@@ -4,55 +4,226 @@ 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
|
+
## [v0.3.0] - 20230617
|
33
|
+
|
34
|
+
### Added
|
35
|
+
|
36
|
+
* [icons.css]: `--i-settings` icon and the associated `.i-settings` icon class in [classes.css]
|
37
|
+
* [components.css]: added `.secondary` and `.tertiary` variations of the `::file-selector-button`, part of the `[type="file"]` input type
|
38
|
+
|
39
|
+
### Changed
|
40
|
+
|
41
|
+
* [base.css]: decreased height of `::file-selector-button` by `var(--xxs)` to better reflect relative weight of the file selector button in the form hierarchy
|
42
|
+
* also removed `padding-inline-start` from the `[type="file"]` input type to vertically line up with other fields in a form
|
43
|
+
* [components.css]: converted `.alert` class declarations into `[role="alert"]` attribute declarations to better reflect semantics and to be more accessible
|
44
|
+
* also updated `classes.html` alert box examples to use `[role="alert"]` rather than `.alert`
|
45
|
+
* [cosmetic.css]: make labels inline-grids so they take up the full row height - EXPERIMENTAL
|
46
|
+
|
47
|
+
|
48
|
+
## [v0.2.0] - 20230504
|
49
|
+
|
50
|
+
This release focused on three distinct improvements:
|
51
|
+
|
52
|
+
1. fixing/updating `palette.css` so that HSL and okLCH palette sets are harmonious and complete
|
53
|
+
1. fixing full-bleed layouts for hero headers and fat footers
|
54
|
+
1. adding documentation pages (all still very much works-in-progress) to flesh out both the content and structure of our fledgling documentation set
|
55
|
+
|
56
|
+
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.
|
57
|
+
|
58
|
+
|
59
|
+
### Added
|
60
|
+
|
61
|
+
|
62
|
+
#### [clairity.css]
|
63
|
+
|
64
|
+
* 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
|
65
|
+
* added `legacy.css` for supporting legacy (prior to ~2020) browsers (as opposed to "legacy" markup, which is what `shims.css` adresses)
|
66
|
+
* added future `print.css` `@import` line, as a TODO marker
|
67
|
+
|
68
|
+
#### [palette.css]
|
13
69
|
|
70
|
+
* better described the structure of `palette.css` in the opening comments
|
71
|
+
* expanded the saturation scale (HSL only)
|
72
|
+
* explicitly define the primary (9 colors) & complementary (5 colors) color sets for both HSL & okLCH
|
73
|
+
* provide full color scales for `--primary`, `--complementary`, `--secondary`, and `--neutral` colors for both HSL & okLCH
|
74
|
+
* provide semantic color sets for both HSL & okLCH
|
75
|
+
* messaging colors: `--info`, `--success`, `--warning`, `--error`
|
76
|
+
* state colors: `--valid`, `--invalid`, `--unknown`
|
14
77
|
|
15
|
-
### `clairity.basic.css`
|
16
78
|
|
79
|
+
#### [base.css]
|
17
80
|
|
18
|
-
|
81
|
+
* noted that a `<meta charset="utf-8">` declaration is needed to get certain non-Latin glyphs (like open-quote in blockquotes) to render correctly
|
82
|
+
* added `form` as an element that gets a default `container-name` applied for `inline-size` containment/container queries
|
19
83
|
|
84
|
+
#### [cosmetic.css]
|
20
85
|
|
21
|
-
|
86
|
+
* make bare divs in the default body grid exclude the outermost columns (aka be "padded") by default
|
87
|
+
* 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
|
88
|
+
* 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
|
22
89
|
|
23
90
|
|
24
|
-
|
91
|
+
#### [states.css]
|
92
|
+
* in accordance with other read-only input types, remove borders for `<input>` that don't have a `type` attribute if `:read-only` and `:enabled`
|
25
93
|
|
94
|
+
#### [components.css]
|
26
95
|
|
27
|
-
|
96
|
+
* added `HACK` to better contain `<footer>` elements that have the `.100dvi` class applied to them to create a full-bleed (fat) footer
|
97
|
+
* 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
|
98
|
+
* 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)
|
99
|
+
* 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)
|
28
100
|
|
101
|
+
#### [utilities.css]
|
29
102
|
|
30
|
-
|
103
|
+
* added a general `prefers-reduced-motion` rule [as recommended](https://css-tricks.com/a-complete-guide-to-css-media-queries/#aa-accessibility)
|
31
104
|
|
32
105
|
|
33
|
-
|
106
|
+
#### Documentation
|
34
107
|
|
108
|
+
* added `classes.html`, `components.html`, `grid.html`, and `palette.html` doc pages (still works in progress)
|
109
|
+
* added `dropin.html` and `cssbed.html` sample pages, to showcase shimming for alternate html structures
|
110
|
+
* 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)
|
111
|
+
* added a version of the Navier-Stokes equation (which describes fluid flows) to docs as another slightly more complicated example of MathML
|
35
112
|
|
36
|
-
### `base.css`
|
37
113
|
|
114
|
+
### Changed
|
38
115
|
|
39
|
-
### `cosmetic.css`
|
40
116
|
|
117
|
+
#### [palette.css]
|
41
118
|
|
42
|
-
|
119
|
+
* consolidated lightness scale for HSL & okLCH (using percentages)
|
120
|
+
*
|
43
121
|
|
122
|
+
#### [cosmetic.css]
|
44
123
|
|
45
|
-
|
124
|
+
* moved numerous non-state related css rules here from cosmetic.css
|
125
|
+
* icons for specialized links
|
126
|
+
* scroll-margin for elements with an `id` property
|
127
|
+
* removing vertical gaps between consecutive unordered/ordered lists
|
128
|
+
* sticky table styles for `<thead>`, `<tbody>`, and `<tfoot>`
|
129
|
+
* zebra striping for table rows
|
130
|
+
* unstyling unordered lists in forms (because they typically list out form controls like checkboxes/radio buttons rather than text)
|
131
|
+
* implementing the default form grid on `<fieldset>` elements
|
132
|
+
* 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
|
133
|
+
* aligning labels to top for `<textarea>` and multiple `<select>` elements, which are typically multi-line in height
|
134
|
+
* respecting an `<input>` element's `size` property when set (we typically force form controls to fit the standard form grid)
|
135
|
+
* adding context icons for specialized form inputs
|
136
|
+
* adding gaps between inline radios/checkboxes for readability
|
137
|
+
* removing search decorations on search boxes
|
138
|
+
* styling `<blockquote>` elements
|
139
|
+
* adding context to `<q>` elements with a `cite` property (i.e., citations)
|
140
|
+
* adjustments for `<figure>` elements containing headings or blockquotes
|
141
|
+
* constraining non-root `<svg>` elements by default in a document
|
142
|
+
* styling `<dialog>` elements for better usability
|
143
|
+
* styling `<details>` elements in accordian configurations
|
144
|
+
* 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)
|
46
145
|
|
146
|
+
#### [states.css]
|
47
147
|
|
48
|
-
|
148
|
+
* moved numerous non-state related css rules to cosmetic.css (see above)
|
49
149
|
|
150
|
+
#### [classes.css]
|
50
151
|
|
51
|
-
|
152
|
+
* moved `body > *:not(.fluid)` rule to `legacy.css`
|
153
|
+
* moved `.subgrid` alternative rules for browsers not supporting subgrid into `legacy.css`
|
154
|
+
* moved experimental non-semantic color classes (like `.red`) to `utilities.css`
|
155
|
+
* moved `.grid` and `.flex` layout classes into `components.css` as they're more component-like than simple class declarations
|
156
|
+
* 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
|
157
|
+
* tentatively removed the `max-width: none;` declaration on the `.full` class because it interferes with applying `.full` within `.subgrid`
|
158
|
+
* renamed the `.section` class to `.sectioning` to reduce confusion with the `<section>` element
|
52
159
|
|
160
|
+
#### [components.css]
|
53
161
|
|
162
|
+
* moved `.grid` and `.flex` component layout classes here from `classes.css`
|
163
|
+
* 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
|
164
|
+
* add `.subtitle` (along with `<p>`) to `<header>` subelements that flex to a full row, which forces a line wrap
|
165
|
+
* `unset` `max-width` on `.banner` items to negate `<header>` `max-width` being set to `--line-length` by default in `cosmetic.css`
|
166
|
+
* 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
|
167
|
+
* for `.banner` `<nav>` direct children, set `place-self` to `flex-start center` rather than `start center` to account for flex
|
168
|
+
* moved `.button_to` mini-form (a rails-specific construct) rules here from `utilities.css`
|
169
|
+
* moved `.card`/`.cards` media query rules for browsers that don't support container queries from here to `legacy.css`
|
170
|
+
* moved `.tags + .buttons` rule for browsers that don't support `:has()` from here to `legacy.css`
|
171
|
+
* moved `.dual-aside` class to `classes.css`
|
54
172
|
|
55
|
-
|
173
|
+
#### [utilities.css]
|
174
|
+
|
175
|
+
* moved experimental non-semantic color classes (like `.red`) to here from `classes.css`
|
176
|
+
* moved `.button_to` mini-form (a rails-specific construct) rules to `components.css`
|
177
|
+
|
178
|
+
#### Documentation
|
179
|
+
|
180
|
+
* implement the [keep a changelog](https://keepachangelog.com/) format
|
181
|
+
* 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
|
182
|
+
* 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)
|
183
|
+
* 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`
|
184
|
+
* updated header and footer links on existing docs/public pages (`index.html`, `about.html`, & `clairity.html`) to include newly added pages
|
185
|
+
|
186
|
+
|
187
|
+
|
188
|
+
### Deprecated
|
189
|
+
|
190
|
+
|
191
|
+
#### Documentation
|
192
|
+
|
193
|
+
* 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)
|
194
|
+
|
195
|
+
|
196
|
+
### Removed
|
197
|
+
|
198
|
+
#### [palette.css]
|
199
|
+
|
200
|
+
* removed non-numeric/semantic lightness and chroma scales in favor of uniform numeric scales (okLCH)
|
201
|
+
|
202
|
+
#### [components.css]
|
203
|
+
|
204
|
+
* removed `padding-inline` as a default from `footer` elements
|
205
|
+
* 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
|
206
|
+
|
207
|
+
### Fixed
|
208
|
+
|
209
|
+
#### [base.css]
|
210
|
+
|
211
|
+
* 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
|
212
|
+
|
213
|
+
#### Documentation
|
214
|
+
|
215
|
+
* remove unused `.home` class on the `<body>` of `index.html`
|
216
|
+
* remove unnecessary `.readable` class on the `<body>` and the `.full` class on `<main>` of `about.html`, which breaks the fat footer
|
217
|
+
* removed unnecessary `.readable` class on the `<body>` of `clairity.html`, which breaks the fat footer
|
218
|
+
* clarify in `README.md` when/why gem is moved to the `pkg` directory
|
219
|
+
|
220
|
+
|
221
|
+
### Security
|
222
|
+
|
223
|
+
|
224
|
+
|
225
|
+
|
226
|
+
## [v0.1.2] - 2023-04-21
|
56
227
|
|
57
228
|
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
229
|
|
@@ -67,7 +238,7 @@ Our experiment using the perceptually-uniform (but not volumetrically-uniform) o
|
|
67
238
|
* 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
239
|
|
69
240
|
|
70
|
-
###
|
241
|
+
### [variables.css]
|
71
242
|
|
72
243
|
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
244
|
|
@@ -77,7 +248,7 @@ Note that `variables.css` defines logical/semantic colors to be used in sites/ap
|
|
77
248
|
* for dark mode, lighten the `--link` color a bit
|
78
249
|
|
79
250
|
|
80
|
-
###
|
251
|
+
### [palette.css]
|
81
252
|
|
82
253
|
|
83
254
|
* add `--a2` to alpha transparency scale (not sure if we need a full scale here or not)
|
@@ -85,32 +256,32 @@ Note that `variables.css` defines logical/semantic colors to be used in sites/ap
|
|
85
256
|
* add okLCH version of the `--primary` color scale (this fixes most of the mismatched/missing color problems when using okLCH)
|
86
257
|
|
87
258
|
|
88
|
-
###
|
259
|
+
### [cosmetic.css]
|
89
260
|
|
90
261
|
* links in headings shouldn't be differentiated by color, to reduce visual distraction
|
91
262
|
* 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
263
|
* add the `:visited` state (which only applies to `<a>` and `<area>` elements that have an `href`) to the elements this rule applies to
|
93
264
|
|
94
265
|
|
95
|
-
###
|
266
|
+
### [classes.css]
|
96
267
|
|
97
268
|
* restore `width` and `margin-inline` on `100dvi` class to address the horizontal scrollbar issue (works in some cases, but not all)
|
98
269
|
* as in `cosmetic.css` with heading elements, set the `--heading` color explicitly on unvisited and `:visited` links in heading classes
|
99
270
|
|
100
271
|
|
101
|
-
###
|
272
|
+
### [components.css]
|
102
273
|
|
103
274
|
* 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
275
|
* 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
276
|
|
106
277
|
|
107
|
-
## v0.1.1 - 2023-04-19
|
278
|
+
## [v0.1.1] - 2023-04-19
|
108
279
|
|
109
280
|
* 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
281
|
* added sample `index.html` to docs directory to see it in action
|
111
282
|
|
112
283
|
|
113
|
-
## v0.1.0 - 2023-04-19
|
284
|
+
## [v0.1.0] - 2023-04-19
|
114
285
|
|
115
286
|
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
287
|
|
@@ -121,23 +292,23 @@ These changes bring <samp class="clairity">clairity.css</samp> to present day, h
|
|
121
292
|
* note that `Gemfile.lock` might change, so `bundle` it again if need be
|
122
293
|
|
123
294
|
|
124
|
-
###
|
295
|
+
### [variables.css]
|
125
296
|
|
126
297
|
* tweak the `--small` font size from `0.9rem` to `0.875rem` for more differentiation with `--medium`
|
127
298
|
* 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
299
|
|
129
300
|
|
130
|
-
###
|
301
|
+
### [palette.css]
|
131
302
|
|
132
303
|
* 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
304
|
|
134
305
|
|
135
|
-
###
|
306
|
+
### [icons.css]
|
136
307
|
|
137
308
|
* 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
309
|
|
139
310
|
|
140
|
-
###
|
311
|
+
### [base.css]
|
141
312
|
|
142
313
|
Base acts like a css reset in that it (re-)defines the default styles of all html (pseudo-)elements.
|
143
314
|
|
@@ -147,14 +318,14 @@ Base acts like a css reset in that it (re-)defines the default styles of all htm
|
|
147
318
|
* set `max-width` to `--field-max` on `<meter>` and `<progress>` elements as well
|
148
319
|
|
149
320
|
|
150
|
-
###
|
321
|
+
### [cosmetic.css]
|
151
322
|
|
152
323
|
Cosmetic adjustments typically tweak base styles for specific situations.
|
153
324
|
|
154
325
|
* remove `<body>` grid from pages that don't have a `<main>` element but do have `<h1>` and/or `<p>` elements (aka, bare pages)
|
155
326
|
|
156
327
|
|
157
|
-
###
|
328
|
+
### [states.css]
|
158
329
|
|
159
330
|
* define link signifier `--icon`s on the element rather than its `::before` or `::after` pseudo-element, letting inheritance define it for the pseudos
|
160
331
|
* move `mailto` link signifier icon to be `::after` the `href` link by default
|
@@ -164,7 +335,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
164
335
|
* 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
336
|
|
166
337
|
|
167
|
-
###
|
338
|
+
### [classes.css]
|
168
339
|
|
169
340
|
* temporarily remove `width` and `margin-inline` on `100dvi` class to address the horizontal scrollbar issue
|
170
341
|
* add semantic state color classes `.valid`, `.invalid`, and `.unknown`
|
@@ -172,7 +343,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
172
343
|
* 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
344
|
|
174
345
|
|
175
|
-
###
|
346
|
+
### [components.css]
|
176
347
|
|
177
348
|
* 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
349
|
* 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 +367,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
196
367
|
* 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
368
|
|
198
369
|
|
199
|
-
###
|
370
|
+
### [utilities.css]
|
200
371
|
|
201
372
|
* *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
373
|
* 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 +375,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
|
|
204
375
|
|
205
376
|
|
206
377
|
|
207
|
-
## v0.0.3 - 2023-04-18
|
378
|
+
## [v0.0.3] - 2023-04-18
|
208
379
|
|
209
380
|
The changes encompassed by this release were largely completed by about October 2022 (~6 months prior), but recorded (and released) here for posterity.
|
210
381
|
|
@@ -227,12 +398,12 @@ The changes encompassed by this release were largely completed by about October
|
|
227
398
|
- added block-style comments to css files to differentiate the different sections more easily
|
228
399
|
|
229
400
|
|
230
|
-
###
|
401
|
+
### [clairity.css]
|
231
402
|
|
232
403
|
- experimented with the new `@layer` css cascade layers feature, but commented it out for now because it breaks firefox dev tools
|
233
404
|
|
234
405
|
|
235
|
-
###
|
406
|
+
### [variables.css]
|
236
407
|
|
237
408
|
`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
409
|
|
@@ -261,7 +432,7 @@ The changes encompassed by this release were largely completed by about October
|
|
261
432
|
- comment out the redefinition of `--action` (can't remember why)
|
262
433
|
|
263
434
|
|
264
|
-
###
|
435
|
+
### [palette.css]
|
265
436
|
|
266
437
|
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
438
|
|
@@ -281,7 +452,7 @@ So with that said, the palette will probably move toward manually-adjusted sets
|
|
281
452
|
- early indications are that this doesn't work nearly as well as we'd hoped
|
282
453
|
|
283
454
|
|
284
|
-
###
|
455
|
+
### [functions.css]
|
285
456
|
|
286
457
|
- added `.h1, .h2, .h3, .h4, .h5, .h6` classes to fluid typography heading rule
|
287
458
|
- removed experimental relative color scale variables (`--0` through `--15`)
|
@@ -293,7 +464,7 @@ So with that said, the palette will probably move toward manually-adjusted sets
|
|
293
464
|
- this works in the common case but isn't quite as robust as we'd hoped (TODO: needs investigation)
|
294
465
|
|
295
466
|
|
296
|
-
###
|
467
|
+
### [icons.css]
|
297
468
|
|
298
469
|
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
470
|
|
@@ -301,13 +472,14 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
|
|
301
472
|
- 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
473
|
|
303
474
|
|
304
|
-
###
|
475
|
+
### [base.css]
|
305
476
|
|
306
477
|
- `*, *::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
478
|
- `<main>`, `<aside>`, `<article>`, `<nav>`, `<section>`, `<header>`, `<footer>`: EXPERIMENTAL - designate `inline-size` container name for these common container-type elements
|
308
479
|
- `<body>`: make the body fill the viewport height, if content is not enough by itself to do so
|
309
480
|
- `<hgroup>`: styled with a strong visual offset
|
310
481
|
- `<hgroup>` is deprecated but still useful for containing *just* heading elements, as opposed to all kinds elements, as `<header>` does)
|
482
|
+
- see https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/
|
311
483
|
- `[href^="mailto:"], [href^="tel:"], [href^="sms:"], [href^="file:"], [rel~="external"], [rel~="bookmark"], [download]`: move automatically included icon to the right instead of the left for these link types
|
312
484
|
- `<menu>`: remove default left padding and list marker
|
313
485
|
- `<th>`, `<td>`: add small top padding
|
@@ -320,7 +492,7 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
|
|
320
492
|
- `<hr>`: make horizontal rules span the full width of a containing grid
|
321
493
|
|
322
494
|
|
323
|
-
###
|
495
|
+
### [cosmetic.css]
|
324
496
|
|
325
497
|
This file includes cosmetic adjustments to the base elements, typically via combo selectors, which don't fit the scope of `base.css`.
|
326
498
|
|
@@ -334,7 +506,7 @@ This file includes cosmetic adjustments to the base elements, typically via comb
|
|
334
506
|
- put left-side labels for checkboxes in the `elements` grid column, left-justified
|
335
507
|
|
336
508
|
|
337
|
-
###
|
509
|
+
### [states.css]
|
338
510
|
|
339
511
|
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
512
|
|
@@ -366,7 +538,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
366
538
|
- for non-root `<svg>` elements, lower the specificity using `:where()` and remove the max-width restriction
|
367
539
|
|
368
540
|
|
369
|
-
###
|
541
|
+
### [classes.css]
|
370
542
|
|
371
543
|
`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
544
|
|
@@ -398,7 +570,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
398
570
|
- 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
571
|
|
400
572
|
|
401
|
-
###
|
573
|
+
### [components.css]
|
402
574
|
|
403
575
|
- `<body>` has a default grid applied here
|
404
576
|
- rename `fullwidth` grid column name to just `full`
|
@@ -447,7 +619,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
447
619
|
- moved `<meter>` and `<progress>` pseudo-class definitions to `base.css` (which had the base element definitions already)
|
448
620
|
|
449
621
|
|
450
|
-
###
|
622
|
+
### [utilities.css]
|
451
623
|
|
452
624
|
- moved `.container` here from `classes.css`
|
453
625
|
- moved `.block` here from `classes.css`
|
@@ -458,7 +630,7 @@ The big change here is using css variables for svg masked icons rather than inli
|
|
458
630
|
- moved `.clairity` here from `classes.css`: sets a differentiating font for our favorite css framework!
|
459
631
|
|
460
632
|
|
461
|
-
## v0.0.2 - 2023-04-15
|
633
|
+
## [v0.0.2] - 2023-04-15
|
462
634
|
|
463
635
|
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
636
|
|
@@ -476,7 +648,7 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
476
648
|
- `shims.css` - a place to put styles meant to support graceful degradation for older sites (not browsers, that goes in `legacy.css`)
|
477
649
|
|
478
650
|
|
479
|
-
## v0.0.1 - 2022-06-24
|
651
|
+
## [v0.0.1] - 2022-06-24
|
480
652
|
|
481
653
|
<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
654
|
|
@@ -485,3 +657,30 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
485
657
|
- `variables.css` - structure css variables (custom properties) for flexible theming
|
486
658
|
- `base.css` - add styling block for every html element, even if empty
|
487
659
|
- `palette.css` - separate out the color scheme into its own css file
|
660
|
+
|
661
|
+
|
662
|
+
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.3.0...HEAD
|
663
|
+
[v0.3.0]: https://github.com/clairity/clairity.css/compare/v0.2.0...v0.3.0
|
664
|
+
[v0.2.0]: https://github.com/clairity/clairity.css/compare/v0.1.2...v0.2.0
|
665
|
+
[v0.1.2]: https://github.com/clairity/clairity.css/compare/v0.1.1...v0.1.2
|
666
|
+
[v0.1.1]: https://github.com/clairity/clairity.css/compare/v0.1.0...v0.1.1
|
667
|
+
[v0.1.0]: https://github.com/clairity/clairity.css/compare/v0.0.3...v0.1.0
|
668
|
+
[v0.0.3]: https://github.com/clairity/clairity.css/compare/v0.0.2...v0.0.3
|
669
|
+
[v0.0.2]: https://github.com/clairity/clairity.css/compare/v0.0.1...v0.0.2
|
670
|
+
[v0.0.1]: https://github.com/clairity/clairity.css/releases/tag/v0.0.1
|
671
|
+
|
672
|
+
[clairity.basic.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.basic.css
|
673
|
+
[clairity.classless.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.class.css
|
674
|
+
[clairity.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.css
|
675
|
+
[variables.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/variables.css
|
676
|
+
[palette.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/palette.css
|
677
|
+
[functions.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/functions.css
|
678
|
+
[icons.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/icons.css
|
679
|
+
[base.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/base.css
|
680
|
+
[cosmetic.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/cosmetic.css
|
681
|
+
[states.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/states.css
|
682
|
+
[classes.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/classes.css
|
683
|
+
[components.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/components.css
|
684
|
+
[utilities.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/utilities.css
|
685
|
+
[shims.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/shims.css
|
686
|
+
[legacy.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/legacy.css
|
data/README.md
CHANGED
@@ -63,7 +63,9 @@ Once the gem is installed, require <samp class="clairity">clairity.css</samp> in
|
|
63
63
|
*# require_self
|
64
64
|
*/
|
65
65
|
|
66
|
+
/* instead of the sprockets directive above, you can use a css @import directive: */
|
66
67
|
@import "clairity.css";
|
68
|
+
|
67
69
|
/* to get basic plus the palette, use two @import statements:
|
68
70
|
@import "clairity.basic.css";
|
69
71
|
@import "clairity/palette.css";
|
@@ -113,7 +115,7 @@ where the contents of `/lib/assets/css/` in the gem was placed in the `/assets/c
|
|
113
115
|
|
114
116
|
## Previewing <samp class="clairity">clairity.css</samp>
|
115
117
|
|
116
|
-
|
118
|
+
To preview <samp class="clairity">clairity.css</samp>, check out the [Spec Sheet](https://css.clairity.blog/clairity.html).
|
117
119
|
|
118
120
|
For a quick and dirty (and totally insecure) way of previewing <samp class="clairity">clairity.css</samp>, download (or clone the gem repo locally) and unpack the gem (`gem unpack clairity.css-X.Y.Z.gem`), and from within the gem directory, run a (single-line invocation) ruby web server[^webrick]:
|
119
121
|
|
@@ -130,7 +132,8 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
|
|
130
132
|
|
131
133
|
To install this gem onto your local machine, run `bundle exec rake install`.
|
132
134
|
|
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).
|
135
|
+
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).
|
136
|
+
|
134
137
|
|
135
138
|
|
136
139
|
### Release Checklist
|
@@ -147,14 +150,13 @@ To release this gem, follow these steps:
|
|
147
150
|
1. update the version number `X.Y.Z` in `lib/clairity.css/version.rb`
|
148
151
|
1. `Gemfile.lock` likely needs to be updated due to the version number change, so update it via `bundle && git add Gemfile.lock`
|
149
152
|
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`
|
153
|
+
1. build the gem with `gem build clairity.css.gemspec`
|
154
|
+
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
155
|
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
156
|
1. `git commit -m "with a descriptive commit message here"` (or using our standard shortcut, `git cm "message"`)
|
153
157
|
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
158
|
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
|
-
|
159
|
+
1. push the gem (from the `pkg` directory) to rubygems: `gem push clairity.css-X.Y.Z.gem`
|
158
160
|
|
159
161
|
### Contributing
|
160
162
|
|