slight enhancements for the user agent stylesheet
slightcss.devins.page
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@3">
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@3);
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
404. increases line height and changes tab size
415. 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
47keep in mind that this is not a CSS reset or normalization stylesheet. it simply adds some better defaults with the aim of being minimal. if you need a normalization stylesheet, i recommend using [modern-normalize](https://github.com/sindresorhus/modern-normalize).
48
49## prose elements
50
51slight.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://tangled.org/devins.page/slight.css/blob/main/index.html) for an example of it's usage.
52
53## can i see what it looks like?
54
55yes! 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.
56
57## difference between this and dev.css?
58
59i 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.