New.css
A classless CSS framework to write modern websites using only HTML.
Install / Use
/learn @xz/New.cssREADME
new.css
new.css
A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb.
All it does is set some sensible defaults and styles your HTML to look reasonable. It's perfect for:
- A dead-simple blog
- Collecting your most used links
- Making a simple "about me" site
- Rendering markdown-generated HTML
Demo: newcss.net
Table of Contents
- Usage
- Themes
- Theme Library
- Customizing Themes
- FAQ
- Made with new.css
- Sponsors
- Support
Usage
HTML
Add this line to the end of your HTML's <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
If you'd like the font Inter as well (recommended), add this line as well:
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
npm
npm i @exampledev/new.css
Yarn
yarn add @exampledev/new.css
Themes
new.css uses a color palette that can be easily customized. These are declared as a CSS variable in the :root attribute.
Theme Library
See pre-made themes at newcss.net/themes.
Customizing Themes
Information is available on the wiki.
FAQ
Why should I use this instead of (popular framework)?
new.css wasn't made to be a true framework. It's made for rapidly prototyping your raw HTML or setting up a good-looking simple HTML site with zero configuration.
Does this work with (platform/service)?
new.css was designed to work with nothing but raw HTML, but some awesome community members are porting it to other platforms.
Check if your platform or service supports custom CSS. If it does, it'll probably work. You're welcome to ask the community as well.
Sponsors
- <a href="https://domaincord.org/?utm_source=xz&utm_campaign=new.css">Domaincord</a> (also a domain name discussion group <a href="https://discord.gg/239EP7G">here</a>!)
- <a href="https://vercel.com/?utm_source=xz&utm_campaign=new.css">Vercel</a>
Special Thanks
- sakura by oxal for introducing me to classless CSS
- mydarkstar for priceless advice
- Vercel for sponsoring xz and for their amazing color palettes
<a href="https://vercel.com?utm_source=xz&utm_campaign=new.css" target="_blank"><img src="https://vercel-badges.now.sh/powered-by-vercel.svg" alt="Powered by Vercel"></a>
