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.
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.
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.
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.
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.
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.
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.
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.
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?
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!
"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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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).
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.
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.
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 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?!
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.
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?
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.
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.
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.
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.
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) -- 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.
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?
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.
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.
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.
We changed the URL from 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.
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.
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.
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.
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.
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?
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!
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.
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.
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).
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.
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.
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.
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.
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
;){kind=link}
And you can use this demo site to switch between them all on the fly: https://dohliam.github.io/dropin-minimal-css/