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 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).
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.
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.
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
https://medium.com/@h_locke/why-dark-mode-causes-more-access...
Dead Comment
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).
And totally agree with black text on white.
There's a full list of them here: https://github.com/dbohdan/classless-css
[0]: https://watercss.kognise.dev/ [1]: https://picocss.com/
Simple.css is another one I like. Also super simple to customize.
https://simplecss.org/
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.
[0] https://andybrewer.github.io/mvp/
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.
https://github.com/dohliam/dropin-minimal-css
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
With good reason, IMO — too much contrast and it’s not clear that an element is disabled.
If you let a designer put grey on grey once, they’ll do it 10,000,000 times.
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.
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.
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.
I really appreciate all of your suggestions, I'll patch the issues up asap.
[0] http://getskeleton.com/
[1] https://milligram.io/
[2] https://repfl.ch/
At a minimum, please provide a way to switch between mode so that we can have some design granularity back.
Thanks!
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.
"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."
[1] https://practicaltypography.com/how-to-use.html
Calling it a "CSS framework" really sent me in a loop trying to figure out what "framework" means.
Also note: This project looks like an even more minimized version of PicoCSS [1]
[1] https://picocss.com/
I like the concept of classess css but most of the solutions I looked at (before pico) were just not very pleasing oob.