New CSS – A Classless CSS Framework to Write HTML-only Websites
newcss.net / xz Discord / Twitter A classless CSS framework to write modern websites using only HTML. It weighs ~4.5kb. Take a look at the demo on newcss.net, or the quick-start guide on newcss.net/quickstart. It’s on npm as @exampledev/new.css. Vercel‘s impossibly fast CDN delivers new.css and the font Inter using xz/fonts, so there’s virtually no bloat added to your pages. And of course, there’s a dark mode. It automatically applies a light/dark theme based on your browser’s preference. It supports custom color themes and fonts using CSS variables. For example, check out the terminal theme: newcss.net/theme/terminal/ new.css is a project from xz. Table of Contents Usage Use Cases Details Themes Customizing Legend Usage Pre-made Themes Night Terminal Special Thanks Usage Here’s your configuration: Add to your . Done. 💡 Use the code for the lite version, which uses the system font stack rather than importing one. Or, if you prefer npm: npm -i @exampledev/new.css Use Cases A dead-simple blog Collecting your most used links Making a simple “about me” site Rendering markdown-generated HTML Details Element Guide How to use some of new.css’ semantic HTML features. button Wrap a button in an tag to make it a link. Code For inline code, use . For code blocks, use . For keyboard input, use , There’s no reason to nest code tags inside each other, however, and will reset themselves to match if you nest them. header Only use a at the top of your ! Creates a large and slightly darker header. Here are the improvements new.css adds to your browser’s basic HTML. Full Changes Global Slightly increase all text sizes Use a less harsh color scheme Use the Inter font, and if not possible, the system font Redefine all margins to more sensible defaults body Set a reasonable max width Centered the body element, keeping left-alignment abbr Question mark cursor on hover blockquote Improved margins Added background color button Appears uniformly across browsers Looks like a real button code Added background color Added outline stroke details Looks more button-like with background color and link cursor on hover h1–h6 Uniform margins and padding Tweaked font size h1-h3 Added thin bottom border line hr Changed to single 1px line kbd Looks like a real keyboard key mark Added padding Color follows theme nav Added between-element margins samp Ambiguous element, » Read More
Like to keep reading?
This article first appeared on github.com. If you'd like to keep reading, follow the white rabbit.