new.css

This site is made from vanilla HTML and the default new.css theme. View Source

A classless CSS framework to write modern websites using only HTML. It weighs~4.5kb.

View a demo here, or the quick-start guide here.

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.

Usage
Use Cases
Details
Themes
- Customizing
- Legend
- Usage
Pre-made Themes
- Night
- Terminal
Special Thanks

Usage

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.

Use Cases

A dead-simple blog
Collecting your most used links
Making a simple "about me" site
Rendering markdown-generated HTML

Details

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
header
- Makes a screen-wide slightly darker header bar. Only use at the top of the <body>!
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
table
- Basic styling to make cells more discernable
  - Border stroke across all cells
  - Alternating row background color

Themes

new.css uses an 10-color palette and can be easily customized. These are declared as CSS variables in the :root attribute.

💡 Both new.min.css and lite.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.

Customizing

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;
}

Legend

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

Usage

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>