13

A classless CSS framework to write modern websites using only HTML

 3 years ago
source link: https://github.com/xz/new.css
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

new.css

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 .

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

Here's your configuration:

  1. Add <link rel="stylesheet" href="https://newcss.net/new.min.css"> to your <head> .
  2. Done.

:bulb: 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
  • 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 a CSS variable in the :root attribute.

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

  1. Create a stylesheet including some or all of the above variables in the :root . An example theme file is available here: boilerplate.css
  2. 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 .
  3. 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>

Pre-Made Themes

Here are two extra themes with CDN links. Feel free to use or edit them!

Night

<link rel="stylesheet" href="https://newcss.net/theme/night.css">

Preview at newcss.net/theme/night/

y2Izym7.png!web

Terminal

<link rel="stylesheet" href="https://newcss.net/theme/terminal.css">

Preview at newcss.net/theme/terminal/

ANB3QnA.png!web

Special Thanks


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK