new.css

Open Link
new.css
This site is made from vanilla HTML and the default new.css theme. View Source[4]

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

View a demo here[5], or the quick-start guide here[6].

Vercel[7]'s impossibly fast CDN delivers new.css and the font Inter[8] using xz/fonts[9], 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/[10]

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.

๐Ÿ’ก 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

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

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.

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

Preview at newcss.net/theme/night/[13]

Night theme

Terminal

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

Preview at newcss.net/theme/terminal/[14]

Terminal theme


Sponsors

Special Thanks


We collect totally anonymous basic analytics using Simple Analytics. View live analytics at simpleanalytics.com/newcss.net[15].


Powered by Vercel

References

  1. ^ Home (newcss.net)
  2. ^ GitHub (github.com)
  3. ^ Discord (discord.gg)
  4. ^ View Source (github.com)
  5. ^ here (newcss.net)
  6. ^ here (newcss.net)
  7. ^ Vercel (vercel.com)
  8. ^ Inter (rsms.me)
  9. ^ xz/fonts (github.com)
  10. ^ newcss.net/theme/terminal/ (newcss.net)
  11. ^ boilerplate.css (newcss.net)
  12. ^ xz/fonts (github.com)
  13. ^ newcss.net/theme/night/ (newcss.net)
  14. ^ newcss.net/theme/terminal/ (newcss.net)
  15. ^ simpleanalytics.com/newcss.net (simpleanalytics.com)
keywords newcss,new.css,css,xz,css framework,classless css,xz.style

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in webdev
Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: โš ๏ธ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons ยท Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap ยท The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark! Responsive Web Design Online Testing - isResponsive Trianglify.io ยท Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection |ย Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io ยท Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic โ™ฅ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers โ€” LowEndTalk Featherlight โ€“ The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a ๐ŸŒžwhite/๐ŸŒ‘dark theme easily - DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves โ€“ Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! โ€“ SVG + Blend Mode trick You Might Not Need jQuery CSS Wave Animation with a .png
Other Categories in Linx
ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube
Search Linx
Search Linx by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. โ˜•

โค๏ธ๐Ÿ‘ฉโ€๐Ÿ’ป๐ŸŽฎ

๐Ÿชฆ 2000 - 16 Oct 2022 - Boots
Random Quote
Most people can do absolutely awe-inspiring things,โ€ he said. โ€œSometimes they just need a little nudge.
Unknown
Random CSS Property

<percentage>

The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.
<percentage> css reference