slight enhancements for the user agent stylesheet
slightcss.devins.page
devins.page
css
stylesheet
framework
lightweight
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 <meta
8 name="description"
9 content="slight enhancements for the user agent stylesheet"
10 />
11 <meta
12 name="keywords"
13 content="css, stylesheet, framework, classless, minimal, lightweight, open-source"
14 />
15 <meta name="author" content="intergrav" />
16 <meta name="robots" content="index, follow" />
17 <link rel="stylesheet" href="slight.css" />
18 </head>
19 <body>
20 <header>
21 <h1>slight.css</h1>
22 <nav>
23 <a href="https://npmjs.com/package/@intergrav/slight.css">npm</a> •
24 <a href="https://tangled.org/devins.page/slight.css">git</a> •
25 <a href="https://tangled.org/devins.page/slight.css/issues">issues</a>
26 </nav>
27 </header>
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@3"></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@3);</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>
89 <p>
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
106 href="https://tangled.org/devins.page/slight.css/blob/main/index.html"
107 >index.html</a
108 >
109 for an example of it's usage.
110 </p>
111 <h3>blockquote</h3>
112 <blockquote cite="https://example.com">
113 <p>
114 congue ex inceptos ut est gravida purus. convallis suspendisse mattis
115 porta metus mus nisl ad ante eros inceptos. iaculis convallis gravida
116 odio venenatis ut velit. fames non nunc sollicitudin dictumst litora
117 natoque consectetur erat. fermentum mattis arcu quam sociosqu libero
118 tincidunt pellentesque rutrum. pulvinar per habitasse fusce nec
119 bibendum tempor natoque efficitur si.
120 </p>
121 <footer>— <cite>a really cool person</cite></footer>
122 </blockquote>
123 <blockquote>
124 <p>this is a blockquote without a citation.</p>
125 <blockquote>
126 <p>this is a nested blockquote.</p>
127 </blockquote>
128 </blockquote>
129 <h3>table</h3>
130 <table>
131 <caption>
132 table caption
133 </caption>
134 <thead>
135 <tr>
136 <th>header 1</th>
137 <th>header 2</th>
138 <th>header 3</th>
139 </tr>
140 </thead>
141 <tbody>
142 <tr>
143 <td>row 1</td>
144 <td>row 1</td>
145 <td>row 1</td>
146 </tr>
147 <tr>
148 <td>row 2</td>
149 <td>row 2</td>
150 <td>row 2</td>
151 </tr>
152 </tbody>
153 </table>
154 <h3>code</h3>
155 <p>
156 this is normal text, while this is <code>inline code</code> marked with
157 code tag.
158 </p>
159 <h3>code block (pre+code)</h3>
160 <pre><code>this is a code block
161 this is a line of code, indented with tab
162 this is another line of code, indented with tab
163beep boop</code></pre>
164 <h2>difference between this and dev.css?</h2>
165 <p>
166 i maintain and use both, but this is a much more simple alternative to
167 <a href="https://devcss.devins.page">dev.css</a> that mainly focuses on
168 improving default user agent stylesheets rather than having a full
169 custom set of styles. it doesn't have custom theme support (although you
170 can apply your own stylesheets on top). it may also be less consistent
171 across browsers. another difference is that dev.css is classless, while
172 slight.css contains a <code>prose</code> class.
173 </p>
174 <a href="https://devins.page"
175 ><img
176 src="https://raw.githubusercontent.com/intergrav/branding/refs/heads/main/personal/badge.svg"
177 /></a>
178 </main>
179 <footer>
180 <p>
181 slight.css and this website was written by
182 <a href="https://devins.page">intergrav</a>
183 </p>
184 </footer>
185 </body>
186</html>