slight enhancements for the user agent stylesheet
slightcss.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 <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>
34 </nav>
35 </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">
96 <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.
103 </p>
104 <footer>— <cite>a really cool person</cite></footer>
105 </blockquote>
106 <blockquote>
107 <p>this is a blockquote without a citation.</p>
108 <blockquote>
109 <p>this is a nested blockquote.</p>
110 </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
144 this is a line of code, indented with tab
145 this is another line of code, indented with tab
146beep 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>
175 <footer>
176 <p>
177 slight.css and this website was written by
178 <a href="https://devins.page">intergrav</a>
179 </p>
180 </footer>
181 </body>
182</html>