
New.css – A classless CSS framework to write modern websites using only HTML - sdan
https://newcss.net/
======
amanzi
This Github repository tracks a whole bunch of these drop-in CSS files:
[https://github.com/dohliam/dropin-minimal-
css](https://github.com/dohliam/dropin-minimal-css)

And you can use this demo site to switch between them all on the fly:
[https://dohliam.github.io/dropin-minimal-
css/](https://dohliam.github.io/dropin-minimal-css/)

~~~
elefantastisch
It's a shame how few of these prevent horizontal scroll on mobile. Usually the
table and/or video are not probably handled. My take away from this: Simple
does not mean easy; check edge cases.

~~~
_bxg1
As suggested by a sibling comment the key isn't to prevent horizontal
scrolling, but to prevent content from overflowing a single screen width.
Which isn't _hard_ per se but doesn't have a one-size-fits-all solution.

~~~
chongli
So many websites overflow a single screen width by a trivial amount. This is
just enough to cause accidental horizontal scrolling which disrupts the flow
of scrolling the page. Very frustrating!

~~~
_bxg1
Yep. The offenders are usually really long un-line-breakable words, images, or
videos. In this case we have:

    
    
      href="https://newcss.net/theme/terminal.css">
    

Which is not being allowed to break to a new line because it doesn't contain
whitespace. A CSS rule can be used to allow it to break, though that can also
have other, unwanted ramifications.

------
oxalorg
Author of Sakura.css [0] here linked in the article. Thanks for the link ^_^,
new.css looks super great!

A bit more on "WHY" you'd want to use a classless theme:

* Quick prototyping, especially when working on backend sites and can't yet be bothered to fidget with css/html.

* Building a quick (but pretty) site/blog for your best friend or aunt!

* Works amazingly with markdown generated HTML content. So it's a perfect match when rendering markdown but don't want to customise the rendering process to include specific classes.

* Using it as a placeholder: I almost always start a project with sakura.css, just drop the link tag and you’re done. Start working on features instantly.Once I’ve built the flows/components a bit I replace it with something like tailwind! There is no friction to this workflow as sakura and sisters are all classless anyways, so you can replace it easily.

[0]: [https://github.com/oxalorg/sakura](https://github.com/oxalorg/sakura)

~~~
exampledev
Never in a thousand years would I even consider being on the same level as
oxal's project. It's an absolute honor! Thanks so much for your support.

~~~
oxalorg
Haha thanks, you're being too humble ^_^

BTW loving the xz logo and the website. Overall super cool!

------
nateberkopec
I don't understand the claims re: font loading.

> 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.

It's 300kb of font downloads, hardly light. And the xz/fonts page says:

>Break your users from unethical tracking networks

I'm still making a request to a 3rd party CDN with an origin header that says
what page I'm looking at, so I'm not sure what privacy I'm gaining here.

~~~
henriquez
You can always set a referrer-policy HTTP header on the origin site to prevent
the CDN from getting the path (or even the domain) of the web page. They’d
still see user IP address but on its own that’s not very useful.

~~~
odensc
It's the `Origin` header that's the issue, not `Refer(r)er`.

------
_0o6v
Crazy. This isn't a "framework". It's a stylesheet.

~~~
hombre_fatal
"Classless" also made my brow furrow when I realized they didn't mean, say,
CSS components styled without a bunch of classes (a la Twitter Bootstrap) but
rather, it just has no components. It's classless because it only styles some
basic html elements.

~~~
lucb1e
That's exactly how I understood it and it sounds useful to me. No need to look
up what styles do what, you can just use the standard elements and expect them
to look coherent and as expected. E.g. "<header>" is descriptive enough since
HTML5 introduced it.

~~~
hombre_fatal
It didn't mean that for me because we've been sharing minimal css files for
decades without without calling them frameworks or "classless". Usually when
you see a new term, it describes a spin on the old act. If they had also
called it a "serverless" CSS framework, I wouldn't have guessed they meant
that the CSS file just doesn't make any HTTP requests.

------
Ndymium
This reminds me of W3C Core Styles[1]. I remember using those in many quick
pages to make them look somewhat presentable without spending any effort
myself, when perfect styling just wasn't important. I wonder how many sites
nowadays use their styles directly from their URLs.

[1]
[https://www.w3.org/StyleSheets/Core/](https://www.w3.org/StyleSheets/Core/)

------
redka
It might be just me but I can't look at websites with black backgrounds and
white or yellow letters. My eyes hurt and when I turn my head elsewhere I can
see shadows of the website for a bit. I use dark(ish) themes everywhere but
such high contrast somehow is too much.

~~~
1f97
i have exactly the same issue. so many websites nowadays choose to have dark
themes which are essentially black backgrounds with white text and it is
physically painful to read. if i'm invested enough in the article, i always
try to change the user styles a bit to make it more bearable.

~~~
redka
Yep, exactly. Last ditch resort is to modify the values via devtools myself
but usually I just skip that site.

------
HugoDaniel
This recent vibe of minimal CSS files for plain HTML tags feels the same as
the CSS Zen Garden from years ago.

Which is very good and quite welcome in the current state of overbloated JS
frameworks that do everything.

I wonder if this will also drive further the adoption of standard web
components [https://open-wc.org/guide/](https://open-wc.org/guide/)

~~~
_bxg1
Stylesheets have absolutely nothing to say about JS framework usage and vice-
versa.

~~~
mikeg8
In theory yes, but React and similar JS frameworks have been chomping away at
the “cascading” of CSS for a while, in favor of embedding styles inside each
JS component. They have become very much intertwined.

------
onion2k
It doesn't work properly. The body has a max-width of 750px, and the header
uses a padding hack of 'calc(50vw - 50%)'. That 50% means '50% of the
containing element', so if 50vw is more than 750px (eg your viewport is more
than 1500px wide) the header element stops being centred and starts spilling
over on the right hand side.

~~~
emagdnim2100
A good place for the under-appreciated CSS ‘clamp’ function!

~~~
onion2k
... that doesn't work in Safari or iOS, or non-Chrome Android browsers yet.

------
ethanpil
Checkout
[https://github.com/kognise/water.css](https://github.com/kognise/water.css)

I find water.css to be the prettiest of the classless bunch.

~~~
henryfjordan
I recently started a project using Skeleton CSS
([http://getskeleton.com/](http://getskeleton.com/)) which is similar. It only
uses classes to deal with the grid (which it looks like neither water.css nor
new.css handle).

~~~
ukyrgf
This has long been abandoned, hasn't it? (just checked, last updated in 2014)

------
exampledev
Hey everyone, developer of new.css here. I've gotten a lot of valuable
feedback from everyone today! But I get it, new.css is very basic, and it's
not the traditional definition of a framework.

Please keep leaving your constructive feedback. I'm excited to keep making
new.css something for everyone to enjoy.

------
richthegeek
I'm not entirely sure this can be called a framework. If there was a Bootstrap
v0.1 it would be this, before it decided to do a whole bunch of extra things
to become a framework.

A few years ago you might have simply named it "reset.css", but it's too
opinionated to really have that name.

It feels like I would spend more time undoing what it does than would be saved
by using it.

I don't hate it... but I don't entirely see the point of it.

~~~
Semaphor
> It feels like I would spend more time undoing what it does than would be
> saved by using it.

They list use-cases:

> A dead-simple blog

> Collecting your most used links

> Making a simple "about me" site

> Rendering markdown-generated HTML

It’s when you have some basic HTML and just want it to look good.

Agreed that framework is a very unfitting descriptor for it though.

~~~
falcor84
But then, why not have this be defined by the client?

I think I would like to see more websites entirely devoid of css, together
with an evolving ecosystem of browser-side theme-like css rulesets to style
and layout sites based on the page's semantics and everyone's unique
preferences, like we style our desktops and terminals.

But that's just my cloud cuckoo land, right?

~~~
Finnucane
>But then, why not have this be defined by the client?

Because client defaults usually suck.

------
marban
5 comments with 5 alternatives so far. Oh the irony.

~~~
jmchuster
A variation on Cunningham's Law?

~~~
marban
Without classes, CSS is a race to the bottom.

~~~
cannedslime
I disagree. For many simple things you can get a long way without or with
minimal amount of classes. Coincidentially I am working on implementing some
changes to a really bad case of the vile disease classinitis. With names such
as: xyz_product__form and g-region--desktop-one-half. Lest not forget about
their actual use in the markup: `class="form-field__input form-field__input--
button button button--cta button--large button-mobile-full u-flex-1"`

Ah how could I even live without getting hired for this job and all of its
lustful classes?!

------
W4ldi
I prefer MVP.css
([https://andybrewer.github.io/mvp/](https://andybrewer.github.io/mvp/)) tbh

------
colourgarden
This seems like a decent boilerplate+extras but line 1 is importing a custom
font. Why?

Unnecessarily opinionated and against the "lightweight" aims of this library
(not knocking Inter btw - it's awesome).

~~~
rozenmd
Use the code <link rel="stylesheet"
href="[https://newcss.net/lite.css">](https://newcss.net/lite.css">) for the
lite version, which uses the system font stack rather than importing one.

------
s17n
Seems one of these things hits the front page every month or so. My question
is, why don't the browser makers adopt something like this as the default
stylesheet? Are they constrained by the spec here or is it just a matter of
inertia?

~~~
awb
> Seems one of these things hits the front page every month or so.

Yep! MVP.css was featured in March:
[https://news.ycombinator.com/item?id=22681270](https://news.ycombinator.com/item?id=22681270)

~~~
TheGoodBarn
To continue the chain, we had 98.css last month, although a little more niche:
[https://news.ycombinator.com/item?id=22940564](https://news.ycombinator.com/item?id=22940564)

------
giancarlostoro
This is kind of funny to me because I wish more frameworks went this route
then I can just override as necessary with my own classes and ids instead we
end up with people creating new classes when they shouldnt need to or hacking
together different classes and writing scope creep type of CSS.

I have often thought about a CSS "framework" that did this but never bothered
to look it up never thought of the name classless since it seems most popular
frameworks use classes and other things.

------
discordance
Hey sorry I’m not in the know, but what’s wrong with classes and styling?

~~~
wallawe
Nothing, but a lot of the web dev community feels like we've gone overboard in
terms of bloated CSS frameworks and this is what I perceive to be a reversion
back to the basic ability to style a document without much need for writing
and learning CSS or the frameworks themselves.

~~~
gremlinsinc
As a full-stack dev who has started/but not finished tons of side projects
because I hate the design part (okay, I'm more backend than frontend, I like
vue/js but css/scss isn't my favorite part of the stack though I can do it in
bulma, material-ui, vuetify/etc....)

I think this sort of thing looks cool, though picnic.css
([https://picnicss.com/tests](https://picnicss.com/tests)) -- from another
comment seems more my flavor.

Might be a good way to focus on the functionality, maybe use it w/ tailwinds
for extra styles where needed, and launch faster make some $$ hire a person to
do the design stuff I hate to do in an actual framework or something and
launch a prettier v2.

------
wx196
It may be not a good idea to use a grey input background for generic cases as
it may confuse as disabled.

[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_in...](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_disabled)

------
tmvnty
Reminded me of the "CSS Zen Garden" thread just had back in March -
[https://news.ycombinator.com/item?id=22627018](https://news.ycombinator.com/item?id=22627018)

Are people reminiscing the simplicity of just HTML & CSS again?

------
HugoDaniel
like mvp.css
[https://andybrewer.github.io/mvp/](https://andybrewer.github.io/mvp/)

------
aidos
This looks to be using the new css variables (well, new to me - I was checking
on the state of the art in css just recently). I was looking into how you can
do components now and this stuff looks pretty interesting, though styling of
nested components using these techniques looked a little...hairy. Has anyone
used these in anger?

[https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_c...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_custom_properties)

~~~
Ndymium
I used CSS custom properties (AKA variables) when rewriting my blog's frontend
just recently. A few issues come to mind even when using the latest CSS
features:

1\. Nesting can still be an issue if you have complicated layouts. You can
mostly get around this with good use of classes/IDs.

2\. Custom properties cannot be used in media queries. This was my biggest
problem, because you now have to repeat your breakpoint sizes in every place
you want to use media queries (which is many places if you split your code
into many files), or you can have one file with the breakpoints set a bunch of
custom properties that are used then throughout the styling. But the latter
method falls down if you need to use e.g. `display: grid` for one size and
`display: block` for another -- you end up with tons of properties. An example
of that in my blog's code [1].

3\. I really missed the lighten/darken helpers from SCSS. Those would have
been useful with all the colors, because now I'd have to calculate all of them
again if I wanted to change the color scheme.

[1]
[https://gitlab.com/Nicd/mebe-2/-/blob/f0f988e3d120c4cff54277...](https://gitlab.com/Nicd/mebe-2/-/blob/f0f988e3d120c4cff5427760ffa8f2c02239e6c3/lib/web/frontend/assets/style/settings.css)

------
gwbas1c
I love the terminal theme. I've been trying to do something that looks like an
older terminal for a configuration page, and this version _almost_ does it.

Why _almost_? The theme totally screws up wide tables. They bleed off the edge
of the page, and there's no vertical scrollbar. Furthermore, widening the page
just moves everything, including the table, to the right. The only way to see
a wide table is to have a giant window with a big empty space on the left.

~~~
exampledev
Thanks for the feedback gwbas1c. How would you recommend improving form
support? I'd be more than happy to merge any improvements.

~~~
gwbas1c
Just try new.css on a page with a very wide table. You'll see the problem
right away.

I personally didn't dig into your css. If you can bring back the horizontal
scrollbar at least it's a workaround.

------
wysewun
pair this up with the successor to intercoolerjs,

[https://htmx.org/](https://htmx.org/)

and you can keep even more of your work directly in html.

------
alberth
Bring back fond memories of
[http://www.csszengarden.com/](http://www.csszengarden.com/)

Just plain HTML + CSS

------
brlewis
There are reasonable arguments that CSS is best done with no classes, only
semantic elements. There are reasonable arguments that CSS is best done with
classes only, independent of element name. And there are valid arguments for
various incompatible ways of naming and namespacing CSS class names. We are a
long way from one "right" way of doing CSS.

------
dang
We changed the URL from
[https://github.com/xz/new.css](https://github.com/xz/new.css), which points
to this. Both are great, but when a project has its own site it seems best to
link to that one, as long as it links to the Github or equivalent page when
there is one.

------
XCSme
I am confused, why is it called a framework? From what I read it's just a
default theme for HTML. Did I miss anything?

~~~
StreamBright
Because it is about frontend development.

------
StreamBright
Any frontend dev out there would like to compare this with MVP and Tachyons? I
am a bit lost when to pick over another.

~~~
pdfernhout
Tachyons, which I like a lot, is Atomic CSS, which means essentially things do
what they say, like .red makes things red, or .ma0 sets a margin of 0. With
Tachyons, you can define any look you want by adding these atomic styles to
HTML elements. While that might be a lot of work if you style HTML by hand, it
is not much of a chore if you are writing JavaScript code which defines
widgets which you use by calling a function (like using Mithril, a favorite
vdom UI building library). Occasionally you may use inline styles, or add some
new atomic styles, or change existing Tachyons styles (like set a different
shade of .red) to get a precise look -- but for the most part, Tachyons styles
cover most common cases.

By contrast (and not having used it) new.css seems to provide some basic
styling to give some elements like input or summary a certain look which you
may or may not like. New.css seems like a very lightweight (CSS-only)
Bootstrap framework. If you don't like the specific look (including colors and
margins) the designer chose for you, there is apparently no easy way to change
it or go beyond it -- other than by the usual mechanisms of writing more CSS.

I like the Atomic CSS approach because, for what I do (mainly single-page
apps) I just write JavaScript which generates HTML which is almost-entirely
styled using existing Tachyons classes (which never collide). By contrast,
most other CSS libraries (such as apparently new.css) expect you to write new
CSS styles for HTML elements and also semantic CSS classes (e.g. .main-
content) if you need something other than exactly what they provided, and so
you have to be managing multiple stylesheets and their collisions.

See also: [https://css-tricks.com/lets-define-exactly-atomic-
css/](https://css-tricks.com/lets-define-exactly-atomic-css/)

~~~
StreamBright
Thanks a million! Now I understand much better. We are using Tachyons and
going to keep using it.

------
superpermutat0r
I don't know why but white on black premade theme given here is just horrible
for my eyes. The text burns into my eyes and then anywhere I look I can see
the blurry text lines.

I code using a black on white editor but could I guess handle non-white on
black themes if the non-white color wasn't as bright.

------
beders
Cool. Looks nice!

Wanted: class-based CSS that only deals with layout and positioning, not
component-styles.

~~~
andrethegiant
Could you elaborate?

------
kyledrake
I threw together a similar concept here:
[https://elementcss.neocities.org](https://elementcss.neocities.org)

I might just "deprecate" it and point to this one if I like it more.

edit: hmm, no grids?

------
equinusocio
It sounds weird because it seems a clone of Native Elements published 3 years
ago.

[https://github.com/n-elements/core](https://github.com/n-elements/core)

------
equinusocio
It sounds weird, because it looks as a clone of Native Elements built 3 years
ago.

[https://github.com/n-elements/core](https://github.com/n-elements/core)

------
torartc
There is some very odd marketing speak here. "Vercel's impossibly fast cdn",
taking about how hosting on Google is somehow unethical? This whole thing is
weird for some basic default CSS.

------
swissmanu
i personally like
[https://igoradamenko.github.io/awsm.css/](https://igoradamenko.github.io/awsm.css/)
which has a similar approach.

------
100721
Tangentially related: I've been on the hunt for a CSS framework/drop-in that
approximates the style of the Dracula theme – Dark background with bright,
happy, bold, cotton-candy colors.

Any suggestions?

~~~
thebouv
1) I went searching for you and was quite impressed with how many apps and
such that Dracula supports:
[https://github.com/dracula](https://github.com/dracula) .. wow

2) I hope one of those helps you. I didn't see one specific to being classless
or a framework for a website. But I did see a github-pages one that might be
the closest?

~~~
100721
That actually was super helpful! I went to the GH-Pages preview [0] and pulled
the compiled CSS file out. I hope the license permits reuse in this way. Thank
you!

[0]: [https://dracula.github.io/gh-pages/](https://dracula.github.io/gh-
pages/)

------
dirtnugget
When I open [https://newcss.net/](https://newcss.net/) the header is already
broken using Chrome... That's kinda sad

------
crofrwd
Just to point out there are also: [https://native-
elements.stackblitz.io/](https://native-elements.stackblitz.io/)

~~~
giantrobot
For a static text page why did I have to wait two seconds for a loading
spinner?

------
cypressious
Looks nice. I checked the network tab to see how light the page newcss.net
really is. ~600kb looks good but interestingly enough, the favicon is the
biggest asset.

------
savolai
I'd love to see a list of CSS files that are actually usable out of the box
i.e. have a reasonable column width for body text on both desktop and mobile.

------
sreekotay
Really nice work. One thing you might consider is making sure that tabs and
modals work well/there is a model for them. Picnic.css does this well.

------
weeboid
Is this just a reset css with default styles?

~~~
tylerchilds
Yes

------
dominotw
when i got this site

[https://dohliam.github.io/dropin-minimal-
css/](https://dohliam.github.io/dropin-minimal-css/)

I see "unformatted" left aligned site for 1/2 a sec before it centers and get
formatted.

------
basilgohar
Despite being classless, I still got a Flash of Unstyled Content FOUC) when I
load one of the themed pages on Firefox for Android (technically Fennec
F-Droid).

So classless does not mean lightweight, perhaps?

------
nprateem
I assume that the author must be in their teens/20s to call a stylesheet that
is literally the most basic, primitive form of CSS possible "modern" :-D

------
MrBuddyCasino
The thing about "classless" CSS or auto-generated class names is that it
becomes much harder to customize a website via user scripts. Its not a good
trend.

------
_threads
We need more of these and less js livbraries

------
boksiora
Good idea that leads to cleaner code

------
hendry
Using it now on my blog: [https://natalian.org/](https://natalian.org/)

Nice!

~~~
sdan
Cool!

------
mr-karan
So basically a stripped down version of Tailwind?

~~~
bluetwo
I would say the opposite of tailwind.

------
yoz-y
Name and lede wise I prefer
[https://mblode.github.io/marx/](https://mblode.github.io/marx/)

------
dsego
A css framework for communists?

------
alufers
This looks more like an attempt at criticizing the bloat people add to their
websites basically just to change the font from Times New Roman. I can't
really see this competing with bootstrap, since it lacks all the custom
components.

~~~
woofie11
I don't think so. This is criticizing no one. Right tool for the right job.

I write web apps which need real frameworks.

I also write basic text pages, and something like this is very nice. It's a
dying art (university professors seem like the last hold-outs), but it's often
handy.

The top comment gives a list of such frameworks, though, many of which look
nicer than this one.

------
chadlavi
Styling semantic tags in a library is a really bad idea, it assumes your css
is going to be the only css used in an app. It's good manners to style class
names instead.

~~~
equinusocio
You should use thing for what they're made for. Even using classes you can't
solve the problem you're describing.

~~~
chadlavi
"You should use thing for what they're made for."

You ever worked on a project where a non-technical PM got to pick
technologies? I guarantee you someone is going to choose this CSS library in
the future because they think it looks nice, then be confused or frustrated
when it stomps over some other styling they want to use because it directly
styles tag names

