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.
Here's your configuration:
- Add
<link rel="stylesheet" href="https://newcss.net/new.min.css">
to your<head>
. - Done.
💡 Use the code
<link rel="stylesheet" href="https://newcss.net/lite.css">
for the lite version, which uses the system font stack rather than importing one.
Or, if you prefer npm:
npm -i @exampledev/new.css
- A dead-simple blog
- Collecting your most used links
- Making a simple "about me" site
- Rendering markdown-generated HTML
How to use some of new.css' semantic HTML features.
button
- Wrap a button in an
<a>
tag to make it a link.
- Wrap a button in an
- Code
- For inline code, use
<code>
. - For code blocks, use
<pre>
. - For keyboard input, use
<kbd>
, - There's no reason to nest code tags inside each other, however,
<code>
and<pre>
will reset themselves to match if you nest them.
- For inline code, use
header
- Only use a
<header>
at the top of your<body>
! - Creates a large and slightly darker header.
- Only use a
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, merged with
code
- Ambiguous element, merged with
table
- Basic styling to make cells more discernable
- Border stroke across all cells
- Alternating row background color
- Basic styling to make cells more discernable
new.css uses an 10-color palette and can be easily customized. These are declared as a CSS variable in the :root
attribute.
💡 Both
new.min.css
andlite.css
have support for custom themes.lite
doesn't import the font Inter by default, so it is recommended if you are using a custom font.
By loading a secondary style sheet after new.css in your HTML, you can override these variables. Here's the default theme:
Default theme
@import url('https://fonts.xz.style/serve/inter.css');
:root {
--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--nc-font-mono: 'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace;
--nc-tx-1: #000000;
--nc-tx-2: #1A1A1A;
--nc-bg-1: #FFFFFF;
--nc-bg-2: #F6F8FA;
--nc-bg-3: #E5E7EB;
--nc-lk-1: #0070F3;
--nc-lk-2: #0366D6;
--nc-lk-tx: #FFFFFF;
--nc-ac-1: #79FFE1;
--nc-ac-tx: #0C4047;
}
--nc-font-sans
: Font for all text besides code or preformatted--nc-font-mono
: Font for<code>
,<pre>
,<kbd>
,<samp>
--nc-tx-1
: Heading text color--nc-tx-2
: Body text color--nc-bg-1
: Base background color--nc-bg-2
: Slightly darker background color--nc-bg-3
: Even slightly darker background color--nc-lk-1
: Action color for links and buttons--nc-lk-2
: Link and buttons on mouse hover and active--nc-ac-1
: Accent color for<mark>
and text selection background
- Create a stylesheet including some or all of the above variables in the
:root
. An example theme file is available here: boilerplate.css - If you'd like to import custom fonts, put the
@import
tag before the:root
element. Many open-source fonts are available on xz/fonts. - Reference your new stylesheet after new.css in your
<head>
. Here's an example<head>
:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://newcss.net/lite.css">
<link rel="stylesheet" href="https://example.com/MY-CUSTOM-THEME.css">
</head>
Here are two extra themes with CDN links. Feel free to use or edit them!
<link rel="stylesheet" href="https://newcss.net/theme/night.css">
Preview at newcss.net/theme/night/
<link rel="stylesheet" href="https://newcss.net/theme/terminal.css">
Preview at newcss.net/theme/terminal/
- Domaincord (also a domain name discussion group here!)
- Vercel
- sakura by oxal for introducing me to classless CSS
- mydarkstar for priceless advice
- Vercel for sponsoring xz and for their amazing color palettes