slight enhancements for the user agent stylesheet
slightcss.devins.page
css
stylesheet
framework
lightweight
init
+333
+54
README.md
+54
README.md
···
1
+
# slight.css
2
+
3
+
**slight.css** is an incredibly simple CSS stylesheet that adds some _slight_ enhancements on top of the default user agent stylesheet.
4
+
5
+
it aims to provide a more pleasant reading experience while relying mostly on native browser styles. things such as background and text colors are chosen by the browser.
6
+
7
+
this can be used as a good baseline for any web project, or as-is for a super barebones website/blog.
8
+
9
+
## how do i use it?
10
+
11
+
### html import
12
+
13
+
place this somewhere in your `<head>`:
14
+
15
+
```
16
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1">
17
+
```
18
+
19
+
### css import
20
+
21
+
place this somewhere in your stylesheet:
22
+
23
+
```
24
+
@import url(https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1);
25
+
```
26
+
27
+
### npm package
28
+
29
+
run this in your terminal, **replace with the proper command**:
30
+
31
+
```
32
+
[npm/yarn/pnpm/bun] add @intergrav/slight.css
33
+
```
34
+
35
+
## what exactly does it change?
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
45
+
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).
47
+
48
+
## can i see what it looks like?
49
+
50
+
yes! there is a demo available at [slightcss.devins.page](https://slightcss.devins.page). keep in mind that it may look different depending on the browser you use.
51
+
52
+
## difference between this and dev.css?
53
+
54
+
i maintain and use both, but this is a much more simple alternative to dev.css 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.
+146
demo.html
+146
demo.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<title>slight.css</title>
7
+
<link rel="stylesheet" href="slight.css" />
8
+
</head>
9
+
<body>
10
+
<header>
11
+
<h1>slight.css</h1>
12
+
<nav>
13
+
<ul>
14
+
<li>
15
+
<a href="https://npmjs.com/package/@intergrav/slight.css">npm</a>
16
+
</li>
17
+
<li>
18
+
<a href="https://github.com/intergrav/slight.css">git</a>
19
+
</li>
20
+
<li>
21
+
<a href="https://github.com/intergrav/slight.css/issues">issues</a>
22
+
</li>
23
+
</ul>
24
+
</nav>
25
+
</header>
26
+
<p>
27
+
<strong>slight.css</strong> is an incredibly simple CSS stylesheet that
28
+
adds some <em>slight</em> enhancements on top of the default user agent
29
+
stylesheet.
30
+
</p>
31
+
<p>
32
+
it aims to provide a more pleasant reading experience while relying mostly
33
+
on native browser styles. things such as background and text colors are
34
+
chosen by the browser.
35
+
</p>
36
+
<p>
37
+
this can be used as a good baseline for any web project, or as-is for a
38
+
super barebones website.
39
+
</p>
40
+
<p>
41
+
the page that you are currently viewing is using slight.css as its
42
+
stylesheet.
43
+
</p>
44
+
<h2>how do i use it?</h2>
45
+
<h3>html import</h3>
46
+
<p>Place this somewhere in your <code>head</code>:</p>
47
+
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1"></code></pre>
48
+
<h3>css import</h3>
49
+
<p>Place this somewhere in your stylesheet:</p>
50
+
<pre><code>@import url(https://cdn.jsdelivr.net/npm/@intergrav/slight.css@1);</code></pre>
51
+
<h3>npm package</h3>
52
+
<p>
53
+
Run this in your terminal,
54
+
<strong>replacing with the proper command</strong>:
55
+
</p>
56
+
<pre><code>[npm/yarn/pnpm/bun] add @intergrav/slight.css</code></pre>
57
+
<h2>what exactly does it change?</h2>
58
+
<ol>
59
+
<li>
60
+
automatically adjusts the color scheme based on system preferences
61
+
</li>
62
+
<li>uses the default system sans-serif/monospace fonts</li>
63
+
<li>sets a maximum width for the body content on widescreen viewports</li>
64
+
<li>increases line height and changes tab size</li>
65
+
<li>
66
+
adds borders and padding to table elements for better spacing and
67
+
clarity
68
+
</li>
69
+
<li>
70
+
adds a border to inline code and code blocks for better readability
71
+
</li>
72
+
<li>makes blockquotes look a bit nicer with a border and padding</li>
73
+
<li>displays lists in nav horizontally when placed in header</li>
74
+
</ol>
75
+
<p>
76
+
keep in mind that mostly relying on the user agent stylesheet means that
77
+
things could possibly look different on other browsers. for certain
78
+
projects, this may matter, and you might want to look into using a CSS
79
+
reset/normalize stylesheet such as
80
+
<a href="https://github.com/sindresorhus/modern-normalize"
81
+
>modern-normalize</a
82
+
>.
83
+
</p>
84
+
<h2>demo elements</h2>
85
+
<h3>blockquote</h3>
86
+
<blockquote cite="https://example.com">
87
+
<p>
88
+
congue ex inceptos ut est gravida purus. convallis suspendisse mattis
89
+
porta metus mus nisl ad ante eros inceptos. iaculis convallis gravida
90
+
odio venenatis ut velit. fames non nunc sollicitudin dictumst litora
91
+
natoque consectetur erat. fermentum mattis arcu quam sociosqu libero
92
+
tincidunt pellentesque rutrum. pulvinar per habitasse fusce nec bibendum
93
+
tempor natoque efficitur si.
94
+
</p>
95
+
<footer>— <cite>a really cool person</cite></footer>
96
+
</blockquote>
97
+
<h3>table</h3>
98
+
<table>
99
+
<caption>
100
+
table caption
101
+
</caption>
102
+
<thead>
103
+
<tr>
104
+
<th>header 1</th>
105
+
<th>header 2</th>
106
+
<th>header 3</th>
107
+
</tr>
108
+
</thead>
109
+
<tbody>
110
+
<tr>
111
+
<td>row 1</td>
112
+
<td>row 1</td>
113
+
<td>row 1</td>
114
+
</tr>
115
+
<tr>
116
+
<td>row 2</td>
117
+
<td>row 2</td>
118
+
<td>row 2</td>
119
+
</tr>
120
+
</tbody>
121
+
</table>
122
+
<h3>code</h3>
123
+
<p>
124
+
this is normal text, while this is <code>inline code</code> marked with
125
+
code tag.
126
+
</p>
127
+
<h3>code block (pre+code)</h3>
128
+
<pre><code>this is a code block
129
+
this is a line of code, indented with tab
130
+
this is another line of code, indented with tab
131
+
beep boop</code></pre>
132
+
<h2>difference between this and dev.css?</h2>
133
+
<p>
134
+
i maintain and use both, but this is a much more simple alternative to
135
+
dev.css that mainly focuses on improving default user agent stylesheets
136
+
rather than having a full custom set of styles. slight.css is more limited
137
+
as it has less built-in element styles and doesn't have custom theme
138
+
support (although you can apply your own stylesheets on top). it may also
139
+
be less consistent across browsers.
140
+
</p>
141
+
<a href="https://devins.page"
142
+
><img
143
+
src="https://raw.githubusercontent.com/intergrav/branding/refs/heads/main/personal/badge.svg"
144
+
/></a>
145
+
</body>
146
+
</html>
+26
package.json
+26
package.json
···
1
+
{
2
+
"name": "@intergrav/slight.css",
3
+
"version": "1.0.0",
4
+
"description": "minimal enhancements for the user agent stylesheet",
5
+
"keywords": [
6
+
"css",
7
+
"stylesheet",
8
+
"framework",
9
+
"classless",
10
+
"minimal",
11
+
"lightweight",
12
+
"open-source"
13
+
],
14
+
"homepage": "https://slightcss.devins.page",
15
+
"bugs": {
16
+
"url": "https://github.com/intergrav/slight.css/issues"
17
+
},
18
+
"license": "MIT",
19
+
"author": "intergrav <intergrav@proton.me> (https://devins.page)",
20
+
"files": [],
21
+
"main": "slight.css",
22
+
"repository": "github:intergrav/slight.css",
23
+
"prettier": {
24
+
"useTabs": true
25
+
}
26
+
}
+107
slight.css
+107
slight.css
···
1
+
/* slight.css |
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
5
+
*/
6
+
7
+
/* toc |
8
+
1. variables
9
+
2. typography
10
+
3. elements
11
+
4. remove max-width when printing
12
+
*/
13
+
14
+
/* 1. variables */
15
+
16
+
:root {
17
+
/* customizable variables - you may change these as you wish */
18
+
--sc-font: system-ui, sans-serif;
19
+
--sc-font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
20
+
Consolas, "DejaVu Sans Mono", monospace;
21
+
/* unsafe variables - not recommended to customize, may be removed or changed in the future */
22
+
color-scheme: light dark;
23
+
--sc-emphasizebd: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
24
+
--sc-emphasizebg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
25
+
}
26
+
27
+
/* 2. typography */
28
+
29
+
html {
30
+
font-family: var(--sc-font);
31
+
line-height: 1.5;
32
+
tab-size: 4;
33
+
}
34
+
35
+
body {
36
+
max-width: 48rem;
37
+
margin: auto;
38
+
padding: 1rem;
39
+
}
40
+
41
+
code,
42
+
kbd,
43
+
samp,
44
+
pre {
45
+
font-family: var(--sc-font-mono);
46
+
font-size: 0.9rem;
47
+
}
48
+
49
+
/* 3. elements */
50
+
51
+
table {
52
+
border-collapse: collapse;
53
+
}
54
+
55
+
th,
56
+
td {
57
+
border: 1px solid var(--sc-emphasizebd);
58
+
padding: 0.25rem 0.5rem;
59
+
}
60
+
61
+
thead tr,
62
+
tbody tr:nth-child(even) {
63
+
background-color: var(--sc-emphasizebg);
64
+
}
65
+
66
+
:not(pre) > code,
67
+
:not(pre) > samp,
68
+
:not(pre) > kbd,
69
+
pre {
70
+
background-color: var(--sc-emphasizebg);
71
+
}
72
+
73
+
pre {
74
+
overflow-x: auto;
75
+
max-width: 100%;
76
+
padding: 0.5rem;
77
+
}
78
+
79
+
blockquote {
80
+
border-left: 4px solid var(--sc-emphasizebd);
81
+
padding-left: 1rem;
82
+
margin-left: 0;
83
+
}
84
+
85
+
header nav ul {
86
+
display: flex;
87
+
flex-wrap: wrap;
88
+
list-style: none;
89
+
padding: 0;
90
+
}
91
+
92
+
header nav ul li:not(:first-child)::before {
93
+
content: "•";
94
+
margin: 0 0.25em;
95
+
}
96
+
97
+
header nav ul li {
98
+
margin: 0;
99
+
display: flex;
100
+
}
101
+
102
+
/* 4. remove max-width when printing */
103
+
@media print {
104
+
body {
105
+
max-width: revert;
106
+
}
107
+
}