Remix.run Logo
▲ sphars a day ago

Some recent alternatives/successors/forks that are in the same vein as Pico

- 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/

▲anydigital 14 hours ago | parent | next [-]

For Blades CSS, we also set up a dedicated page outlining key details and fixes made in underlying Pico fork: https://blades.dev/css/pico/

▲lekolabe a day ago | parent | prev | next [-]

I was a big fan of pico! Such an inspiration. I created https://github.com/lekoala/actual-css as an attempt to get something modern yet as compatible as possible with older browsers (still ended up using popover because it's such a welcome addition to modern css). I'm still not sure modern css frameworks need to use layers (it breaks on older browsers) or anchor positioning (minimal js does the job, sometimes even better, and again: more compatible).

▲mikae1 a day ago | parent | prev | next [-]

All of them failed my ten second evaluation. It's amazing how many mediocre CSS frameworks that are out there.

▲bryanhogan a day ago | parent | next [-]

What do you think of https://starter.bryanhogan.com/ then?

▲potato-peeler a day ago | parent [-]

Useless - https://ibb.co/h1sRtYKF

▲assimpleaspossi a day ago | parent | next [-]

I don't see that on my Android phone with Chrome. Looks good for me.

▲ErroneousBosh a day ago | parent | prev [-]

What the hell browser is that?

▲abanana a day ago | parent [-]

It's broken in the exact same way in the last version of Vivaldi that works on Windows <10.

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.

▲ErroneousBosh 21 hours ago | parent [-]

Yes, but what browser is it?

▲dvdyzag a day ago | parent | prev | next [-]

Whats the first thing in a CSS framework that you notice and makes you say "nah"?

▲ErroneousBosh a day ago | parent | prev | next [-]

What's your ten second evaluation?

▲tasuki a day ago | parent | prev | next [-]

Despite its idiotic naming, I still use PureCSS[0]. Not sure why they keep maintaining it. I don't mind, nothing ever seems to change anyway.

How's your ten second evaluation of it?

[0]: https://pure-css.github.io/

▲ErroneousBosh a day ago | parent [-]

I'm using it but it's such a pain in the arse to find anything else online about 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.

▲tasuki a day ago | parent [-]

Yes it is a pain. But the whole thing is like two pages, so I^H my LLM just reads it. I used to read it. It was ok readable (and I'm not very good at CSS).

▲automatic6131 a day ago | parent | prev [-]

CSS frameworks are like children, almost everyone can make one.

▲potato-peeler a day ago | parent | prev | next [-]

None of them work on older browser - https://ibb.co/album/3kJP50

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.

▲hnlmorg a day ago | parent | next [-]

> So such frameworks utterly failing on such browsers is hilarious, given that they market themselves as minimal.

Minimal is an entirely different property to backwards compatibility.

▲potato-peeler a day ago | parent [-]

When you say something is minimal, you are implying that what little you provide will also work. Which in this case is clearly not.

motherfuckingwebsite.com is more minimal and usable than these frameworks.

▲hnlmorg 21 hours ago | parent | next [-]

> When you say something is minimal, you are implying that what little you provide will also work.

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.

▲digital_af a day ago | parent | prev [-]

As you're mainly complaining about CSS layout features being used here:

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.

▲potato-peeler a day ago | parent [-]

Security updates have nothing to do with level of support for css3 modules.

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.

▲ambigious7777 a day ago | parent [-]

I think its fine to target compatability with 99.9% on people with updated devices and not some random old 2020 safafi build

▲abanana a day ago | parent | next [-]

To be fair on this particular point, talking about iOS Safari before version 14 isn't "some random old build". It depends on your own users, but I saw plenty of 6-year-old iPhone user agents in the web logs when dealing with a doctor's surgeries app.

▲ 21 hours ago | parent [-]
[deleted]
▲potato-peeler a day ago | parent | prev [-]

Even though I provided a direct link to wcag principles and guidelines, you still are too lazy to read.

▲Milpotel a day ago | parent | prev [-]

> None of them work on older browser

There are older browsers which still get security patches?

▲potato-peeler a day ago | parent [-]

They don’t unfortunately but it is a good reference for me to check how it looks on previous versions of browsers and less powerful devices. That way I know if the UI or UX needs improvement.

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.

▲abanana a day ago | parent [-]

Exactly. Ad creators know that the purpose of what they're building is more important than their personal dev experience of using shiny new tools. It's such a shame the fashion is the other way for so many web developers, largely the younger and less experienced ones.

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.

▲malte_querier a day ago | parent | prev | next [-]

[flagged]

▲orion_ a day ago | parent | prev [-]

[dead]