slight enhancements for the user agent stylesheet
slightcss.devins.page
css
stylesheet
framework
lightweight
feat: v3
+87
-54
+1
.gitignore
+1
.gitignore
···
1
+
node_modules
+14
bun.lock
+14
bun.lock
···
1
+
{
2
+
"lockfileVersion": 1,
3
+
"workspaces": {
4
+
"": {
5
+
"name": "@intergrav/slight.css",
6
+
"devDependencies": {
7
+
"prettier": "latest",
8
+
},
9
+
},
10
+
},
11
+
"packages": {
12
+
"prettier": ["prettier@3.6.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ=="],
13
+
}
14
+
}
+4
-4
index.html
+4
-4
index.html
···
20
20
<header>
21
21
<h1>slight.css</h1>
22
22
<nav>
23
-
<a href="https://npmjs.com/package/@intergrav/slight.css">npm</a> /
24
-
<a href="https://github.com/intergrav/slight.css">git</a> /
23
+
<a href="https://npmjs.com/package/@intergrav/slight.css">npm</a> •
24
+
<a href="https://github.com/intergrav/slight.css">git</a> •
25
25
<a href="https://github.com/intergrav/slight.css/issues">issues</a>
26
26
</nav>
27
27
</header>
···
47
47
<h2>how do i use it?</h2>
48
48
<h3>html import</h3>
49
49
<p>place this somewhere in your <code>head</code>:</p>
50
-
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1"></code></pre>
50
+
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/slight.css@3"></code></pre>
51
51
<h3>css import</h3>
52
52
<p>place this somewhere in your stylesheet:</p>
53
-
<pre><code>@import url(https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1);</code></pre>
53
+
<pre><code>@import url(https://cdn.jsdelivr.net/npm/@intergrav/slight.css@3);</code></pre>
54
54
<h3>npm package</h3>
55
55
<p>
56
56
run this in your terminal,
+3
package.json
+3
package.json
+65
-50
slight.css
+65
-50
slight.css
···
1
-
/* slight.css v2 |
2
-
minimal enhancements on top of the user agent stylesheet
3
-
provides a pleasant reading experience while relying mostly on native browser styles
4
-
can be used as a baseline for web projects or minimal websites/blogs
1
+
/* slight.css v3 |
2
+
a very minimal, accessible, mostly classless CSS framework aiming to
3
+
rely on user agent styles. makes any basic html page look better, and
4
+
also provides some variables that you can customize to fit your needs.
5
+
it's meant to be extended on with your own CSS as you see fit.
6
+
7
+
- automatic light/dark mode with color scheme
8
+
- minimal styling, entirely customizable through CSS variables
9
+
- optional, customizable prose styles for articles and documentation
10
+
- use by applying class="prose" to a container that wraps your
11
+
content, such as <main>, <body>, <div>, etc
5
12
*/
6
13
7
14
/* toc |
8
-
1. variables
9
-
2. typography
10
-
3. prose elements
15
+
1. variables
16
+
2. typography
17
+
3. prose elements
11
18
*/
12
19
13
-
/* 1. variables */
20
+
/* 1. variables |
21
+
- feel free to customize these variables by applying your own CSS file
22
+
after this one, and setting them in `:root`.
23
+
- you can set any of these to "revert" to revert customization. old browsers
24
+
won't recognize it so they will use the default values anyway.
25
+
*/
14
26
15
27
:root {
16
-
/* customizable variables - you may change these as you wish */
17
28
color-scheme: light dark;
18
-
--sc-font: system-ui, sans-serif;
19
-
--sc-font-mono:
20
-
ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
21
-
"DejaVu Sans Mono", monospace;
29
+
30
+
--sc_typography_font-serif: ui-serif, serif;
31
+
--sc_typography_font-sans_serif: ui-sans-serif, system-ui, sans-serif;
32
+
--sc_typography_font-mono: ui-monospace, monospace;
33
+
--sc_typography_line-height: 1.5;
34
+
--sc_typography_tab-size: 4;
35
+
--sc_typography_body_max-width: 48rem;
36
+
--sc_typography_body_margin-inline: auto;
37
+
--sc_typography_body_padding-inline: 1rem;
22
38
23
-
/* unsafe variables - not recommended to customize, may be removed or changed in the future */
24
-
--sc-prose-bd: rgba(0, 0, 0, 0.2);
25
-
--sc-prose-bg: rgba(0, 0, 0, 0.1);
39
+
--sc_prose_background-color: rgba(0, 0, 0, 0.1);
40
+
--sc_prose_border-color: rgba(0, 0, 0, 0.2);
41
+
--sc_prose_border-radius: 0.25rem;
26
42
}
27
43
28
-
@supports (color: light-dark(white, black)) {
44
+
@media (prefers-color-scheme: dark) {
29
45
:root {
30
-
--sc-prose-bd: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
31
-
--sc-prose-bg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
46
+
--sc_prose_background-color: rgba(255, 255, 255, 0.1);
47
+
--sc_prose_border-color: rgba(255, 255, 255, 0.2);
32
48
}
33
49
}
34
50
35
51
/* 2. typography */
36
52
37
53
html {
38
-
font-family: var(--sc-font);
39
-
line-height: 1.5;
40
-
tab-size: 4;
54
+
font-family: var(--sc_typography_font-sans_serif);
55
+
line-height: var(--sc_typography_line-height);
56
+
tab-size: var(--sc_typography_tab-size);
41
57
}
42
58
43
59
body {
44
-
max-width: 48rem;
45
-
margin-left: auto;
46
-
margin-right: auto;
47
-
padding-left: 1rem;
48
-
padding-right: 1rem;
60
+
max-width: var(--sc_typography_body_max-width);
61
+
margin-inline: var(--sc_typography_body_margin-inline);
62
+
padding-inline: var(--sc_typography_body_padding-inline);
63
+
}
64
+
65
+
code,
66
+
kbd,
67
+
samp,
68
+
pre {
69
+
font-family: var(--sc_typography_font-mono);
70
+
}
71
+
72
+
img,
73
+
video,
74
+
iframe {
75
+
max-width: 100%;
49
76
}
50
77
51
78
@media print {
···
54
81
}
55
82
}
56
83
57
-
code,
58
-
kbd,
59
-
samp,
60
-
pre {
61
-
font-family: var(--sc-font-mono);
62
-
font-size: 0.9rem;
63
-
}
64
-
65
84
/* 3. prose elements |
66
85
these are built-in for beautifying articles or documentation. it improves some default elements to make them more readable
67
86
you can use it by applying class="prose" to a container that wraps your content, such as <main>, <body>, <div>, etc
68
87
*/
69
88
70
-
.prose img,
71
-
.prose video,
72
-
.prose iframe {
73
-
max-width: 100%;
74
-
}
75
-
76
89
.prose table {
90
+
border: 1px solid var(--sc_prose_border-color);
77
91
border-collapse: collapse;
78
92
}
79
93
80
94
.prose th,
81
95
.prose td {
82
-
border: 1px solid var(--sc-prose-bd);
83
-
padding: 0.25rem 0.5rem;
96
+
padding-block: 0.25rem;
97
+
padding-inline: 0.5rem;
84
98
}
85
99
86
100
.prose thead tr,
87
101
.prose tbody tr:nth-child(even) {
88
-
background-color: var(--sc-prose-bg);
102
+
background-color: var(--sc_prose_background-color);
89
103
}
90
104
91
105
.prose :not(pre) > code,
92
106
.prose :not(pre) > samp,
93
107
.prose :not(pre) > kbd,
94
108
.prose pre {
95
-
background-color: var(--sc-prose-bg);
109
+
border-radius: var(--sc_prose_border-radius);
110
+
background-color: var(--sc_prose_background-color);
96
111
}
97
112
98
113
.prose pre {
···
102
117
}
103
118
104
119
.prose blockquote {
105
-
border-left: 0.25rem solid var(--sc-prose-bd);
106
-
background-color: var(--sc-prose-bg);
107
-
padding-left: 1rem;
108
-
margin-left: 0;
109
-
margin-right: 0;
120
+
border-inline-start: 0.25rem solid var(--sc_prose_border-color);
121
+
border-radius: var(--sc_prose_border-radius);
122
+
background-color: var(--sc_prose_background-color);
123
+
padding-inline-start: 1rem;
124
+
margin-inline: 0;
110
125
}