devins.page
slight enhancements for the user agent stylesheet
slightcss.devins.page
css
stylesheet
framework
lightweight
feat!: many improvements
major version will be bumped as this contains many breaking changes
+199
-211
+15
-10
README.md
+15
-10
README.md
···
34
34
35
35
## what exactly does it change?
36
36
37
-
1. automatically adjusts the color scheme based on system preferences
38
-
2. uses the default system sans-serif/monospace fonts
39
-
3. sets a maximum width for the body content on widescreen viewports (reverted when printing)
40
-
4. increases line height and changes tab size
41
-
5. adds borders and padding to table elements for better spacing and clarity
42
-
6. adds a border to inline code and code blocks for better readability
43
-
7. makes blockquotes look a bit nicer with a border and padding
44
-
8. displays lists in nav horizontally when placed in header
37
+
1. automatically adjusts the color scheme based on system preferences
38
+
2. uses the default system sans-serif/monospace fonts
39
+
3. sets a maximum width for the body content on widescreen viewports
40
+
4. increases line height and changes tab size
41
+
5. opt-in styles for elements in containers with `prose` class:
42
+
1. sets 100% maximum width for images, videos, and iframes
43
+
2. adds a background to inline code and code blocks for better readability
44
+
3. adds borders and padding to table elements for better spacing and clarity
45
+
4. makes blockquotes look a bit nicer with a border and padding
46
+
47
+
keep in mind that this is not a CSS reset or normalization stylesheet. it simply adds some better defaults with the aim of being as minimal as possible. if you need a normalization stylesheet, i recommend using [modern-normalize](https://github.com/sindresorhus/modern-normalize).
48
+
49
+
## prose elements
45
50
46
-
keep in mind that mostly relying on the user agent stylesheet means that things could possibly look different on other browsers. for certain projects, this may matter, and you might want to look into using a CSS reset/normalize stylesheet such as [modern-normalize](https://github.com/sindresorhus/modern-normalize).
51
+
slight.css offers built-in styles to beautify certain elements, such as blockquotes, tables, code, pre, and more. these styles are **opt-in**, and to use them, you have to apply the `prose` class to a container that wraps your content, such as a `body`, `main`, or `div`. you can see the demo's [index.html](https://github.com/intergrav/slight.css/blob/main/index.html) for an example of it's usage.
47
52
48
53
## can i see what it looks like?
49
54
···
51
56
52
57
## difference between this and dev.css?
53
58
54
-
i maintain and use both, but this is a much more simple alternative to [dev.css](https://devcss.devins.page) that mainly focuses on improving default user agent stylesheets rather than having a full custom set of styles. slight.css is more limited as it has less built-in element styles and doesn't have custom theme support (although you can apply your own stylesheets on top). it may also be less consistent across browsers.
59
+
i maintain and use both, but this is a much more simple alternative to [dev.css](https://devcss.devins.page) that mainly focuses on improving default user agent stylesheets rather than having a full custom set of styles. it doesn't have custom theme support (although you can apply your own stylesheets on top). it may also be less consistent across browsers. another difference is that dev.css is classless, while slight.css contains a `prose` class.
+146
-143
index.html
+146
-143
index.html
···
20
20
<header>
21
21
<h1>slight.css</h1>
22
22
<nav>
23
-
<ul>
24
-
<li>
25
-
<a href="https://npmjs.com/package/@intergrav/slight.css">npm</a>
26
-
</li>
27
-
<li>
28
-
<a href="https://github.com/intergrav/slight.css">git</a>
29
-
</li>
30
-
<li>
31
-
<a href="https://github.com/intergrav/slight.css/issues">issues</a>
32
-
</li>
33
-
</ul>
23
+
<a href="https://npmjs.com/package/@intergrav/slight.css">npm</a> /
24
+
<a href="https://github.com/intergrav/slight.css">git</a> /
25
+
<a href="https://github.com/intergrav/slight.css/issues">issues</a>
34
26
</nav>
35
27
</header>
36
-
<p>
37
-
<strong>slight.css</strong> is an incredibly simple CSS stylesheet that
38
-
adds some <em>slight</em> enhancements on top of the default user agent
39
-
stylesheet.
40
-
</p>
41
-
<p>
42
-
it aims to provide a more pleasant reading experience while relying mostly
43
-
on native browser styles. things such as background and text colors are
44
-
chosen by the browser.
45
-
</p>
46
-
<p>
47
-
this can be used as a good baseline for any web project, or as-is for a
48
-
super barebones website.
49
-
</p>
50
-
<p>
51
-
the page that you are currently viewing is using slight.css as its
52
-
stylesheet.
53
-
</p>
54
-
<h2>how do i use it?</h2>
55
-
<h3>html import</h3>
56
-
<p>place this somewhere in your <code>head</code>:</p>
57
-
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1"></code></pre>
58
-
<h3>css import</h3>
59
-
<p>place this somewhere in your stylesheet:</p>
60
-
<pre><code>@import url(https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1);</code></pre>
61
-
<h3>npm package</h3>
62
-
<p>
63
-
run this in your terminal,
64
-
<strong>replacing with the proper command</strong>:
65
-
</p>
66
-
<pre><code>[npm/yarn/pnpm/bun] add @intergrav/slight.css</code></pre>
67
-
<h2>what exactly does it change?</h2>
68
-
<ol>
69
-
<li>
70
-
automatically adjusts the color scheme based on system preferences
71
-
</li>
72
-
<li>uses the default system sans-serif/monospace fonts</li>
73
-
<li>sets a maximum width for the body content on widescreen viewports</li>
74
-
<li>increases line height and changes tab size</li>
75
-
<li>
76
-
adds borders and padding to table elements for better spacing and
77
-
clarity
78
-
</li>
79
-
<li>
80
-
adds a border to inline code and code blocks for better readability
81
-
</li>
82
-
<li>makes blockquotes look a bit nicer with a border and padding</li>
83
-
<li>displays lists in nav horizontally when placed in header</li>
84
-
</ol>
85
-
<p>
86
-
keep in mind that this is not a CSS reset or normalization stylesheet. it
87
-
simply adds some better defaults with the aim of being as minimal as
88
-
possible. if you need a normalization stylesheet, i recommend using
89
-
<a href="https://github.com/sindresorhus/modern-normalize"
90
-
>modern-normalize</a
91
-
>.
92
-
</p>
93
-
<h2>demo elements</h2>
94
-
<h3>blockquote</h3>
95
-
<blockquote cite="https://example.com">
28
+
<main class="prose">
29
+
<p>
30
+
<strong>slight.css</strong> is an incredibly simple CSS stylesheet that
31
+
adds some <em>slight</em> enhancements on top of the default user agent
32
+
stylesheet.
33
+
</p>
34
+
<p>
35
+
it aims to provide a more pleasant reading experience while relying
36
+
mostly on native browser styles. things such as background and text
37
+
colors are chosen by the browser.
38
+
</p>
39
+
<p>
40
+
this can be used as a good baseline for any web project, or as-is for a
41
+
super barebones website.
42
+
</p>
43
+
<p>
44
+
the page that you are currently viewing is using slight.css as its
45
+
stylesheet.
46
+
</p>
47
+
<h2>how do i use it?</h2>
48
+
<h3>html import</h3>
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>
51
+
<h3>css import</h3>
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>
54
+
<h3>npm package</h3>
55
+
<p>
56
+
run this in your terminal,
57
+
<strong>replacing with the proper command</strong>:
58
+
</p>
59
+
<pre><code>[npm/yarn/pnpm/bun] add @intergrav/slight.css</code></pre>
60
+
<h2>what exactly does it change?</h2>
61
+
<ol>
62
+
<li>
63
+
automatically adjusts the color scheme based on system preferences
64
+
</li>
65
+
<li>uses the default system sans-serif/monospace fonts</li>
66
+
<li>
67
+
sets a maximum width for the body content on widescreen viewports
68
+
</li>
69
+
<li>increases line height and changes tab size</li>
70
+
<li>
71
+
opt-in styles for elements in containers with
72
+
<code>prose</code> class:
73
+
<ol>
74
+
<li>sets 100% maximum width for images, videos, and iframes</li>
75
+
<li>
76
+
adds a background to inline code and code blocks for better
77
+
readability
78
+
</li>
79
+
<li>
80
+
adds borders and padding to table elements for better spacing and
81
+
clarity
82
+
</li>
83
+
<li>
84
+
makes blockquotes look a bit nicer with a border and padding
85
+
</li>
86
+
</ol>
87
+
</li>
88
+
</ol>
96
89
<p>
97
-
congue ex inceptos ut est gravida purus. convallis suspendisse mattis
98
-
porta metus mus nisl ad ante eros inceptos. iaculis convallis gravida
99
-
odio venenatis ut velit. fames non nunc sollicitudin dictumst litora
100
-
natoque consectetur erat. fermentum mattis arcu quam sociosqu libero
101
-
tincidunt pellentesque rutrum. pulvinar per habitasse fusce nec bibendum
102
-
tempor natoque efficitur si.
90
+
keep in mind that this is not a CSS reset or normalization stylesheet.
91
+
it simply adds some better defaults with the aim of being as minimal as
92
+
possible. if you need a normalization stylesheet, i recommend using
93
+
<a href="https://github.com/sindresorhus/modern-normalize"
94
+
>modern-normalize</a
95
+
>.
96
+
</p>
97
+
<h2>prose elements</h2>
98
+
<p>
99
+
slight.css offers built-in styles to beautify certain elements, such as
100
+
blockquotes, tables, code, pre, and more. these styles are
101
+
<strong>opt-in</strong>, and to use them, you have to apply the
102
+
<code>prose</code> class to a container that wraps your content, such as
103
+
a <code>body</code>, <code>main</code>, or <code>div</code>. you can see
104
+
the demo's
105
+
<a href="https://github.com/intergrav/slight.css/blob/main/index.html"
106
+
>index.html</a
107
+
>
108
+
for an example of it's usage.
103
109
</p>
104
-
<footer>— <cite>a really cool person</cite></footer>
105
-
</blockquote>
106
-
<blockquote>
107
-
<p>this is a blockquote without a citation.</p>
110
+
<h3>blockquote</h3>
111
+
<blockquote cite="https://example.com">
112
+
<p>
113
+
congue ex inceptos ut est gravida purus. convallis suspendisse mattis
114
+
porta metus mus nisl ad ante eros inceptos. iaculis convallis gravida
115
+
odio venenatis ut velit. fames non nunc sollicitudin dictumst litora
116
+
natoque consectetur erat. fermentum mattis arcu quam sociosqu libero
117
+
tincidunt pellentesque rutrum. pulvinar per habitasse fusce nec
118
+
bibendum tempor natoque efficitur si.
119
+
</p>
120
+
<footer>— <cite>a really cool person</cite></footer>
121
+
</blockquote>
108
122
<blockquote>
109
-
<p>this is a nested blockquote.</p>
123
+
<p>this is a blockquote without a citation.</p>
124
+
<blockquote>
125
+
<p>this is a nested blockquote.</p>
126
+
</blockquote>
110
127
</blockquote>
111
-
</blockquote>
112
-
<h3>table</h3>
113
-
<table>
114
-
<caption>
115
-
table caption
116
-
</caption>
117
-
<thead>
118
-
<tr>
119
-
<th>header 1</th>
120
-
<th>header 2</th>
121
-
<th>header 3</th>
122
-
</tr>
123
-
</thead>
124
-
<tbody>
125
-
<tr>
126
-
<td>row 1</td>
127
-
<td>row 1</td>
128
-
<td>row 1</td>
129
-
</tr>
130
-
<tr>
131
-
<td>row 2</td>
132
-
<td>row 2</td>
133
-
<td>row 2</td>
134
-
</tr>
135
-
</tbody>
136
-
</table>
137
-
<h3>code</h3>
138
-
<p>
139
-
this is normal text, while this is <code>inline code</code> marked with
140
-
code tag.
141
-
</p>
142
-
<h3>code block (pre+code)</h3>
143
-
<pre><code>this is a code block
128
+
<h3>table</h3>
129
+
<table>
130
+
<caption>
131
+
table caption
132
+
</caption>
133
+
<thead>
134
+
<tr>
135
+
<th>header 1</th>
136
+
<th>header 2</th>
137
+
<th>header 3</th>
138
+
</tr>
139
+
</thead>
140
+
<tbody>
141
+
<tr>
142
+
<td>row 1</td>
143
+
<td>row 1</td>
144
+
<td>row 1</td>
145
+
</tr>
146
+
<tr>
147
+
<td>row 2</td>
148
+
<td>row 2</td>
149
+
<td>row 2</td>
150
+
</tr>
151
+
</tbody>
152
+
</table>
153
+
<h3>code</h3>
154
+
<p>
155
+
this is normal text, while this is <code>inline code</code> marked with
156
+
code tag.
157
+
</p>
158
+
<h3>code block (pre+code)</h3>
159
+
<pre><code>this is a code block
144
160
this is a line of code, indented with tab
145
161
this is another line of code, indented with tab
146
162
beep boop</code></pre>
147
-
<h3>forms</h3>
148
-
<p>this form doesn't actually do anything its just a demo</p>
149
-
<form>
150
-
<label for="fname">first name</label><br />
151
-
<input type="text" id="fname" name="fname" /><br />
152
-
<label for="lname">last name</label><br />
153
-
<input type="text" id="lname" name="lname" /><br /><br />
154
-
<input type="radio" id="one" name="options" value="option 1" />
155
-
<label for="one">option 1</label><br />
156
-
<input type="radio" id="two" name="options" value="option 2" />
157
-
<label for="two">option 2</label><br />
158
-
<input type="radio" id="three" name="options" value="option 3" />
159
-
<label for="three">option 3</label><br /><br />
160
-
<input type="submit" value="submit" />
161
-
</form>
162
-
<h2>difference between this and dev.css?</h2>
163
-
<p>
164
-
i maintain and use both, but this is a much more simple alternative to
165
-
<a href="https://devcss.devins.page">dev.css</a> that mainly focuses on
166
-
improving default user agent stylesheets rather than having a full custom
167
-
set of styles. slight.css is more limited as it has less built-in element
168
-
styles and doesn't have custom theme support (although you can apply your
169
-
own stylesheets on top). it may also be less consistent across browsers.
170
-
</p>
171
-
<a href="https://devins.page"
172
-
><img
173
-
src="https://raw.githubusercontent.com/intergrav/branding/refs/heads/main/personal/badge.svg"
174
-
/></a>
163
+
<h2>difference between this and dev.css?</h2>
164
+
<p>
165
+
i maintain and use both, but this is a much more simple alternative to
166
+
<a href="https://devcss.devins.page">dev.css</a> that mainly focuses on
167
+
improving default user agent stylesheets rather than having a full
168
+
custom set of styles. it doesn't have custom theme support (although you
169
+
can apply your own stylesheets on top). it may also be less consistent
170
+
across browsers. another difference is that dev.css is classless, while
171
+
slight.css contains a <code>prose</code> class.
172
+
</p>
173
+
<a href="https://devins.page"
174
+
><img
175
+
src="https://raw.githubusercontent.com/intergrav/branding/refs/heads/main/personal/badge.svg"
176
+
/></a>
177
+
</main>
175
178
<footer>
176
179
<p>
177
180
slight.css and this website was written by
+1
-2
package.json
+1
-2
package.json
···
1
1
{
2
2
"name": "@intergrav/slight.css",
3
3
"version": "1.6.4",
4
-
"author": "intergrav <intergrav@proton.me> (https://devins.page)",
4
+
"author": "intergrav <devin@devins.page> (https://devins.page)",
5
5
"repository": "github:intergrav/slight.css",
6
6
"main": "slight.css",
7
7
"bugs": {
···
16
16
"css",
17
17
"stylesheet",
18
18
"framework",
19
-
"classless",
20
19
"minimal",
21
20
"lightweight",
22
21
"open-source"
+37
-56
slight.css
+37
-56
slight.css
···
1
-
/* slight.css |
1
+
/* slight.css v2 |
2
2
minimal enhancements on top of the user agent stylesheet
3
3
provides a pleasant reading experience while relying mostly on native browser styles
4
4
can be used as a baseline for web projects or minimal websites/blogs
···
7
7
/* toc |
8
8
1. variables
9
9
2. typography
10
-
3. elements
11
-
4. remove max-width when printing
10
+
3. prose elements
12
11
*/
13
12
14
13
/* 1. variables */
···
20
19
--sc-font-mono:
21
20
ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
22
21
"DejaVu Sans Mono", monospace;
23
-
--sc-line-height: 1.5; /* set to 'revert' to use default */
24
-
--sc-max-width: 48rem; /* set to 'revert' to remove limit */
25
22
26
23
/* unsafe variables - not recommended to customize, may be removed or changed in the future */
27
-
--sc-emphasizebd: rgba(0, 0, 0, 0.2);
28
-
--sc-emphasizebg: rgba(0, 0, 0, 0.1);
24
+
--sc-prose-bd: rgba(0, 0, 0, 0.2);
25
+
--sc-prose-bg: rgba(0, 0, 0, 0.1);
29
26
}
30
27
31
28
@supports (color: light-dark(white, black)) {
32
29
:root {
33
-
--sc-emphasizebd: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
34
-
--sc-emphasizebg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
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));
35
32
}
36
33
}
37
34
···
39
36
40
37
html {
41
38
font-family: var(--sc-font);
42
-
line-height: var(--sc-line-height);
39
+
line-height: 1.5;
43
40
tab-size: 4;
44
41
}
45
42
46
43
body {
47
-
max-width: var(--sc-max-width);
44
+
max-width: 48rem;
48
45
margin-left: auto;
49
46
margin-right: auto;
50
47
padding-left: 1rem;
51
48
padding-right: 1rem;
52
49
}
53
50
51
+
@media print {
52
+
body {
53
+
max-width: revert;
54
+
}
55
+
}
56
+
54
57
code,
55
58
kbd,
56
59
samp,
···
59
62
font-size: 0.9rem;
60
63
}
61
64
62
-
/* 3. elements */
65
+
/* 3. prose elements |
66
+
these are built-in for beautifying articles or documentation. it improves some default elements to make them more readable
67
+
you can use it by applying class="prose" to a container that wraps your content, such as <main>, <body>, <div>, etc
68
+
*/
63
69
64
-
img {
70
+
.prose img,
71
+
.prose video,
72
+
.prose iframe {
65
73
max-width: 100%;
66
74
}
67
75
68
-
table {
76
+
.prose table {
69
77
border-collapse: collapse;
70
78
}
71
79
72
-
th,
73
-
td {
74
-
border: 1px solid var(--sc-emphasizebd);
80
+
.prose th,
81
+
.prose td {
82
+
border: 1px solid var(--sc-prose-bd);
75
83
padding: 0.25rem 0.5rem;
76
84
}
77
85
78
-
thead tr,
79
-
tbody tr:nth-child(even) {
80
-
background-color: var(--sc-emphasizebg);
86
+
.prose thead tr,
87
+
.prose tbody tr:nth-child(even) {
88
+
background-color: var(--sc-prose-bg);
81
89
}
82
90
83
-
:not(pre) > code,
84
-
:not(pre) > samp,
85
-
:not(pre) > kbd,
86
-
pre {
87
-
background-color: var(--sc-emphasizebg);
91
+
.prose :not(pre) > code,
92
+
.prose :not(pre) > samp,
93
+
.prose :not(pre) > kbd,
94
+
.prose pre {
95
+
background-color: var(--sc-prose-bg);
88
96
}
89
97
90
-
pre {
98
+
.prose pre {
91
99
overflow-x: auto;
92
100
max-width: 100%;
93
101
padding: 0.5rem;
94
102
}
95
103
96
-
blockquote {
97
-
border-left: 0.25rem solid var(--sc-emphasizebd);
98
-
background-color: var(--sc-emphasizebg);
104
+
.prose blockquote {
105
+
border-left: 0.25rem solid var(--sc-prose-bd);
106
+
background-color: var(--sc-prose-bg);
99
107
padding-left: 1rem;
100
108
margin-left: 0;
101
109
margin-right: 0;
102
110
}
103
-
104
-
header nav ul,
105
-
footer nav ul {
106
-
display: flex;
107
-
flex-wrap: wrap;
108
-
list-style: none;
109
-
padding: 0;
110
-
}
111
-
112
-
header nav ul li,
113
-
footer nav ul li {
114
-
display: flex;
115
-
}
116
-
117
-
header nav ul li:not(:first-child)::before,
118
-
footer nav ul li:not(:first-child)::before {
119
-
content: "•";
120
-
margin: 0 0.25rem;
121
-
}
122
-
123
-
/* 4. remove max-width when printing */
124
-
125
-
@media print {
126
-
body {
127
-
max-width: revert;
128
-
}
129
-
}