@semanticus/semanticus-css 2.1.0 → 2.2.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.
- package/README.md +6 -6
- package/dist/semanticus-no-utilities.css +1 -1
- package/dist/semanticus-semantics.css +1 -1
- package/dist/semanticus.css +2 -2
- package/package.json +1 -1
- package/src/components/_card.css +11 -3
- package/src/components/_pane.css +15 -0
- package/src/components/_sidebar.css +7 -2
- package/src/components/modules.css +3 -2
- package/src/index.css +1 -1
- package/src/semantics/elements/_footer.css +1 -2
- package/src/semantics/elements/_header.css +1 -2
- package/src/semantics/elements/_hgroup.css +1 -2
- package/src/semantics/elements/_p.css +0 -4
- package/src/variants/modifiers/_striped.css +11 -3
package/README.md
CHANGED
|
@@ -26,16 +26,16 @@ Enable authors to write clean, semantic HTML that looks great by default, guide
|
|
|
26
26
|
### Option 1: CDN (quick start)
|
|
27
27
|
|
|
28
28
|
```html
|
|
29
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.
|
|
29
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.css">
|
|
30
30
|
|
|
31
31
|
<!-- costumize it with a palette or size variation if needed -->
|
|
32
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.
|
|
33
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.
|
|
32
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.palette.blue.css">
|
|
33
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.size.pico.css">
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
### Option 2: Install manually
|
|
37
37
|
|
|
38
|
-
Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-2.
|
|
38
|
+
Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-2.2.0.tgz), move the ones you need to your **stylesheets** folder and include them in your HTML `<head>`:
|
|
39
39
|
|
|
40
40
|
```html
|
|
41
41
|
<link rel="stylesheet" href="/css/semanticus.css">
|
|
@@ -141,7 +141,7 @@ Here's an off-to-a-great-start HTML template using semantic styling, its variant
|
|
|
141
141
|
<meta charset="UTF-8">
|
|
142
142
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
143
143
|
<meta name="color-scheme" content="light dark">
|
|
144
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.
|
|
144
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.css">
|
|
145
145
|
</head>
|
|
146
146
|
<body class="content-grid">
|
|
147
147
|
<header>
|
|
@@ -164,7 +164,7 @@ Here's an off-to-a-great-start HTML template using semantic styling, its variant
|
|
|
164
164
|
<button>Get Started</button>
|
|
165
165
|
</main>
|
|
166
166
|
|
|
167
|
-
<footer class="full-width
|
|
167
|
+
<footer class="full-width pane">
|
|
168
168
|
<nav>
|
|
169
169
|
<p>Acme Corp © 2026</p>
|
|
170
170
|
<a href="#">Contact Us</a>
|