Concrete.css(concrete.style) |
Concrete.css(concrete.style) |
(Microsoft has attempted this in Metro, but quickly withdrew from this idea)
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.
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.
<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>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.
https://medium.com/@h_locke/why-dark-mode-causes-more-access...
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.
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.
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.
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."
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]
I like the concept of classess css but most of the solutions I looked at (before pico) were just not very pleasing oob.
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.
just checked out pico classless and it also works great.
1. Modify the base font-size to 62.5% so that 1.6rem = 16px.
[0] https://github.com/milligram/milligram/blob/d895f179623b56f3...
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.
Thanks Cloudflare
[0]: www.slackware.com
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.
I believe it's called concrete because of brutalist architecture and how it's almost always made with concrete
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.
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.
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.
[1]: https://github.com/naiyerasif/site/blob/1d43c689c7c4035e2e02...
I created the style-sheet to be as minimalist as possible, but there is such a thing as too much minimalism.
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.
There's a myth going on that dark mode is universally/objectively better which is simply false.
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.
Low contrast is hell.
Black text on white background all day.
Sure, if I don’t do it “somebody else would”, but I wonder if that mentality has taken us here
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 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.
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.
@media (min-width: 800px) {
#page {
grid-template-areas:
"header header"
"menu content"
"footer footer";
}
}
@media (max-width: 800px) {
#page {
grid-template-areas:
"header menu"
"content content"
"footer footer";
}
}