Hacker News Reader

Comment by ntoll | Hacker News Reader

This is a similar project (by a friend), that recreates the look and feel of the outstanding UK Government design system:

https://gdcss.netlify.app/

Same idea and Pico (classless, simple, small etc).

View on HN

This is great! I've added it to this big list[0] of classless/minimal CSS frameworks (100+ frameworks) to make it easier to compare to other similar projects.

For those interested in Pico (which is already on the list), you can preview it on some boilerplate HTML here[1] or use the Javascript bookmarklet[2] to preview how it would look on any arbitrary page, which can be helpful for prototyping a new site.

[0]: https://github.com/dohliam/dropin-minimal-css [1]: https://dohliam.github.io/dropin-minimal-css/?pico [2]: https://github.com/dohliam/dropin-minimal-css#bookmarklet

This is very cool! Maybe 2 feature requests, if you're taking them:

- Have some popularity measure (github stars or otherwise) either in your list or hosted somewhere

- Have screenshot previews of anything, hosted somewhere (would be a bit quicker to browse through the list).

A lot of the lists (UL) break for many of the libs in the demos, including pico [1]. Also in pico, the cursor remains "default" instead of switching to "text selection" when you hover over text to select it - is that a style choice?

@dohliam do you have some favorites, ones with the least "errors" and non-standard paradigms?

[1] https://dohliam.github.io/dropin-minimal-css/?pico

> A lot of the lists (UL) break for many of the libs in the demos, including pico

Unordered lists look okay to me[0], but it's possible that you are referring to the navigation section at the top of the page which technically contains a UL as well. This is just a boilerplate HTML5 template[1] with Pico CSS applied on top, so it seems that Pico doesn't have special handling for this particular usage of ULs nested in NAV elements (some frameworks turn these lists into a navigation bar or even dropdown menus, but it's interesting to compare how each of them works out of the box).

> the cursor remains "default" instead of switching to "text selection" when you hover over text

This is directly from Pico CSS itself -- check out the homepage[2] and you will see that the same thing happens there as well.

[0]: https://dohliam.github.io/dropin-minimal-css/?pico#text__lis...

[1]: https://github.com/cbracco/html5-test-page

[2]: https://picocss.com/

Thanks for sharing. The UK Gov design system is a delight for my aging eyes.

For those curious, the UK Gov design system is also a publicly available resource:

https://design-system.service.gov.uk/

https://frontend.design-system.service.gov.uk/

Both this and Pico are very inspiring. Looking through the gdcss docs was a lesson in itself - I was shown tags that I'd not previously known or thought about. Which is an admission that I tend to rely on (much to) large CSS frameworks to do their thing too much.

Reply on news.ycombinator.com