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.
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.
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 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'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.
> 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.
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).
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.
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.
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.
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
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 :)
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.
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.
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.
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.
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!
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.
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 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.
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.
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.
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.
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.
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?
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.
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)
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, 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 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.
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'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.
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?
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.
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!
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.
[0]: https://github.com/edwardtufte/tufte-css