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/blog.
place this somewhere in your <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/slight.css@3">
place this somewhere in your stylesheet:
@import url(https://cdn.jsdelivr.net/npm/@intergrav/slight.css@3);
run this in your terminal, replace with the proper command:
[npm/yarn/pnpm/bun] add @intergrav/slight.css
- automatically adjusts the color scheme based on system preferences
- uses the default system sans-serif/monospace fonts
- sets a maximum width for the body content on widescreen viewports
- increases line height and changes tab size
- opt-in styles for elements in containers with
proseclass:- sets 100% maximum width for images, videos, and iframes
- adds a background to inline code and code blocks for better readability
- adds borders and padding to table elements for better spacing and clarity
- 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 minimal. if you need a normalization stylesheet, i recommend using modern-normalize.
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.
yes! there is a demo available at slightcss.devins.page. keep in mind that it may look different depending on the browser you use.
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.