slight enhancements for the user agent stylesheet
slightcss.devins.page
css
stylesheet
framework
lightweight
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
5it 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
7this 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
13place 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
21place 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
29run 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
371. automatically adjusts the color scheme based on system preferences
382. uses the default system sans-serif/monospace fonts
393. sets a maximum width for the body content on widescreen viewports (reverted when printing)
404. increases line height and changes tab size
415. adds borders and padding to table elements for better spacing and clarity
426. adds a border to inline code and code blocks for better readability
437. makes blockquotes look a bit nicer with a border and padding
448. displays lists in nav horizontally when placed in header
45
46keep 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
50yes! 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
54i 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.