Readit News logoReadit News
nc0 · 2 years ago
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.

[0]: https://github.com/edwardtufte/tufte-css

dvdkon · 2 years ago
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.
pier25 · 2 years ago
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...

Dead Comment

seanwilson · 2 years ago
> 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).

lancesells · 2 years ago
Tufte is really nice but requires a custom font, which IMO is no longer minimal.

And totally agree with black text on white.

nc0 · 2 years ago
Agree, that depends on your vision of minimalism and stuff.
ambigious7777 · 2 years ago
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/

julianwachholz · 2 years ago
I love Pico and wanted to point out there's very active development for a soon to be released v2: https://v2.picocss.com/
lagt_t · 2 years ago
Pico with bootstrap's grid system would be a dream.
jszymborski · 2 years ago
Water is great.

Simple.css is another one I like. Also super simple to customize.

https://simplecss.org/

jamietanna · 2 years ago
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.

rrishi · 2 years ago
oh this one is really good
thunderbong · 2 years ago
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.
Zababa · 2 years ago
I love the bookmarklet from water.css, it allows you to turn lots of websites into something more readable.
thunderbong · 2 years ago
Oh! I want aware of that! Thanks, have to look into it
brnt · 2 years ago
Vote for mvp.css [0] here.

[0] https://andybrewer.github.io/mvp/

bemusedthrow75 · 2 years ago
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.

Alifatisk · 2 years ago
I suggest checking out milligram.io, I enjoyed using it a lot!
vitorsr · 2 years ago
kmoser · 2 years ago
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.
louismerlin · 2 years ago
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

kthartic · 2 years ago
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 :)
krsdcbl · 2 years ago
this could be a rare but very practical usecase for strike-through text
yreg · 2 years ago
Could border-style dashed/dotted work?
topicseed · 2 years ago
Opacity maybe would help here.
PetitPrince · 2 years ago
Hatching seems an excellent idea.
infotainment · 2 years ago
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.

geraldwhen · 2 years ago
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.

sn0wleppard · 2 years ago
The buttons also need a hover/focus state, easy win for accessibility there
krsdcbl · 2 years ago
definitely - could use outline property, transforms/thickened borders or border radius animations if it's Imperative to keep things black and white
kmoser · 2 years ago
Agreed, maybe even just invert it to white-on-black on hover.
jug · 2 years ago
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.

yoavm · 2 years ago
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.
chiefalchemist · 2 years ago
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.

AeroNotix · 2 years ago
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.

louismerlin · 2 years ago
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.

asp_hornet · 2 years ago
It’s really cool, what was some of your inspiration and thoughts behind it?
louismerlin · 2 years ago
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!

[0] http://getskeleton.com/

[1] https://milligram.io/

[2] https://repfl.ch/

neitsab · 2 years ago
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!

reitanuki · 2 years ago
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.

kemayo · 2 years ago
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.
dlazaro · 2 years ago
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."

[1] https://practicaltypography.com/how-to-use.html

carlosjobim · 2 years ago
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.
notfed · 2 years ago
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.

geek_at · 2 years ago
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]

[1] https://picocss.com/

lf-non · 2 years ago
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.

louismerlin · 2 years ago
Very good point, I modified the page. The project started-out non-classless, so the term was more appropriate back then.
krsdcbl · 2 years ago
the somewhat lost term "boilerplate" comes to mind
bestest · 2 years ago
What you said is literally "Cascading Style Sheets stylesheet". Stick with "framework".
notfed · 2 years ago
Even W3C calls them "CSS stylesheets", it's pretty standard. It only sounds weird if you expand the acronym.
noduerme · 2 years ago
Why? Would you call a DVD disc a spaceship?
rcarmo · 2 years ago
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.
blowski · 2 years ago
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.