new.css

https://github.com/xz/new.css
Admin
new.css is a lightweight, classless CSS framework designed to write modern, clean websites and...
Tokens:2,954
Snippets:38
Trust Score:6.8
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Shell: Install new.css via npm

Source: https://github.com/xz/new.css/blob/main/README.md

Install new.css using npm.

```shell
npm i @exampledev/new.css
```

--------------------------------

### Example HTML Head with Custom Theme

Source: https://github.com/xz/new.css/wiki/Customizing-Themes

An example <head> element showing how to reference a custom theme stylesheet after new.css. The custom stylesheet must be loaded after new.css to override the variables.

```html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">">
    <link rel="stylesheet" href="https://example.com/MY-CUSTOM-THEME.css">
</head>
```

--------------------------------

### Shell: Install new.css via Yarn

Source: https://github.com/xz/new.css/blob/main/README.md

Install new.css using Yarn.

```shell
yarn add @exampledev/new.css
```

--------------------------------

### Header example with title and navigation

Source: https://github.com/xz/new.css/wiki/Semantic-Elements

Use this header at the top of the body to display a title, navigation, or other accessible information. It has a slightly darker background and spans the full page width, while its contents align with the page's content width.

```html
<header>
  <h1>new.css</h1>
  <nav>
    <a href="https://newcss.net">Home</a> / <a href="https://github.com/xz/new.css">GitHub</a> / <a href="https://discord.gg/hhuuC4w">Discord</a>
  </nav>
</header>
```

--------------------------------

### Default Theme CSS Variables

Source: https://github.com/xz/new.css/wiki/Customizing-Themes

The default theme variables for new.css, including light and dark theme colors. Copy and paste this into a new CSS file to start customizing. Omitted variables fall back to defaults.

```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: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

	/* Light theme */
	--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;

	/* Dark theme */
	--nc-d-tx-1: #ffffff;
	--nc-d-tx-2: #eeeeee;
	--nc-d-bg-1: #000000;
	--nc-d-bg-2: #111111;
	--nc-d-bg-3: #222222;
	--nc-d-lk-1: #3291FF;
	--nc-d-lk-2: #0070F3;
	--nc-d-lk-tx: #FFFFFF;
	--nc-d-ac-1: #7928CA;
	--nc-d-ac-tx: #FFFFFF;
}
```

--------------------------------

### HTML: Include new.css via CDN

Source: https://github.com/xz/new.css/blob/main/README.md

Add this line to the end of your HTML's <head> to include new.css from the jsDelivr CDN.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
```

--------------------------------

### Basic HTML document structure

Source: https://github.com/xz/new.css/blob/main/theme/night.html

A minimal HTML document with a title and paragraph content.

```HTML
<!DOCTYPE html>
<html>
    <head>
    <title>Hello World</title>
    </head>
    <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </body>
</html>
```

--------------------------------

### HTML: Include Inter font (recommended)

Source: https://github.com/xz/new.css/blob/main/README.md

Add this line to the end of your HTML's <head> to include the Inter font from fonts.xz.style. Recommended for better typography.

```html
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
```
Tokens:
Raw