New.css – A classless CSS framework to write modern websites using only HTML

Seeing all these styles, I can't help but get the feeling that we're heading towards the aesthetic minimalist ideal of mixed text media.

It's modern MSWord templates.

This is really useful! Thanks for linking to it.

I also have a related repository. It is a gallery of screenshots of classless CSS themes: https://github.com/dbohdan/classless-css. I've just added a link to the drop-in CSS switcher there.

Pity I cannot just receive vanilla mark up and pick a client side theme.

hah, reminds me of http://www.csszengarden.com but simpler.

That's excellent. It would be funny if that 'LaTeX CSS' moved all images to the end of the web page..

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.

That's very cool ! My microframework is on there and I wasn't even aware.

It's a shame that none of these (as far as I can tell with the 60% I clicked though) restrict the page width to 100% to prevent horizontal scrolling on mobile. Simple enough to add yourself, but still.

Thanks! Does anyone know how these stylesheets interact with other frameworks like bootstrap? If I want to use bootstrap in a website, can I still start with one of the above as the base style?

Do any of them support Dark/Light?

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.

For some reason the footnote link on sakura did not make my view jump to the note (neither Firefox 76.0.1, nor Chromium 81.0.4044.138 / Linux Ubuntu) although it works in Wikipedia.

I guess the key word is “unethical”.

They also have a lite version that uses system fonts, for whatever it is worth.

While I do like the style sheet that was created, the marketing spin on this page was off-putting to me as well.

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.

Slightly off-topic but this made me wonder: is it possible to store the 1000 most used web fonts locally and tell your browser to use the local version instead of the Google version?

That's my reaction as well... What am I missing? People really forgot that you can write a "reactive" website in pure HTML and that's what it was actually designed for?

It's like normalize.css[1], unify elements across browsers.

[1]: https://necolas.github.io/normalize.css/

hence the bubble.

Yeah, I think "blog theme" is probably the best it can be described.

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

Also my reaction. If anything the response to this shows developers' adverse reaction (or stylistic deference) to CSS in general. IMO CSS is not that hard to grasp, although my bias/expertise might be getting in the way. There are plenty of CS concepts that are much more complex than understanding selector specificity.

OTOH, deep-black backgrounds and green letters (with red/yellow/white highlights) is perfect if you're using an OLED screen. Maybe browsers need adjustable (and site-specific) brightness and contrast knobs, like monitors and TV's.

I think new.css is themable.

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.

The problem is using `white` on black instead of `gray` on black. The latter provides plenty of contrast while still being easy to read.

Ah memories. I used to reference the CSS Zen Garden when convincing my clients about our new approach to web building (CSS is awesome!). Never once achieved it (complete separation of content from style) in practice.

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

I was just thinking the same thing!

I started typing a reply out to someone's criticism of this, and it had me think of it this way.

I have my own personal stylesheet that I use as a plugin for overriding blog styles (just because I like to read text formatted in a specific way, a lot of blogs aren't very readable IMO). This style of library kinda extends that where the end user can "customize" or make the site look how they want it to (not that it's something people should be considering when building their blogs, but I think its fairly normal for people to have opinions on these things).

---

I especially like it for quickly prototyping internal tools/sites at work. A lot of times I want something to look clean but don't have the bandwidth to really customize a lot of stuff. This allows you to write CSS for what you need, but have the overall page styled for you with minimal effort. (Also building your own css templates like this helps teach generic css. I think it's a good skill if anyone is within proximity of the web).

I wrote a bit about this about a year ago: https://blog.usejournal.com/the-next-css-frontier-classless-...

Definitely got me Zen Garden vibes.

Yeah... Looks terrible for me.

Seems to work properly in Firefox (https://i.imgur.com/AQ2M1G3.png) but breaks in Chrome (https://i.imgur.com/U2tVg2k.png); Chrome doesn't accept the margin value (https://i.imgur.com/pH7X0ZO.png).

When the margin works, the logic makes sense. 50vw sets the padding of the side in question (e.g. left) to the middle of the screen, 50% subtracts half of the containing element's width (<body>) from it. Doing this for both left and right and then negating it with equal negative margins results in the content area in the header being centered and having the same width as body, but the padding stretching out to the edges of the window.

There's already a PR to fix this, looks like there's a missing space after one of the minus signs.

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

This looks great, thanks for the link!

I recently started a project using Skeleton CSS (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).

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

These types of stylesheets are sometimes referred to as Base Stylesheets.

In practice, I've found its good to roll your own at some point, so you don't have to spend time undoing someone elses.

A variation on Cunningham's Law?

Nice huh, it shows that ecosystem is really strong?

This is the reason I actually "favourite" threads such as this one. The comments help me find alternatives to try out. There was an Ask HN, "Ask HN: Is there a search engine which excludes the world's biggest websites?'[0]. I commented that I search HN for different subjects and read through the comments. This is probably better than searching Google for minimal CSS.

[0]https://news.ycombinator.com/item?id=23202850

There is a lite version (which I think does not import the font)

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.

I think it's a backwards-compatibility thing. Browsers take BC extremely seriously, even when it comes to UX. Changing the unstyled look of different elements could break a legacy site that didn't give those its own styles.

The defaults inherit, so changes to the default made by a browser (or indeed a browser user) can cascade through to other sites.

Probably part of this CSS is something like reboot or reset which will try to paper over the remaining differences between different browsers, I think the browsers probably are converging in that regard but IE11 and backwards compatibility still make them necessary.

Browsers do, it's the reading mode feature. However of course it's not a default stylesheet.

> 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

Nothing's wrong, the supposed advantage of this is that it's less complex and the only thing you need to learn is html.

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.

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

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

Because it is about frontend development.

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/

Could you elaborate?

1) I went searching for you and was quite impressed with how many apps and such that Dracula supports: 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?

This CSS drop-in is themable, so you could pick colors you like and emulate it easily.

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

Yes

Cool!

I would say the opposite of tailwind.

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.

It's obviously not meant to compete with Bootstrap.

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