- Nimble: https://leftium.github.io/nimble.css/demo/pico.html
- Sumi.css: https://vladocar.github.io/Sumi.css/docs.html
- Blades: https://github.com/anyblades/blades
- Oat: https://oat.ink/
From a quick look at the second horizontal strip that starts "what is this?", and without wasting time doing too much digging, it appears to be ultimately caused by using a grid layout for a heading followed by a few paragraphs, all of which fill the available (constrained) width, which amounts to one of the absolute simplest layouts possible in CSS - block. Last time I saw something similar, albeit with flexbox not grid, it was from a junior developer who appeared to have only learned flexbox and nothing else.
As a quick semi-fix, just disabling grid-template-columns on .base-layout is enough to fix almost everything except the constrained width.
The layout approach is based on this Kevin Powell video: https://m.youtube.com/watch?v=c13gpBrnGEw
It uses CSS Grid to create a centered, width-constrained content area while allowing individual elements to break out of it or span the full viewport width. This provides a flexible, consistent layout without the need for additional wrapper elements in the HTML.
CSS nesting has had full browser support for more than 3 years now, I recommend updating. I'll also add fallback for older browsers, but the Grid layout itself isn't the issue.
Yes, that's right. I thought I'd try it in that older browser that I still happen to have installed, as the user above didn't immediately let us know what that mobile browser was. It may or may not help by at least giving you a browser version you can use to test. As I mentioned somewhere else, it makes sense to use some sort of older browser as a proxy for older browsers in general, when testing.
Developers are always looking for new ways to do what we've always done, often using more technically complicated ways to recreate the simplest things. It's fun from the puzzle-solving point of view, but your choice of earliest browsers you want to support depends on your user base.
How's your ten second evaluation of it?
It's one of the reasons I'm planning on moving stuff over to Pico.
Or now, I guess, just writing some CSS from scratch, which I hate.
Ios 13.6 in my case, which was released just 6 yrs ago, 2020. For some context, flexbox gap was added in ios14.1, released in 2021. So iOS 13.6 was still usable atleast couple of years beyond that. So such frameworks utterly failing on such browsers is hilarious, given that they market themselves as minimal.
People keep forgetting that css3 was announced in 1999. And adoption roughly started from 2010. The css3 of that time is not the same as css3 you get to see in latest browsers. These minimal css frameworks are really useless if you don’t know what css3 features you are writing and who you are targeting.
And, I Haven’t even tested those in less capable browsers like dillo or netsurf, but I doubt they will even work there.
If you start looking into browser market share, you will quickly realise that there are millions of worldwide users who can’t use the web normally.
There are older browsers which still get security patches?
ios updates unfortunately ties everything to a single batch. Unlike android. I have an older blackberry, that still gets latest app updates.
What is even hilarious is ads render with pixel perfection on older devices. So for some reason, ad networks care about browser compatibility than devs putting the same ads on their incompatible website.
And yes, it makes sense to use one particular old browser as a general proxy for older browsers in general, so people shouldn't get hung up on the particular version of Safari you happened to mention.
I don’t care about what’s trendy, but using outdated, insecure browsers to surf the web is just plain stupid. Even more, expecting developers to waste time working around all the bugs in those old browsers is just insane. I do the opposite: as soon as a browser reaches EOL I drop the support. Don't encourage lazy admins and bad habits.
> expecting developers to waste time working around all the bugs in those old browsers is just insane
What bugs? The ancestor posts are talking about frameworks immediately using features that were just added to browsers - i.e. more recently than those older versions. Nothing at all to do with bugs. Can you help us to see what you've misunderstood here? Perhaps not dismissing users as "stupid", developers as "insane", and admins (?) as "lazy", would be a good starting point.
Seems to be a bad decision from the beginning.
> And developers really should know better than to fall for the marketing nonsense that anything more than 5 minutes old is "insecure".
Where have you been the last decades? Pick an arbitrary browser and go through their CVE list, e.g.: https://app.opencve.io/cve/?product=safari&vendor=apple
> What bugs?
I guess at that point I have to assume you have no idea about front-end development. Otherwise you would know what a pain in the ass old browsers with their inconsistencies are (e.g. remember the struggle with the early flexbox implementations?).
I don't disagree! But at the same time, part of our job as web developers involves acknowledging the reality of what our users actually do.
What do early flexbox implementations (something like 12-15 years ago?) have to do with anything? We're not talking about browsers as old as that! They weren't even bugs, they were early implementations of early versions of the standard, so who exactly is the one with no idea here? That level of browser inconsistencies is long gone.
Those of us with years of experience of building user-centric front-ends are not the ones who jump to use new browser features too quickly.
I won't be continuing this conversation, due to the general arrogance and condescension displayed in your posts - following "stupid", "insane" and "lazy" with "bad decision", "where have you been" and "you have no idea".
It shows that a) new technologies may add value and also that browsers constantly fix bugs due to complex or underspecified standards. It was just an example, go through the issues lists and you find a lot more.
> not the ones who jump to use new browser features too quickly
That's reasonable but there is a point where support just should be dropped. Don't support IE 5 for ages just because someone is too scared to update. Let them fix their technical debt. Encouraging people to access the internet with insecure software is not acceptable. Btw. that was the argument you completely ignored in your reply.
Minimal is an entirely different property to backwards compatibility.
motherfuckingwebsite.com is more minimal and usable than these frameworks.
For a long time we were forced to use the ugliest hacks imaginable to get to the nice (responsive, design-minimalist(!)) layouts we wanted, because CSS layout tools were utter archaic bs, for years on end, because browsers iterated so slowly.
Then things started speeding up, and we're getting to make better websites (and apps!) that are way easier to design (with the correct design theory equivalents), implenent (with less code) and easier to maintain (i.e., understand). And you're not missing out if you just keep your browser up to date.
I know it sucks if you're on an unsupported device that doesn't get any updates, fair.
But let's face it: 99% of the population is better off security-wise when we're not enabling them to run unpatched devices forever.
Much of the issues of layout were already solved more than 12 yrs back, ie when css3 became mainstream.
The issue is devs are unaware about different levels of css3 or just plain ignorant about it.
Are you aware about the different levels of css3? Are you even aware there are levels to css3? Why are these frameworks not listing them and simply saying that they comply with web standards? Which specific web standards do they comply?
Any new css3 feature should have a fallback if they say they comply to web standards, which these frameworks don’t add.
Basically you want to adopt latest w3c guideline but completely ignore wcag guidelines on accessibility - https://www.thewcag.com/principles/robust
Why should some population forced to suffer because of your ignorance. I am sorry if I am blunt, but your comment about polarising users is rude.
Which comes back to my main point, Devs are simply not educating themselves about the fundamentals of web design.
No you do not. You just saying it’s got very little code and/or very few features.
Support for older browsers might not be one of those features. Which means this minimal frameworks isn’t suited for the kind of projects where that kind of compatibility is a concern.
If you look outside of CSS (and particularly web development as a whole) you’ll find a plethora of minimal frameworks that intentionally make compatibility trade offs.
> Which in this case is clearly [does not work].
That’s a gross exaggeration and you know it.