new.css

<p>A classless CSS framework to write modern websites using only HTML. It weighs<strong>~4.5kb</strong>.</p>

<p><strong>View a demo <a href="https://newcss.net/demo/" style="color: inherit; text-decoration: none;" name="readabilityLink-5">here</a><a href="#readabilityFootnoteLink-5" class="readability-DoNotFootnote" style="color: inherit;"><small>^[5]</small></a>, or the quick-start guide <a href="https://newcss.net/quickstart/" style="color: inherit; text-decoration: none;" name="readabilityLink-6">here</a><a href="#readabilityFootnoteLink-6" class="readability-DoNotFootnote" style="color: inherit;"><small>^[6]</small></a>.</strong></p>

<p>And of course, there's a dark mode. It automatically applies a light/dark theme based on your browser's preference.</p>

<p>It supports custom color themes and fonts using CSS variables. For example, check out the terminal theme: <a href="https://newcss.net/theme/terminal/" style="color: inherit; text-decoration: none;" name="readabilityLink-10">newcss.net/theme/terminal/</a><a href="#readabilityFootnoteLink-10" class="readability-DoNotFootnote" style="color: inherit;"><small>^[10]</small></a></p>

<p>new.css is a project from <a href="https://xz.style">xz</a>.</p>

<br/><h2 id="table-of-contents">Table of Contents</h2>

<br/><h2 id="usage">Usage</h2>

<p>Here's your configuration:</p>

<ol><li>Add <code>&lt;link rel="stylesheet" href="https://newcss.net/new.min.css"&gt;</code> to your <code>&lt;head&gt;</code>.</li>
<li>Done.</li>
</ol><blockquote readability="7">
<p>💡 Use the code <code>&lt;link rel="stylesheet" href="https://newcss.net/lite.css"&gt;</code> for the lite version, which uses the system font stack rather than importing one.</p>
</blockquote>

<br/><h2 id="use-cases">Use Cases</h2>

<ul><li>A dead-simple blog</li>
<li>Collecting your most used links</li>
<li>Making a simple "about me" site</li>
<li>Rendering markdown-generated HTML</li>
</ul><br/><h2 id="details">Details</h2>

<p>Here are the improvements new.css adds to your browser's basic HTML.</p>

<details><summary>Full Changes</summary><ul><li><strong>Global</strong>
<ul><li>Slightly increase all text sizes</li>
<li>Use a less harsh color scheme</li>
<li>Use the Inter font, and if not possible, the system font</li>
<li>Redefine all margins to more sensible defaults</li>
</ul></li>
<li><code>body</code>
<ul><li>Set a reasonable max width</li>
<li>Centered the body element, keeping left-alignment</li>
</ul></li>
<li><code>abbr</code>
<ul><li>Question mark cursor on hover</li>
</ul></li>
<li><code>blockquote</code>
<ul><li>Improved margins</li>
<li>Added background color</li>
</ul></li>
<li><code>button</code>
<ul><li>Appears uniformly across browsers</li>
<li>Looks like a real button</li>
</ul></li>
<li><code>code</code>
<ul><li>Added background color</li>
<li>Added outline stroke</li>
</ul></li>
<li><code>details</code>
<ul><li>Looks more button-like with background color and link cursor
on hover</li>
</ul></li>
<li><code>h1</code>–<code>h6</code>
<ul><li>Uniform margins and padding</li>
<li>Tweaked font size</li>
</ul></li>
<li><code>h1-h3</code>
<ul><li>Added thin bottom border line</li>
</ul></li>
<li><code>header</code>
<ul><li>Makes a screen-wide slightly darker header bar. Only use at the top of the <code>&lt;body&gt;</code>!</li>
</ul></li>
<li><code>hr</code>
<ul><li>Changed to single 1px line</li>
</ul></li>
<li><code>kbd</code>
<ul><li>Looks like a real keyboard key</li>
</ul></li>
<li><code>mark</code>
<ul><li>Added padding</li>
<li>Color follows theme</li>
</ul></li>
<li><code>nav</code>
<ul><li>Added between-element margins</li>
</ul></li>
<li><code>samp</code>
<ul><li>Ambiguous element, merged with <code>code</code></li>
</ul></li>
<li><code>table</code>
<ul><li>Basic styling to make cells more discernable
<ul><li>Border stroke across all cells</li>
<li>Alternating row background color</li>
</ul></li>
</ul></li>
</ul></details><br/><h2 id="themes">Themes</h2>

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

<blockquote readability="7">
<p>💡 Both <code>new.min.css</code> and <code>lite.css</code> have support for custom themes. <code>lite</code> doesn't import the font Inter by default, so it is recommended if you are using a custom font.</p>
</blockquote>

<h3 id="customizing">Customizing</h3>

<p>By loading a secondary style sheet after new.css in your HTML, you can override these variables. Here's the default theme:</p>

<details readability="22"><summary>Default theme</summary><pre>
@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;
}</pre>
</details><h3 id="legend">Legend</h3>

<ul><li><code>--nc-font-sans</code>: Font for all text besides code or
preformatted</li>
<li><code>--nc-font-mono</code>: Font for <code>&lt;code&gt;</code>, <code>&lt;pre&gt;</code>,
<code>&lt;kbd&gt;</code>, <code>&lt;samp&gt;</code></li>
<li><code>--nc-tx-1</code>: Heading text color</li>
<li><code>--nc-tx-2</code>: Body text color</li>
<li><code>--nc-bg-1</code>: Base background color</li>
<li><code>--nc-bg-2</code>: Slightly darker background color</li>
<li><code>--nc-bg-3</code>: Even slightly darker background color</li>
<li><code>--nc-lk-1</code>: Action color for links and buttons</li>
<li><code>--nc-lk-2</code>: Link and buttons on mouse hover and active</li>
<li><code>--nc-ac-1</code>: Accent color for <code>&lt;mark&gt;</code> and
text selection background</li>
</ul><h3 id="usage">Usage</h3>

<ol readability="-0.48139158576052"><li>Create a stylesheet including some or all of the above variables in the <code>:root</code>. An example theme file is available here: <a href="https://newcss.net/theme/boilerplate.css" style="color: inherit; text-decoration: none;" name="readabilityLink-11">boilerplate.css</a><a href="#readabilityFootnoteLink-11" class="readability-DoNotFootnote" style="color: inherit;"><small>^[11]</small></a></li>

<li>If you'd like to import custom fonts, put the <code>@import</code> tag before the <code>:root</code> element. Many open-source fonts are available on <a href="https://github.com/xz/fonts" style="color: inherit; text-decoration: none;" name="readabilityLink-12">xz/fonts</a><a href="#readabilityFootnoteLink-12" class="readability-DoNotFootnote" style="color: inherit;"><small>^[12]</small></a>.</li>

<li readability="2">Reference your new stylesheet <strong>after</strong> new.css in your <code>&lt;head&gt;</code>. Here's an example <code>&lt;head&gt;</code>:
<pre>
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;link rel="stylesheet" href="https://newcss.net/lite.css"&gt;
&lt;link rel="stylesheet" href="https://example.com/MY-CUSTOM-THEME.css"&gt;
&lt;/head&gt;</pre>
</li>
</ol><br/><h2 id="pre-made-themes">Pre-Made Themes</h2>

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

<h3 id="night">Night</h3>

<p>Night theme is enabled by default if your browser is set to prefer dark themes. Using the theme link below makes it use night theme regardless.</p>

<code>&lt;link rel="stylesheet" href="https://newcss.net/theme/night.css"&gt;</code>

<p>Preview at <a href="https://newcss.net/theme/night/" style="color: inherit; text-decoration: none;" name="readabilityLink-13">newcss.net/theme/night/</a><a href="#readabilityFootnoteLink-13" class="readability-DoNotFootnote" style="color: inherit;"><small>^[13]</small></a></p>

<br/><h2>Sponsors</h2>

<h2 id="special-thanks">Special Thanks</h2>

<br/><hr/><p>We collect totally anonymous basic analytics using Simple Analytics. View live analytics at <a href="https://simpleanalytics.com/newcss.net" style="color: inherit; text-decoration: none;" name="readabilityLink-15">simpleanalytics.com/newcss.net</a><a href="#readabilityFootnoteLink-15" class="readability-DoNotFootnote" style="color: inherit;"><small>^[15]</small></a>.</p>