@semanticus/semanticus-css 1.2.0 → 2.1.0

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 (18) hide show
  1. package/README.md +28 -27
  2. package/dist/semanticus-no-utilities.css +16 -1
  3. package/dist/semanticus-semantics.css +1 -1
  4. package/dist/semanticus.css +17 -2
  5. package/package.json +2 -1
  6. package/src/components/_auto-grid.css +8 -0
  7. package/src/components/_card.css +64 -0
  8. package/src/components/_content-grid.css +95 -0
  9. package/src/components/_icons.css +2 -3
  10. package/src/components/modules.css +2 -1
  11. package/src/index.css +1 -1
  12. package/src/semantics/attributes/_popover.css +0 -4
  13. package/src/semantics/attributes/_role-group.css +1 -0
  14. package/src/semantics/attributes/_role-status-alert.css +36 -1
  15. package/src/semantics/elements/_details.css +0 -1
  16. package/src/semantics/modules.css +0 -1
  17. package/src/components/_card-list.css +0 -60
  18. package/src/semantics/attributes/_role-toolbar.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@1.2.0/dist/semanticus.css">
29
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.0/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@1.2.0/dist/semanticus.palette.blue.css">
39
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@1.2.0/dist/semanticus.size.pico.css">
32
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.0/dist/semanticus.palette.blue.css">
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.0/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-1.2.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.0.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,31 +141,34 @@ 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@1.2.0/dist/semanticus.css">
144
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.1.0/dist/semanticus.css">
151
145
  </head>
152
- <body class="vstack">
153
- <header class="container">
146
+ <body class="content-grid">
147
+ <header>
154
148
  <nav>
155
149
  <h3><a href="#">Acme Corp</a></h3>
156
150
 
157
151
  <ul>
158
152
  <li><a href="#">About</a></li>
159
- <li><a href="#" role="button">Log In</a></li>
153
+ <li><a href="#" role="button" class="secondary">Log In</a></li>
160
154
  </ul>
161
155
  </nav>
162
156
  </header>
163
157
 
164
- <main class="container py-d flex-grow-1">
158
+ <main class="py-d mb-3">
165
159
  <hgroup>
166
160
  <h1>Welcome to Semanticus CSS</h1>
167
161
  <p>A lightweight CSS framework for modern web development.</p>
168
162
  </hgroup>
169
163
 
170
- <button class="secondary">Get Started</button>
164
+ <button>Get Started</button>
171
165
  </main>
172
166
 
173
- <footer class="text-center text-bg-secondary-subtle">
174
- <p>Acme Corp &copy; 2026. All rights reserved.</p>
167
+ <footer class="full-width text-bg-secondary-subtle">
168
+ <nav>
169
+ <p>Acme Corp &copy; 2026</p>
170
+ <a href="#">Contact Us</a>
171
+ </nav>
175
172
  </footer>
176
173
  </body>
177
174
  </html>
@@ -199,30 +196,34 @@ Semanticus CSS targets modern browsers based on the following [Browserslist](htt
199
196
  - Firefox ESR
200
197
  - No dead browsers
201
198
 
202
- ## 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.
203
202
 
204
- 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
205
204
 
206
- 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**.
207
206
 
208
- 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**.
209
208
 
210
- ## Development
209
+ ### Why not just use Bootstrap or Pico CSS?
211
210
 
212
- 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.
213
214
 
214
- ## Size comparison
215
+ ### Size comparison
215
216
 
216
217
  | Bundle | Gzip |
217
218
  | --- | --- |
218
219
  | Pico (semantics only) | 10.2 KB |
219
220
  | Semanticus (semantics only) | 11.4 KB |
220
221
  | Pico (semantics + classes) | 11.5 KB |
221
- | Semanticus (semantics + components + variants) | 13.6 KB |
222
+ | Semanticus (semantics + components + variants) | 14.3 KB |
222
223
  | Bootstrap (utilities + grid) | 16.3 KB |
223
224
  | Semanticus (utilities + grid) | 10.5 KB |
224
225
  | Bootstrap (full bundle) | 53.8 KB |
225
- | Semanticus (full bundle) | 23.7 KB |
226
+ | Semanticus (full bundle) | 24.4 KB |
226
227
 
227
228
  ## License
228
229