@semanticus/semanticus-css 2.0.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +16 -18
  2. package/dist/semanticus-no-utilities.css +1 -1
  3. package/dist/semanticus-semantics.css +1 -1
  4. package/dist/semanticus.css +2 -2
  5. package/package.json +1 -1
  6. package/src/components/_auto-grid.css +8 -0
  7. package/src/components/_card.css +11 -3
  8. package/src/components/modules.css +1 -1
  9. package/src/index.css +1 -1
  10. package/src/semantics/elements/_footer.css +1 -2
  11. package/src/semantics/elements/_header.css +1 -2
  12. package/src/semantics/elements/_hgroup.css +1 -2
  13. package/src/semantics/elements/_p.css +0 -4
  14. package/src/variants/modifiers/_striped.css +11 -3
  15. package/src/components/_grid.css +0 -14
package/README.md CHANGED
@@ -5,12 +5,6 @@
5
5
 
6
6
  **Semanticus** is a lightweight CSS framework that prioritizes semantic HTML and ARIA-focused accessibility, with a small set of atomic utilities.
7
7
 
8
- > [!CAUTION]
9
- > Semanticus CSS hasn't been seriously battle tested in production yet.
10
-
11
- > [!IMPORTANT]
12
- > CALL TO ARMS: Even with the advent of AI, building an open source project requires a lot of work, if you are interested to help out, check out the [roadmap](https://semanticus.design/about/roadmap), the [contributing guide](https://semanticus.design/about/contributing) and join us in this journey!
13
-
14
8
  ## Vision
15
9
 
16
10
  Contribute to a more accessible friendly world wide web.
@@ -32,16 +26,16 @@ Enable authors to write clean, semantic HTML that looks great by default, guide
32
26
  ### Option 1: CDN (quick start)
33
27
 
34
28
  ```html
35
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.0/dist/semanticus.css">
29
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.1/dist/semanticus.css">
36
30
 
37
31
  <!-- costumize it with a palette or size variation if needed -->
38
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.0/dist/semanticus.palette.blue.css">
39
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.0/dist/semanticus.size.pico.css">
32
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.1/dist/semanticus.palette.blue.css">
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.1/dist/semanticus.size.pico.css">
40
34
  ```
41
35
 
42
36
  ### Option 2: Install manually
43
37
 
44
- Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-2.0.0.tgz), move the ones you need to your **stylesheets** folder and include them in your HTML `<head>`:
38
+ Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-2.1.1.tgz), move the ones you need to your **stylesheets** folder and include them in your HTML `<head>`:
45
39
 
46
40
  ```html
47
41
  <link rel="stylesheet" href="/css/semanticus.css">
@@ -147,7 +141,7 @@ Here's an off-to-a-great-start HTML template using semantic styling, its variant
147
141
  <meta charset="UTF-8">
148
142
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
149
143
  <meta name="color-scheme" content="light dark">
150
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.0/dist/semanticus.css">
144
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.1/dist/semanticus.css">
151
145
  </head>
152
146
  <body class="content-grid">
153
147
  <header>
@@ -202,19 +196,23 @@ Semanticus CSS targets modern browsers based on the following [Browserslist](htt
202
196
  - Firefox ESR
203
197
  - No dead browsers
204
198
 
205
- ## Limitations
199
+ ## Development
200
+
201
+ Check out this [How to setup the project](docs/about/contributing.md#how-to-setup-the-project) inside the contributing guide.
206
202
 
207
- Semanticus CSS is inspired by the semantic and accessible foundations of Pico CSS and the flexibility of utility-first composition patterns popularized by Bootstrap.
203
+ ## About
208
204
 
209
- It is not a full UI component framework. Semanticus CSS intentionally avoids shipping exhaustive pre-built components or JavaScript-driven interactions, favoring semantic HTML, composable styling utilities, and framework-agnostic integration instead.
205
+ **Semanticus CSS** is inspired by the semantic and accessible foundations of **Pico CSS** and the flexibility of utility composition patterns popularized by **Bootstrap**.
210
206
 
211
- It does however provide documentation and examples on how to implement common UI patterns using semantic HTML and ARIA attributes, along with a small set of utility classes for visual variation and layout.
207
+ It aims to address the friction that often appears shortly after installing **Pico CSS**, when you want to customize `spacing`, `layout`, `colors`, and other CSS properties. It does so by combining **Bootstrap**-style utilities adapted to the same **CSS variable system**.
212
208
 
213
- ## Development
209
+ ### Why not just use Bootstrap or Pico CSS?
214
210
 
215
- Check out this [How to setup the project](docs/about/contributing.md#how-to-setup-the-project) inside the contributing guide.
211
+ > Or any other full-fledged CSS framework, for that matter.
212
+
213
+ **Semanticus CSS** is not appealing solely because of its small footprint. Its real value lies in its **semantic-first** and **accessibility-focused** styling approach, helping developers build beautiful interfaces while gradually guiding them toward accessibility best practices without overwhelming them with the complexities of **ARIA** patterns and implementation details.
216
214
 
217
- ## Size comparison
215
+ ### Size comparison
218
216
 
219
217
  | Bundle | Gzip |
220
218
  | --- | --- |