water.css[0] and pico.css[1] are some of my favorite classless css libraries.
There's a full list of them here: https://github.com/dbohdan/classless-css
[0]: https://watercss.kognise.dev/ [1]: https://picocss.com/
water.css[0] and pico.css[1] are some of my favorite classless css libraries.
There's a full list of them here: https://github.com/dbohdan/classless-css
[0]: https://watercss.kognise.dev/ [1]: https://picocss.com/
Not sure I would make the "disabled" buttons stand out more brightly than a regular button. In fact I would swap the colors of those buttons, or maybe make the disabled button greyed out.
I limited myself to black and white when creating the style-sheet, but maybe I should indeed add some kind of indicator for the "disabled" button, such as hatchings.
edit: hatchings make the inner text unreadable, I'll play around with opacity and dotted lines, thank you to the users who proposed them.
edit 2: went with dashed lines and published a new version. It even shaves off a couple of bytes off the minimized version :D
this could be a rare but very practical usecase for strike-through text
Wow, I love that!
Could border-style dashed/dotted work?
Opacity maybe would help here.
Hmm I think the dashed lines still don't say to me "disabled" unless you told me. It looks more like a secondary button (eg "Go back" or "Cancel"). I really do think the use of reduced opacity would make sense here :)
Hatching seems an excellent idea.
The buttons also need a hover/focus state, easy win for accessibility there
definitely - could use outline property, transforms/thickened borders or border radius animations if it's Imperative to keep things black and white
Agreed, maybe even just invert it to white-on-black on hover.
Agreed. One thing that a lot of people miss when attempting to comply with WCAG contrast guidelines is that disabled controls are specifically exempt.
With good reason, IMO — too much contrast and it’s not clear that an element is disabled.
And yet younguns with good eyes and no color blindness will be able to read the text, and others won’t.
If you let a designer put grey on grey once, they’ll do it 10,000,000 times.
As it is often said in various designer forums, please avoid pure white (#FFFFFF) on black (here #111111), as it makes the text glow for the human eyes (therefore making it unreadable for long text). Instead, try to lower a bit the contrast on the text color.
Also, the dispositions for the buttons at the beginning (GitHub, NPM, ...) are not adjusted correctly for keyboard navigation (each button requires two tabs).
Appart from that, I do like a minimalist stylesheet, so I will also recommend Tufte CSS [0] for readers.
This really depends on the user's display and the viewing conditions. Someone with a TN LCD or even an OLED in bright light would likely prefer the "high contrast" #FFF on #000.
It's also an accessibility issue. People with astigmatism might have a hard time with bright text over dark background.
https://medium.com/@h_locke/why-dark-mode-causes-more-access...
As someone with astigmatism, I prefer dark modes in almost all places as long as it's done correctly. Bright screens with dark text cause significantly more eyestrain for me. My wife also has astigmatism and prefers light backgrounds with dark text. For the same reasons. I think the key here for accessibility is choice.
I agree, users should be able to pick whatever works better for them.
There's a myth going on that dark mode is universally/objectively better which is simply false.
Environmental lighting conditions rule the day! I have astigmatism and I prefer bright backgrounds; #000 text on #fff backgrounds works great for me, but that's because I work in a room lit by a 250W 30,000 lumen corn-cob LED bulb[0] that makes my small office as bright on the inside as the shaded ground from a tree on an overcast day (which is quite bright compared to usual indoor lighting). In a room that bright, high contrast text works great and is highly readable, with "dark mode" often looking washed out and muddy. Even small reductions in contrast (such as what https://devdocs.io does with text of #333 in light mode) can make me notice and wish for greater contrast.
I'm with your wife on this one, and also either one of those is way better than "grey on whatever" that seemed to be a prevalent design choice for a few years for many websites.
Low contrast is hell.
I too have astigmatism and am a light mode enjoyer. Dark mode makes the letters dance in front of my eyes.
Display brightness at 20% is life. Never made sense to me why you’d shine the light of a thousand suns in your eyes then put sunglasses on it because “it’s too bright” when you could just not.
My partner is a dark mode user and honestly sometimes her phone screen lights up the whole bedroom. Even with dark mode. I don’t understand.
I have astigmatism and dark mode is hard to read.
Black text on white background all day.
Tufte is really nice but requires a custom font, which IMO is no longer minimal.
And totally agree with black text on white.
Agree, that depends on your vision of minimalism and stuff.
As it is often said in various designer forums, please avoid pure white (#FFFFFF) on black (here #111111), as it makes the text glow for the human eyes (therefore making it unreadable for long text). Instead, try to lower a bit the contrast on the text color.
If you want an objective measure for this, see APCA: https://www.myndex.com/APCA/?BG=000000&TXT=ffffff&DEV=G4g&BU...
From https://git.apcacontrast.com/documentation/APCA_in_a_Nutshel...: "Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color". White on black scores Lc 108.
It's the likely future replacement for the standard WCAG2 contrast checker (which becomes really inaccurate for dark mode and I don't think makes any suggestion about maximum contrast).
Would this be more correctly called a CSS "stylesheet"?
Calling it a "CSS framework" really sent me in a loop trying to figure out what "framework" means.
What you said is literally "Cascading Style Sheets stylesheet". Stick with "framework".
Why? Would you call a DVD disc a spaceship?
Of course not. By I wouldn't say "DVD disc" because it's the same as "Digital Video Disc disc".
Even W3C calls them "CSS stylesheets", it's pretty standard. It only sounds weird if you expand the acronym.
Modern CSS stylesheets include configurability via CSS variables on the root element so maybe that's where the "framework" comes from.
Also note: This project looks like an even more minimized version of PicoCSS [1]
Oh pico looks very nice - and something I am likely to actually use. concrete is a bit too minimal for me.
I like the concept of classess css but most of the solutions I looked at (before pico) were just not very pleasing oob.
Very good point, I modified the page. The project started-out non-classless, so the term was more appropriate back then.
the somewhat lost term "boilerplate" comes to mind
Refreshingly simple, almost to the point of an aversion to other minimalist competitors like Milligram.
I like it. As someone else said here, it brings my mind to an alternative web with browsers that had a better default and standardized stylesheet. Oh how I wish for this. Can't just Chrome, Firefox, Edge, Safari all just adopt this one?
Setting up no-CSS sites would be a more sensible thing and we would have less need of Gemini (https://geminiprotocol.net/).
One can dream... Of course, now sites widely rely on a random set of margin defaults, base sizes etc. brought into their websites, so ripping out and changing those wouldn't be quite that simple.
re: Project Gemini - Gemini in 100 words
Reading that reminds us how far we have *not* come. We were promised jetpacks, and instead we got the internet. A pro-distraction, privacy violating, social fabric tearing, power tool.
More Big Brother, less prophet / savior.
My honest hot take is that we made computers too easy to use.
I appreciate how liberating computers and the internet can be for a lot of people but it has been far too easy to implement dark control through them.
If I dare reply your hot take with my hot take, It was engineers who implemented those dark patterns. I think that still “lots of people” see excel formulas as stuff that geniuses do, so I think it comes down to us. Will I write that privacy invading, psychologically manipulating code, or would I say no.
Sure, if I don’t do it “somebody else would”, but I wonder if that mentality has taken us here
If it's possible it will get done, with or without you.
This is not a technical problem, it's just the symptom of a political power.
If no one can decide for someone else, there's no political power to be acquired. Without it, there's no need to brainwash people with tv and the internet.
We need to destroy power centralisation, starting by shifting the power from the public to many businesses, and ending up with dismantling the government all together once all functions are provided by corporations and nobody holds the monopoly on stealing = taxing.
I obviously can't speak for all engineers but I've certainly refused to work on dark patterns and explicitly told leadership why I believe they are dark patterns.
I appreciate that not everyone has that luxury and ultimately it's an empty gesture because of course at some point, someone's morals will be overcome with money, or threats but on an individual level we do have agency.
To be fair, to create a web that has no need for Gemini I think no-JS sites would take us much further than no-CSS. It's relatively easy to disable CSS (Firefox: View - Page style - No style), and generally not much will actually break. But disabling JS would more than often break the website functionality completely.
This doesn't look right with the dark reader extension in firefox. I would expect a website that's compatible with dark mode to work with dark reader (I.e. I would expect dark reader to not influence the CSS in that case)
That is sadly not the case. I disable dark reader for all sites supporting darkmode because it always changes them.
Are you using the dark mode detection feature?
Oh wow, wanted to write "that does not exist", but finally found it unexpectedly under "configure website toggling". Thanks, that will remove a big annoyance if it works :D
I would never expect a browser extension to work flawlessly with every possible site out there.
You are the user of the extension. Does it break a site? Submit a patch to the extension! Certainly don't complain to the website author who has no control over what extensions you personally use.
Oh wow, crazy to see my project on HN! Thank you soap-3 for submitting it :D
I really appreciate all of your suggestions, I'll patch the issues up asap.
Please, please pretty please, can we stop with the automatic switching to dark mode if the system uses a dark theme? Chrome UI elements and webpages serve fundamentally different purposes, and have wildly different readability needs!
At a minimum, please provide a way to switch between mode so that we can have some design granularity back.
Thanks!
I suspect this is a problem for your browser? The CSS media query only makes sense as 'prefers dark webpages' — there'd be no point having it, if it means 'the browser theme is dark and it doesn't matter what the user prefers in terms of web pages'.
Your browser should offer you a setting to choose whether you prefer dark webpages or not (SEPARATELY from the browser theme). Not sure if Chrome currently does but if this annoys you, it would be worth looking for.
It’s really cool, what was some of your inspiration and thoughts behind it?
I had been using similar projects such as skeleton[0] and milligram[1] for small experiments such as repfl[2], and wanted to create something similar that I would find aesthetically pleasing and that would fit in as little space as possible. The current version of concrete.css is less than 1kb minzipped!
I'm really not a fan of brutalism (in UI and in architecture) and I think that our monitors have 24-bit color depth for a reason. Such extreme simplification of UI is not the way I think.
(Microsoft has attempted this in Metro, but quickly withdrew from this idea)
Microsoft's Windows 8 era "Metro" guidelines were extremely colorful. They often emphasized one single brand accent as a standard across an app, but it could be just about any color you wanted. Or one single accent color of the user's choice to give them a sense of personal ownership. They also emphasized the importance of "full bleed" photography and what a colorful wallpaper with basic parallax effects can do to make an app seem alive.
Most of the really vibrant "magazines" and apps and "hubs" only ever really existed on Windows Phones at that time and most desktop apps stuck to a bare minimum so most people missed all the good colorfully and playfully vibrant examples of what those UI guidelines could be when done right.
Maybe in theory it was colorful (I've never read the actual design documents), but in practice the complexity of "legacy" multiple-color controls that were 3d and gradiented was switched to extremely simplified, mono-color equivalents which made me wonder if what I'm about to click is a control or just a simple text label.
I've never used Windows Phone as well, so I can't compare to how Metro looked on those devices. I only know what they've done with Metro on Windows on PCs.
It looks fine, and I guess it's going for a theme, but I actively disagree with removing the color from links. Making a link and underlined text completely indistinguishable is a bad idea for usability. That alone makes this something I would never drop-in to a simple site.
Whether it is a bad idea for usability depends on what you are trying to accomplish. For example, Matthew Butterick's online book Practical Typography styles links so that they are not highlighted or underlined in any way. Instead, they are instead followed by a small red circle [1]:
"Vigorously styled hyperlinks on a page tend to move to the foreground of a reader’s attention, like an HDTV in a hotel bar. [...] The red circle is meant to be noticeable while you’re reading the sentence that contains the link. Otherwise it disappears, so as not to distract."
I think you should never underline paragraph text in hypertext, underlines are specifically for hyperlinks. There's italics and bold to better put attention to a passage.
Uptime sniper link is broken
Looks like a failed/abandoned project. The user that opened the PR (only 6 months ago) to add uptimesniper to the list has since deleted their GitHub account, and the uptimesniper website and twitter are gone. I guess someone sniped its uptime!
Yup, I'll remove it from the list, thank you for catching this.
So this is the way you're supposed to use it? Is this accessible?
<a href="https://github.com/louismerlin/concrete.css"><button>GitHub</button></a>
<a href="https://www.npmjs.com/package/concrete.css"><button>npm</button></a>
<a href="https://unpkg.com/concrete.css"><button>CDN</button></a>Only if you want a hyperlink that looks like a button. It's the only way I was able to do it in a classless way, but I'm open to other ideas.
Yes, I've understood that. But a hyperlink that looks like a button -- that's the kind of thing we have CSS for, and CSS also allows you to do more complex things, like a hyperlink that's more prominent then a typical link and invites you to click it, like a button, but which is still recognizable as a link, for example with an underline on hover, so that you know you can open it in a new tab.
1. Modify the base font-size to 62.5% so that 1.6rem = 16px.
I borrowed this from Milligram[0] because it seemed like a sane thing to do at the time. Would your recommendation be to not anything to the base font-size and adjust the REM sizes accordingly?
[0] https://github.com/milligram/milligram/blob/d895f179623b56f3...
Yes.
In relation to this since you're using rem for borders and progress bar height, it's all going to scale along with browser-defined font size. You might not want that, as people typically increase this setting to have just the text larger.
Nice idea and naming, I love concrete and brutalism.
I miss some concrete texture, could be easily done with SVG filters. Also, concrete is gray, but this is black and white, I'm not really sure that fits the theme perfectly. Maybe a single modifier class on the body would make sense.
Edit: I see that it detects my OS dark theme, but the site could help me compare with the normal mode.
You can change your preferred color scheme temporarily in dev tools
I believe it's called concrete because of brutalist architecture and how it's almost always made with concrete
Its fun and it looks good, but if you ever want to migrate away from it you pretty much have style everything all over? You can't just change the style of a a single tag?
Alternatively you can migrate to another classless framework and not change a thing :)
Very nice. I do have to wonder what the Web would have been like if browser default style sheets were less crappy and actually thought out like this.
About the same as it is. My time working in web agencies has taught me that the vast majority of website owners don’t want to look the same as everyone else, and they want whizzbang high-tech widgets that make them look advanced. Usability all comes second to that.
For personal projects, I really wish there was some sort of semantic CSS with many different implementations, which this could be one of them.
What I mean is a set of rules on how to structure your HTML (like use a main element here) with some set expectations of how it will be structured on the page.
Then, many different people could write different spritesheet that makes the same HTML looks widely different. I'm not just talking colour, but fonts, radius, opacity, animations, etc. etc.
One stylesheet could make the HTML look barebone black and white, where another makes it look all in gradients of purple with fancy animations etc.
All for the purpose of writing simple application where you don't care so much about how they look.
- classes would not be used - CSS variables would not be used - just plain old div, H1, section etc.
Semantic HTML exists and is usable, most developers just want to make their site look like they want (nothing wrong with that). Problems arise when sites don't use semantic elements, style with bespoke class systems. And functionality or markup can't be changed with CSS, so when that's related to the theme it's quite hard to change.
I skimmed the CSS and I don't see the appeal. There's no reason, in my opinion, to give a section a default `4rem` vertical padding. Given that the stylesheet is really small, I'd at best consider this a solution for a tiny proof of concept if you want to demonstrate something to colleagues. I'd rather suggest people copy it into their own CSS and use it as a template.
It also adds a margin to certain elements which is almost always a no-go. It's super rare that the margin around an element is part of this element's intrinsic properties.
In general I think people would get much more mileage out of https://every-layout.dev/ (not affiliated). It's one of the best programming related books I've read in a while and it really changed the way I think about CSS in general.
Thank you for your comments, I've opened an issue and will look into best practice :)
First thing that came to mind was the Slackware Linux website [0] style (which hasn't changed since I last looked at it in early 2000's)
[0]: www.slackware.com
1999 even! Here's a wayback machine capture from Nov 1999 with the current theme https://web.archive.org/web/19991117022152/http://slackware.... Honestly a really good theme that's stuck around so long it's even fashionable again.
Some stuff like the drop down arrow doesn't look right in dark mode, would likely be fixed with `color-scheme: dark`
There is no drop-down arrow in light mode either, which does create an accessibility issue, I'll have to reflect on that.
I created the style-sheet to be as minimalist as possible, but there is such a thing as too much minimalism.
Simple, to the point, love it
<link rel="stylesheet" href="https://unpkg.com/[email protected]/normalize.css">
Thanks Cloudflare
https://classless.de has been my favorite for simple sites, it's 400 lines, responsive. bootstrap compatible.
just checked out pico classless and it also works great.
i collect these! https://github.com/swyxio/spark-joy/blob/master/README.md#dr...
See neat.css [0] for another take on this.
I used this for a few hackathon projects. It's great for simple layouts
I am a big fan of brutalism but having all those line with same weight and hierarchy in terms of width, proximity and absolute black keeps me out from focusing in textual content.
Classless CSS is pretty great. I've my own[1] for my personal site.
[1]: https://github.com/naiyerasif/site/blob/1d43c689c7c4035e2e02...
I've been loving classless CSS frameworks and have been using them extensively for personal projects for around four years now.
<select> element without dropdown arrow indicator, nice... /s
I used a different classless stylesheet once because during a live event I had to have someone who doesn't code at all update an HTML file (and upload it) repeatedly and I wanted to make it as simple as possible for them.
I think I used MVP.css? It was definitely one of the ones from that GitHub list that's already linked here, at the time I checked them all.
Looks fine to me apart from the buttons. But if we're talking about "classless", some _has_ to mention Marx[1].
I love it. Simple and restrained with kind of a retro macintosh feel.
It looks great but I would not be able to use it as-is because different kinds of elements (button, textbox, dropdown) look too similar. I'd rather make an ugly but usable site than the other way around.
What's wrong with Tailwind CSS?
It makes me happy reading all the comments agreeing on the same thing, the web should be more minimal.
I love Pico and wanted to point out there's very active development for a soon to be released v2: https://v2.picocss.com/
Pico with bootstrap's grid system would be a dream.
You don't need a grid system now that CSS Grid exists.
The responsiveness of bootstrap's grid is something that css doesn't have. With a few classes I can make the same site for mobile and ultra wide screen.
You'd do it with media queries and make different grids for different screen sizes. If anything it's more flexible than bootstrap because you can change element order as well.
https://getbootstrap.com/docs/5.3/layout/columns/#reordering
Bootstrap grid system is super complete, and probably better coded that anything I can make. Its also available as a standalone module, so the size is pretty small. I just wanted it integrated to PicoCSS because I'm lazy.
A really quick example of switching between desktop and mobile page layouts at 800px:
Water looks nice, I've not used that before.
I usually use https://classless.de because it supports theming, so I can add the bare minimum CSS to make it feel like a different site to another of my sites using it.
oh this one is really good
I love the bookmarklet from water.css, it allows you to turn lots of websites into something more readable.
Oh! I want aware of that! Thanks, have to look into it
Here is another such list:
https://github.com/dohliam/dropin-minimal-css
I've tried a few of these 'classless CSS'. But I mostly end up with 'water.css'. It gives me the least amount of surprises.
Water is great.
Simple.css is another one I like. Also super simple to customize.
https://simplecss.org/
Vote for mvp.css [0] here.
[0] https://andybrewer.github.io/mvp/
This is very helpful!
I've been looking for a tiny classless CSS framework to go with petite-vue in a build-step-free app for a microcontroller project.
water.css looks a good candidate already but there are some others to investigate there.
I suggest checking out milligram.io, I enjoyed using it a lot!