xz/new.css: a 4.8kb classless CSS framework for raw HTML
A classless CSS framework to write modern websites using only HTML.
At a glance
- What is it?
- new.css styles plain HTML without classes, so a hand-written page or markdown output looks presentable with one link tag. The trade-off is that you get no components, no build step and no say in the defaults beyond CSS variables.
- Who is it for?
- Adopt new.css if you are publishing raw HTML or markdown-generated pages and want them styled by a single link tag with no build step. Do not adopt it if you need components, layout grids or per-element classes; the README itself says it was not made to be a true framework.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 27 days ago.
- What is it written in?
- Mainly HTML, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 25, 2026, and from our analysis. They are not legal advice.
Editorial analysis
The problem new.css solves, and who it is actually for
Most CSS frameworks assume you will opt in per element: you add classes to a button, a card, a grid row. That is fine when you control the markup. It is friction when the markup is generated for you, by a markdown converter, a static site generator or a script that emits plain tags. In those cases you either post-process the HTML to inject classes or you accept the browser's default rendering, which is legible but ugly.
new.css takes the second path and fixes the ugliness. It is a classless framework: the README says all it does is "set some sensible defaults and styles your HTML to look reasonable." The intended uses it names are narrow and honest. A dead-simple blog. A page collecting your most used links. An "about me" site. Rendering markdown-generated HTML. If your page is a document rather than an application, that list covers you.
The size claim in the README is 4.8kb. There is no build system to configure, no CLI, no JavaScript runtime. The repository is mostly one file, new.css, plus a demo.html and a theme directory. That flatness is the point: the whole project is a stylesheet you can read end to end.
How a classless stylesheet works: element selectors and :root variables
The mechanism is unglamorous and that is a feature. Instead of matching class names, the stylesheet targets bare element selectors: headings, paragraphs, tables, blockquotes, code, form controls. Any HTML document that uses standard tags inherits the styling automatically. There is no initialization step and nothing to call at runtime.
Theming runs through CSS custom properties. The README states that new.css "uses a color palette that can be easily customized" and that these are "declared as a CSS variable in the :root attribute." That is the whole extension surface: override variables in your own stylesheet loaded after new.css, and every element that references them picks up the change. The repository also ships a theme directory and the site hosts a theme library, with deeper instructions on the project wiki under a page titled Customizing Themes.
The consequence of element selectors is that specificity works against you. If you want one paragraph to look different, you are writing an override with equal or higher specificity, not adding a modifier class. For a single page that is trivial. Across a large site it becomes a pile of overrides, which is the moment you should reconsider whether a classless approach fits.
Installing new.css and styling a first page
The fastest route is the CDN link the README gives. Place it at the end of the head element so it comes after any stylesheets you want it to override. The URL pins major version 1 through the @1 segment in the path.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">After that line loads, an unstyled HTML file should render with the framework's typography and spacing. The README also recommends the Inter font and gives a second link tag for it. Add it alongside the first if you want the intended typeface rather than the system default.
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">If you would rather vendor the file than depend on a CDN, the package is published to npm under the scope @exampledev/new.css. The README lists both npm and Yarn commands.
npm i @exampledev/new.cssNote the naming mismatch, because it trips people up: the npm package is @exampledev/new.css, while the package.json inside the repository declares the name @xz/new.css at version 1.1.3. The repository's own package.json sets "main" to new.css, so a bundler resolving the package gets the source stylesheet, not a minified build. The minified new.min.css referenced in the CDN URL is the artifact the CDN serves.
A first real use looks like this: write a page with a title, a few paragraphs, a list and a table, link the stylesheet, open it in a browser. If the table borders and code blocks look deliberate rather than default, the stylesheet loaded. If everything looks like a plain browser document, the link tag is wrong or the CDN request failed.
Where new.css is the wrong tool
The README answers the framework comparison question directly: new.css "wasn't made to be a true framework. It's made for rapidly prototyping your raw HTML or setting up a good-looking simple HTML site with zero configuration." Treat that as a boundary, not modesty.
There are no components. No modal, no dropdown, no navigation pattern, no grid system, no utility classes for spacing or flex. If your page needs a responsive multi-column layout or interactive states, you are writing that CSS yourself, and at that point the 4.8kb you saved is irrelevant next to the code you are about to author.
There is no JavaScript, so anything requiring behavior (tabs, toggles, client-side validation messaging) is out of scope. There is also no build pipeline, which cuts both ways: nothing to maintain, and nothing to tree-shake, so you ship the full stylesheet whether your page uses tables or not. At 4.8kb that is a rounding error, but it is worth naming as a design choice rather than a free lunch.
Finally, the platform question. The README says new.css "was designed to work with nothing but raw HTML" and that community members are porting it to other platforms, with the advice to check whether your platform supports custom CSS. That is not a guarantee of support for any specific CMS, forum or site builder. If your publishing target does not let you inject a stylesheet link, new.css cannot help you, regardless of how good the defaults are.
How new.css differs from a utility-first framework
The clearest contrast is with class-based frameworks, and the README's own credits point at the lineage: it thanks sakura by oxal "for introducing me to classless CSS." Sakura is the closer sibling, a classless stylesheet with a different visual default and its own variable set. Choosing between them is mostly a question of which default typography and palette you prefer, since both work by styling bare elements.
Against a utility-first framework such as Tailwind, the difference is not cosmetic, it is architectural. A utility framework gives you primitives and expects you to compose them in the markup; the output is verbose HTML and a build step that scans your templates and emits only the classes you used. new.css gives you a finished look and expects you to change nothing in the markup. The first scales to applications and design systems. The second scales to documents. Neither is a substitute for the other, and a project that swaps one for the other is usually solving a different problem than it thinks.
There is a middle option worth naming: a class-light framework like Pico, which styles bare elements but also exposes class hooks for a few components. That gives you new.css's zero-configuration starting point with an escape hatch when one element needs to differ. If you find yourself writing override after override against new.css, that escape hatch is what you are missing.
Maintenance, versioning and the MIT licence
The last push to the repository was on 2026-09-04, which is recent. The most recent tagged release, however, is v1.1.3 from 2020-05-20, and the package.json still declares version 1.1.3. That gap is the practical fact to plan around: the stylesheet is stable and the release cadence is slow, so pinning to the major version through the CDN's @1 path is reasonable, but do not expect new components or breaking-change migrations to arrive on a schedule.
Upgrade cost is low by construction. There is no API, no JavaScript, no config file. An upgrade is replacing one stylesheet, and the risk is that a default you had overridden in your own CSS shifts underneath you. If you have customized :root variables, keep those overrides in a separate file so a stylesheet swap is a one-line change rather than a diff hunt.
On licensing: the repository LICENSE is MIT, and package.json declares "license": "MIT". MIT permits commercial use and modification provided the copyright notice and permission notice are retained. That is a description of the licence text, not legal advice; if you are redistributing the stylesheet inside a product, read the LICENSE file in the repository and follow your own counsel's guidance.
Editorial conclusion
Adopt new.css if you are publishing raw HTML or markdown-generated pages and want them styled by a single link tag with no build step. Do not adopt it if you need components, layout grids or per-element classes; the README itself says it was not made to be a true framework. Before committing, open demo.html in the repository and check the :root color variables against your brand, then confirm the CDN URL you copy matches the version you intend to pin.
Frequently asked questions
What is new.css and how does it differ from a normal CSS framework?
new.css is a classless CSS framework that styles plain HTML elements so a document looks reasonable without any classes in the markup. The README states it was not made to be a true framework and is intended for rapidly prototyping raw HTML or building a simple site with zero configuration.
How do I install new.css?
Add a single link tag pointing at the jsDelivr CDN URL to the end of your HTML head, or install the npm package @exampledev/new.css with npm i or yarn add. The README also gives an optional second link tag for the Inter font.
Is new.css a replacement for a full framework like Tailwind or Bootstrap?
No. The README says new.css was not made to be a true framework and is meant for prototyping raw HTML or simple zero-configuration sites. It has no components, no JavaScript and no build step, so anything requiring interactive or layout primitives has to be written by hand.
What is new.css an alternative to?
The closest alternative in approach is another classless stylesheet such as sakura, which the README credits for introducing the author to classless CSS. Both style bare elements, so the choice comes down to which default typography and palette you prefer.
Can I change the colors in new.css?
Yes. The README states the color palette is declared as CSS variables in the :root attribute and can be easily customized. There is a theme library on the project site and further instructions on the repository wiki under Customizing Themes.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/xz-new-css)