Thread

CSS Bed: Classless CSS themes to use as starting points in web development

166 points · 48 comments · sea-gold

Loading the complete thread in the background. This saved snapshot is available now. Refresh

nilslindemann · 1790891624 · focus · HN ↗
For me it is definitely Pico.css. Honorable mentions: simple.css, tacit, w3c-chocolate.
1. robertclaus · 1790896100 · focus · HN ↗
  I like marx
2. jimmydoe · 1790902873 · focus · HN ↗
  pico css has a newer fork: <a href="https://mucss.org" rel="nofollow">https://mucss.org
  1. steezeburger · 1790904134 · focus · HN ↗
    Brb, gotta go cough up some mucss
  2. lofties · 1790906283 · focus · HN ↗
    "Lightweight ~120 KB uncompressed"
    We have different definitions of lightweight it seems like.
    chrismorgan · 1790910982 · focus · HN ↗
    Well, μ- is a million times bigger than p-. But last time I looked <<a href="https://news.ycombinator.com/item?id=45163827">https://news.ycombinator.com/item?id=45163827>, Pico CSS was 83 kB—nowhere near as small as that name would suggest, either.
    frereubu · 1790922286 · focus · HN ↗
    When I worked at the BBC in the late 90s / early 2000s the home page of any site - including images - couldn't be more than 70kb!
    frereubu · 1790944107 · focus · HN ↗
    Just checked - now the homepage of the BBC on load has a transfer of 1.5MB with 5.7MB of resources, and once you've scrolled down the page for the lazy loaded images those figures are 2.9MB and 7.2MB respectively.
3. ctippett · 1790922174 · focus · HN ↗
  holiday.css for me, only 5kb to boot.
4. shrikant · 1790938812 · focus · HN ↗
  I used chota.css (<a href="https://jenil.github.io/chota/" rel="nofollow">https://jenil.github.io/chota/) in the past to build a couple internal sites for my then-employer. Only ~3kb compressed! And the name stays relevant-ish because it means "small" in Hindi...
sphars · 1790892521 · focus · HN ↗
Reminds me of this website for checking classless stylesheets.
<a href="https://dohliam.github.io/dropin-minimal-css/" rel="nofollow">https://dohliam.github.io/dropin-minimal-css/
e12e · 1790893734 · focus · HN ↗
[2019]
But might be due a revival on the shoulders of LLMs.
ivanjermakov · 1790894716 · focus · HN ↗
Correct terminology: <a href="https://en.wikipedia.org/wiki/Reset_style_sheet" rel="nofollow">https://en.wikipedia.org/wiki/Reset_style_sheet
1. szmarczak · 1790896701 · focus · HN ↗
  What does resetting inconsistent browser behavior have to do with classless styling? Those two aren't the same.
maxk42 · 1790897658 · focus · HN ↗
I love classless CSS for rapid hand prototyping. LLMs are making this increasingly less necessary, but it's still great for creating tiny, performant CSS pages and some of the smaller ones can even be inlined in fewer bytes than it takes to make a 2nd round trip to the server to check if the asset has been updated. This is one of my secret weapons for creating web apps that load and render so fast you can feel the difference!
jrapdx3 · 1790898595 · focus · HN ↗
Interesting. Having made websites I think "of course that makes sense!". As a practical matter, getting wanted page appearance can require adding a few classes. I've been guilty of class proliferation caused by perfectionistic tweaking of things to the last nanogram. Anymore I strive not to go there.
matthova · 1790899142 · focus · HN ↗
Love the idea. It's really painful to cycle through every theme. Would be great to have a way to scroll through them directly, though... that would result in a bigger bundle, and I respect the hustle
1. edflsafoiewq · 1790901538 · focus · HN ↗
  Here some quick thumbnails for all of them: <a href="https://i.imgur.com/KXjiYxO.png" rel="nofollow">https://i.imgur.com/KXjiYxO.png
[deleted] · 1790902847 · focus · HN ↗
[deleted]
thih9 · 1790910606 · focus · HN ↗
I’m surprised how few of them support dark mode.
IMHO today dark mode support is part of reasonable defaults.
1. etatester · 1790914026 · focus · HN ↗
  I think they're just really old and not supported by anyone.
2. TZubiri · 1790914934 · focus · HN ↗
  Wrote some css from scratch the other day, 7 lines and I was done, line 8 are 9 were dark mode support integrated with OS setting.
  It's not that complex, there's some minimal frameworks here with 10kB of css code, it's ironic.
3. small_scombrus · 1790915526 · focus · HN ↗
  It's honestly horrifying how many website just don't bother.
  Like w3, the makers of the web accessibility checklist have a flash-bang of a website and noone appears to have cared enough to fix it
  1. Yokohiii · 1790934282 · focus · HN ↗
    What are the reasons why you want dark mode so badly?
    testerius · 1790949994 · focus · HN ↗
    Because there are different people - many of them like using dark mode.
    kdkekxjjexnek · 1790951230 · focus · HN ↗
    I think the “flash bang” comment gives you a pretty good, convincing idea of why this is sorely needed.
    nottorp · 1790951409 · focus · HN ↗
    To take advantage of oled and local dimming displays, for example.
    Thank you for not caring about my battery.
    HappMacDonald · 1791101871 · focus · HN ↗
    Not OP but I have an unusual investment in preventing my eyeballs from being stabbed repeatedly until they bleed.
4. dantesays · 1790959903 · focus · HN ↗
  [dead]
zenoprax · 1790911086 · focus · HN ↗
Some really unexpected domain redirects for this one for some reason: <a href="https://www.cssbed.com/vanillacss" rel="nofollow">https://www.cssbed.com/vanillacss
All the others are as you'd expect.
1. n3storm · 1790940768 · focus · HN ↗
  I came here for this.
  I was very curious for the reason and I found it. Cssbed is not hosting css files but loading upstream css and <a href="https://vanillacss.com/vanilla.css" rel="nofollow">https://vanillacss.com/vanilla.css has been hacked/hijacked, so no css is being loaded but HTML full of crap.
  I thought if request origin or content-type was stylesheet no href GET should be triggered (maybe src) but looks like full HTML site is being rendered behind the scenes of a simple css request.
needfish · 1790911367 · focus · HN ↗
I had a server-side app made for personal stuff, and pico.css drop-in is a pretty good baseline for an usable UI/page. Also visited some web hosts and their sites look perfectly serviceable with Bootstrap. I think it's a good way to railroad some of the more egregious things LLMs might do with regards to CSS.
shikwasa · 1790916089 · focus · HN ↗
I understand the "starting point" part but I find the emphasis on "classless" interesting: you basically have to introduce a non-element selector as soon as you want make even the smallest layout change.
For anything beyond a single page document, I find something like matcha.css (<a href="https://matcha.mizu.sh" rel="nofollow">https://matcha.mizu.sh, you can even pick your custom build on the same page) a practical starting point if you want to stay close to the elements.
1. _heimdall · 1790941801 · focus · HN ↗
  I tend to start a project by making a classless stylesheet of sorts to set a baseline for the theme and branding.
  Its almost never all you need for an actual project, but it is a nice starting point to get the basics in place.
  I find that I look at the endless list of classless stylesheets shared online as a starting point, most have at least one or two interesting tricks worth borrowing. I don't find using the off the shelf ones particularly useful though, it ends up with a very generic look to it like the old default bootstrap site or newer default tailwind site.
2. nilslindemann · 1790943047 · focus · HN ↗
  [delayed]
mikae1 · 1790918834 · focus · HN ↗
Eye opener. I think i looked through almost all of them and none got basic typography right, such as less margin bottom beneath a heading (to the paragraph following it) than above.
Many had zero left/right margins on mobile.
Overall terrible defaults.
1. dematz · 1790951866 · focus · HN ↗
  Is there any classless CSS that you do like, that looks good on mobile etc?
  1. mikae1 · 1790958419 · focus · HN ↗
    Not that I know of.
boxed · 1790920941 · focus · HN ↗
It's sad that most of these themes makes buttons not look like buttons.
1. ctippett · 1790921779 · focus · HN ↗
  Not only that, but very few of them differentiate between a visited link and an unvisited one. I noticed this immediately when clicking through the list of themes and getting no visual indication of which ones I'd already looked at.
2. thiht · 1790935746 · focus · HN ↗
  Which one? They all look like buttons to me
stymaar · 1790943223 · focus · HN ↗
I didn't know what "classless CSS" meant so I clicked the link and I like this joke:
> Classless frameworks are not just for communists. But I imagine communists would enjoy them even more.
toymin · 1790945005 · focus · HN ↗
Quite a few of them look off on mobile, they either have no edge margins at all or they're too large and force the user to scroll horizontally
1. newsy-combi · 1790959526 · focus · HN ↗
  OP frankly can't be a serious dev with results like these. It's most likely slop. This looks like a CV project to impress some HR Karens with HN/github clout, to land a job as an AI meat proxy...
droidjj · 1790948071 · focus · HN ↗
Am I the only one who prefers unstyled HTML?
bryanhogan · 1790948428 · focus · HN ↗
I've been building something similar!
A setup for simple plain CSS that can scale. It's split into a reset.css, var.css, global.css, util.css and markdown.css.
Using that approach for this Astro Starter Template: <a href="https://starter.bryanhogan.com/" rel="nofollow">https://starter.bryanhogan.com/
I describe the setup in more detail here: <a href="https://webdev.bryanhogan.com/css/css-setup/" rel="nofollow">https://webdev.bryanhogan.com/css/css-setup/
testerius · 1790949891 · focus · HN ↗
I have not written any CSS from scratch since years. Does normalize.css/reset.css are still viable and used? I use Tailwind because of components design, so I wonder what actually current trends are in context of small/alternative CSS solutions.
1. drewbitt · 1790951805 · focus · HN ↗
  Resets are still viable. They've become shorter over the years as css has advanced. Obviously if you write Tailwind you don't need a reset.
  For small/alternative stuff, since nesting/has()/ field sizing and such is native now there's not much to do there, so what's mostly relevant is some classless sheets like pico or simple.css.
real_faxenoff · 1790955983 · focus · HN ↗
[dead]
fabiofzero · 1790957056 · focus · HN ↗
This is great! I've been going in a similar direction with HTML3000 - <a href="https://html3000.dev" rel="nofollow">https://html3000.dev
newsy-combi · 1790959227 · focus · HN ↗
Aaaand the <pre> overflows horizontally on mobile. Tell me more about how you're a frontend dev and not a meat proxy for an AI slop machine.

Open on Hacker News to reply ↗

Unofficial Hacker News client; not affiliated with Y Combinator.