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).
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?!
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.
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.
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.
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?
This is... not remotely what people mean when they say "reactive". And nobody thinks JS is necessary to get a visual theme that looks nice. CSS and JS frameworks serve radically different purposes.
"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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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?
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.
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.
I doubt it would work well but you could put a theme in user.css (on Firefox) and block all .css files (with uBlock, say). Not sure if uBlock will block <style> tags, but I think it can.
I would like these themes to go beyond a simple article view. We have tags like <header>, <nav>, <main>, <aside>, <section> and <footer> now. Should be possible to build a complete app-shell with classless CSS.
As an exercice, I’m building my neighborhood newspaper website without any classes. It is surprisingly easy. With Grid and min(), I don’t even need media queries. CSS and HTML in 2020 is great, if you take the time to choose only the latest solutions.
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.
I use a browser that locks the scroll direction and pages which overflow horizontally drive me mad. If your website does that, I will search for the reading mode button immediately because I cannot really work with handling scrolling in two directions.
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.
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!
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.
It's not super easy either. I ran into this also (https://doc.sscaffold-css.com/ysk/tables/) and the root cause is that the <table> element is not considered to be either a block-level or an inline element. It's special, and because it's special, some browsers support setting max-width on it and some don't. So tables need a container element or some other kind of special handling. It's an easy bug to overlook because the cause is so unexpected.
It's a tricky problem. I've been battling with it on MVP.css (https://andybrewer.github.io/mvp/) but I think I found a good solution for responsive tables with some help from the community.
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?
It might be an interesting question to ask why bootstrap couldn’t be mostly classless. I remember learning Bootstrap and thinking it was silly I had to add class=table to a table.
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.
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.
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.
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.
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.
Hey, developer of both here. It's certainly not a light download, I understand. It's more of an effort to pull CDN requests to known unethical networks, namely Google Fonts, which are known to be used to track users between websites.
I'll be more clear about this in the future, thanks for your opinions!
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?
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.
189 comments
[ 2.7 ms ] story [ 193 ms ] threadI find water.css to be the prettiest of the classless bunch.
Ah how could I even live without getting hired for this job and all of its lustful classes?!
[0]https://news.ycombinator.com/item?id=23202850
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.
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.
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?
Because client defaults usually suck.
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.
[1]: https://necolas.github.io/normalize.css/
Besides this isn’t meant to supplant Bootstrap. It evens says so on the site.
Unnecessarily opinionated and against the "lightweight" aims of this library (not knocking Inter btw - it's awesome).
However sometimes a dark navy blue would be better.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...
Nice!
And you can use this demo site to switch between them all on the fly: https://dohliam.github.io/dropin-minimal-css/
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.
the problem is no website offer custom css.
for an example: https://stackoverflow.com/questions/48227413/what-is-the-pur...
I can think of some uses for this if it were sticky - high contrast and dark mode versions for websites
HN is pretty vanilla. I use it with https://userstyles.org/styles/92693/dark-hacker-news-solariz...
Not the standardized approach that we should have had long ago but better than nothing.
Plus a couple bootstrap classes where HTML5 has no elements : grid and card.
Most mobile browsers seem to lock the scroll direction while moving anyway, so atleast it isn't sloppy in practice, imho
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.
[1] https://www.w3.org/StyleSheets/Core/
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
BTW loving the xz logo and the website. Overall super cool!
If so thanks for pointing it out, looks like I forgot to add the `fn1` footnote id on the element. Fixed it.
[0]: https://oxal.org/projects/sakura/demo/#fn1
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_in...
> 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.
I'll be more clear about this in the future, thanks for your opinions!
https://developers.google.com/fonts/faq#what_does_using_the_...
[0]: https://decentraleyes.org/ [1]: https://github.com/Synzvato/decentraleyes/issues/34
[0]: https://git.synz.io/Synzvato/decentraleyes/-/issues/34
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/