slight.css

slight.css is an incredibly simple CSS stylesheet that adds some slight enhancements on top of the default user agent stylesheet.

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.

this can be used as a good baseline for any web project, or as-is for a super barebones website.

the page that you are currently viewing is using slight.css as its stylesheet.

how do i use it?

html import

place this somewhere in your head:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/slight.css@3">

css import

place this somewhere in your stylesheet:

@import url(https://cdn.jsdelivr.net/npm/@intergrav/slight.css@3);

npm package

run this in your terminal, replacing with the proper command:

[npm/yarn/pnpm/bun] add @intergrav/slight.css

what exactly does it change?

1. automatically adjusts the color scheme based on system preferences
2. uses the default system sans-serif/monospace fonts
3. sets a maximum width for the body content on widescreen viewports
4. increases line height and changes tab size
5. opt-in styles for elements in containers with prose class:
   1. sets 100% maximum width for images, videos, and iframes
   2. adds a background to inline code and code blocks for better readability
   3. adds borders and padding to table elements for better spacing and clarity
   4. makes blockquotes look a bit nicer with a border and padding

keep in mind that this is not a CSS reset or normalization stylesheet. it simply adds some better defaults with the aim of being as minimal as possible. if you need a normalization stylesheet, i recommend using modern-normalize.

prose elements

slight.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 for an example of it's usage.

blockquote

congue ex inceptos ut est gravida purus. convallis suspendisse mattis porta metus mus nisl ad ante eros inceptos. iaculis convallis gravida odio venenatis ut velit. fames non nunc sollicitudin dictumst litora natoque consectetur erat. fermentum mattis arcu quam sociosqu libero tincidunt pellentesque rutrum. pulvinar per habitasse fusce nec bibendum tempor natoque efficitur si.

this is a blockquote without a citation.

this is a nested blockquote.

table

code

this is normal text, while this is inline code marked with code tag.

code block (pre+code)

this is a code block
	this is a line of code, indented with tab
	this is another line of code, indented with tab
beep boop

difference between this and dev.css?

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. 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.