Simple.css – A classless CSS framework

Simple.css is a well done classless 'framework'. I stumbled on it a while back and started using it and thought this can be my go-to styles for tit-bits of websites that I do for landing pages, family websites etc. However, this is pretty opinionated (including some animations) and I had to abandon it. But I remained inspired by its simplicity and forked my own[1] broke it down. I broke it down to the most basic, but then can be built on top of it -- progressively get a website "designed" far enough but not further.

If you are into these simple classes, check out Drop-in Minimal CSS[2] and choose the one that fits your need.

Simple.css is from an interesting guy, Kev Quirk[3], whose 512kb[4] website was on Hackernews a while back (don't recollect if it was a story or a comment). Hi Kev, if you are around.

If you are spinning up a simple website with classless styles, perhaps it is a good idea to add a print styles and I like Gutenberg[5] for that.

1. https://oinam.github.io/oinam-jekyll/

2. https://dohliam.github.io/dropin-minimal-css/

3. https://kevq.uk/about/

4. https://512kb.club

5. https://github.com/BafS/Gutenberg

Creator of Simple.css here.

Thanks for all the feedback and comments here, folks. It really is appreciated.

I’m not a professional web designer - this just started off as a personal project that I ended up publishing as people I shared it with seemed to like it.

I’m taking on board the various feedback from people much more knowledgeable than I here, again I really appreciate it.

If you do have feedback/changes I’d urge you to log an Issue or a PR on Github[1].

Also great to see so many other minimal CSS projects that I wasn't aware of. I’ll have to add an alternatives page to the site, I think.

[1] https://github.com/kevquirk/simple.css

I saw someone had a massive list of similar CSS frameworks here:

https://news.ycombinator.com/item?id=29565438

Edit: also in here it’s a tool to quickly compare them all. I don’t know if one can mention a user so I’ll just link the comment.

  <button onclick="window.location.href='https://example.com';">I'm a button with a link</button>

This code from the demo shows, why not using classes to style a website is a misguided idea.

Maybe something like this would be a better idea if you absolutely must avoid classes:

https://jsfiddle.net/qa2cdj4v/

  <strong><a href="#">Button</a></strong>

  strong > a:first-child:last-child {
    display: inline-block;
    background: red;
    color: white;
    padding: 10px;
    font-weight: normal;
  }

I can see straight away from the home page that there isn't enough margin before h1 > p in the case of the title, and the vertical rhythm is a bit off.

Aside from that, the semantic styling for `header` and `nav` is really clever and well done. Looks good.

A nitpick perhaps, but I was surprised to see `cite` used to enclose the author's name in your `blockquote` example. I was under the impression that `cite` is meant to be used to mark up titles of books and similar, not author names, and MDN[1] seems to agree with me here.

That aside, nice work! This could surely be useful as a default stylesheet for Markdown documents and the like.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ci...

Haven't seen bamboo mentioned here yet: https://rilwis.github.io/bamboo/demo/

Another great classless css framework is new.css (https://newcss.net/).

A lot of people like the larger, more thorough frameworks because:

1. they think it makes newer devs can feel safer

2. dev teams can simply agree on an pre-made modus-operandi for all css without having to have discussions/evolutions on it.

But for 1, it also gives newer devs a steeper learning curve, and it gives older devs Yet Another Framework to learn and then possibly discard in a few years. It's also often used like a crutch, where yes the newer dev may feel safer, but they're also not exposed to as many discussions or reasoning around well-organized styling, cleaner semantics, etc.

And for 2, it can also add overhead to dependency audits and often for the large frameworks with pre-made components you can end up spending significant resources fighting/working around the framework components when the inevitable unforeseen use-cases come up

Nice. Comparing with MVP.CSS, another class-less CSS framework, this has less feature (MVP has a way to create cards), but also seems to avoid two things that I don't like about MVP: centered block quote, and links without underline.

Similar to MVP.css: https://andybrewer.github.io/mvp/

But always happy to see more classless CSS options.

Disclosure: Author of MVP.css

Love these simple classless frameworks. Inspired me to create my own:

https://sphars.github.io/yacck/

Very cool project !

I created my own classless CSS framework[1] in the same vein. It adapts to your system’s dark/light mode and is under 1kb minzipped.

I would recommend to check out the drop-in minimal CSS page if you want do discover new projects like these.

1. https://concrete.style/

2. https://dohliam.github.io/dropin-minimal-css/

Sometimes folks do things like "The <span> in the <p>aragraph of the <article> will be font-weight: 300" and that stuff is more difficult to keep track of than classes. Beyond the existing HTML tags if everything is a <div> that may end up being more semantic and easier to parse. Web components is an ugly and terse way of achieving it, but too JS dependent and annoying.

Resets:

• https://meyerweb.com/eric/tools/css/reset/

• https://piccalil.li/blog/a-modern-css-reset/

• https://www.joshwcomeau.com/css/custom-css-reset/

• http://www.vcarrer.com/2010/05/css-mini-reset.html

Normalize:

• https://necolas.github.io/normalize.css/

• https://csstools.github.io/sanitize.css/

Starters:

• https://simplecss.org/

• https://andybrewer.github.io/mvp/

• https://watercss.kognise.dev/

• https://vanillacss.com/

• https://newcss.net/

Reminds me heavily of Water.css [0]

[0]: https://watercss.kognise.dev/

When it comes to being minimalist, can you not make TailwindsCSS as minimal as necessary or go crazy with it as you see fit? I found it having the right balance. Especially since it is popular with better support and good documentation.

Just curious about the thoughts since I have never dived the classless CSS train. Also am new to front-end.

A big fan of Simple CSS (I see a lot of personal sites using it, actually). I’ll also share my own minimal, classless CSS framework Vanilla CSS[0]

[0]: https://vanillacss.com

Yes, please.

The emphasis away from semantic HTML and towards component-based frameworks with all the associated utility CSS classes has been a disaster for accessibility, and it's good to see projects that have all users in mind.

it's more like a CSS reset file than a framework. in that case I don't see adding 4kb is necessary. I'm more a fan from styling everything from scratch rather than using any CSS framework.

we just need better tooling to write better CSS faster not necessarily including prewritten CSS.

I deeply believe this is where CSS going and this why I'm building https://intab.io to push towards that direction myself.

I am a big fan of classless CSS frameworks. I hope that anyone who sells/shares web design templates can learn from this philosophy of using classless framework.

Now, all we need is to get to take these CSS libraries turn into "themes" for https://headlessui.dev/ widgets. Bonus points if we agree onto some standard set for variable names, so frontend developers could then literally just change the "import css" file at the top and have completely different styles.

Nice! PicoCSS (http://picocss.com) is another classless css framework I recommended

I called my classless (even though it really wasn’t, just like in politics) CSS library marcssist https://github.com/jacobrask/marcssist Barely even used it myself though, if anyone else likes bad puns feel free to steal the name

Highlight styling looks too much like the button styling.

https://simplecss.org/demo#links--buttons

https://simplecss.org/demo#other-typography-elements

Yo: https://github.com/kevquirk/simple.css/blob/main/simple.css#...

    img, video { opacity: 0.6; }

Do not like. Not even for dark mode.

A love style sheets like this that just work with plain, semantic HTML. For a while I used this one on a site of mine: https://github.com/programble/writ

Which I believe I found here on HN some time ago.

I collect a list of similar lightweight/drop in CSS frameworks here: https://github.com/sw-yx/spark-joy#drop-in-css-frameworks

enjoy!

Meta question: I really love this post/framework, but have no use for it right now, so I'm putting it in my bookmarks where my ability to pick it back up relies on my memory of this post. How do you guys manage your bookmarks?

Good idea, doesn’t look very nice on mobile though. I think the text is too big and the borders on the side too small.

Maybe it’s possible to build something similar based on tailwind (with a lot of @apply), which would allow customization.

  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

Here are better stacks that achieve almost identical results for almost all users that haven’t customised their font stacks, but respect user preferences better:

  --sans-font: system-ui, sans-serif;
  --mono-font: Consolas, monospace;

(If Mozilla would get on and fix <https://bugzilla.mozilla.org/show_bug.cgi?id=713680>, I’d ditch Consolas, though you won’t want to leave it at just monospace because of the stupid default monospace font size thing [that should really never have happened but should absolutely have been retired by a decade ago], so most people write `monospace, monospace`, though I like to shorten it to `monospace,m`.)

  /* Line height is set to the "Golden ratio" for optimal legibility */
  --line-height: 1.618;

That comment seems disingenuous, especially given the `line-height: 1.1` applied to headings which shows an awareness of the issues. There is no single optimal value: it varies by font, by size, by line width, by reader’s eyesight… you can’t just slap a nice mathematical ratio on it and call it optimal. As it stands, 1.618 is decidedly on the high side, though not outlandishly so. I personally prefer 1.4.

  body {
    overflow-x: hidden;
  }

Please don’t. If this does anything, it’s a sign that you’ve written something the wrong way, and if it doesn’t, you should be scared that it will in the future, and will cut off some content and render it inaccessible, rather than breaking out of your site layout but leaving the content intact. In this case, it looks to have been done because the width limit was applied to the body element, but not desired for the header and so worked around, but the trouble is that you can’t do that correctly because CSS doesn’t have suitable units (vw and vh are fundamentally stupidly broken by design (the spec provided an esoteric way of unbreaking them, but only Firefox implemented it, so eventually they removed it), and always wrong, though the amount of error is sometimes tolerable for some restricted purposes). The width limit should rather have been applied to descendants of the body (main/footer); then you could leave the body overflow alone.

  @media (prefers-color-scheme: dark) {
    img,
    video {
      opacity: 0.6;
    }
  }

Eww. Eww. This is a horrible idea to apply as a general rule: it’ll be suitable for some images (… by accident as much as anything), but ruin others; and a 40% reduction is excessive. But not only that, opacity is the wrong technique, being sensitive to the background (the most extreme example: put an image inside a <button>); a filter using brightness and/or contrast would be better.

—⁂—

Although I’m not impressed with some of the stuff at the start of the stylesheet, after that it looks pretty solid. There are occasional points that I’d quibble over, but nothing major. I’ll stop here, this comment is already moderately long.

Hmm. I always seem to do some kind of review when these things come up here, can’t quite help myself; I should get on and finish starting that new section on my site for such matters (reviews, occasionally of projects, more of code, mostly CSS/JS/Rust).

seems similar to normalize [1]

1: https://nicolasgallagher.com/about-normalize-css/

This might sound like a good idea, but sooner or later you will need to integrate some third party library, and you’ll see that properly scoping your styles is better.

Could someone explain the purpose of globally setting image and video opacity to 0.6? I'm confused as to why this framework sets that by default.

How do you theme this? The Showcase all has sites with a similar layout, but different color schemes. Do you have to modify the css file?

Thanks for doing this, it's a great response to the current trend in providing endless of css and js just to display basic sites

I really like it, but it needs more work on the navigation.

A more conventional looking navigation similar to Bootstrap's would be nice.

I was hoping for a solution like vanilla-js

http://vanilla-js.com/

Ah well.

Install from NPM? Seems strange to have a simple css file as a dependency. Is there a reason for this? Genuine question.

In the recent years, I have ample themes to style my markdown based blog site which no one reads.

What would the web look like if this (or similar) was the default stylesheet in all browsers?

This is really interesting. I’d like to see it handle layouts like sidebars (aside).

This is nothing new, and it's a bad idea to use this in production. Component you import assume a certain set of default styling, if you overwrite the defaults it'll cause issues. Same as for overwriting javascript prototypes

I love this!!

Will be using this for quick lightweight websites.

Website broken / cuts off on Safari ...

"simple" -- I wish we'd retire this word. We're all in the desert, and there is not yet an oasis.

Where can I get good introductory materials on HTML and CSS? I don't want frameworks.

This is my similar project from 2015: Marx - The classless CSS reset (perfect for Communists) https://mblode.github.io/marx/

See also https://mblode.github.io/marx/

aka yet another markdown css

But if you have a cache hit for minified bootstrap css, which is very likely after a little bit of surfing, then it's 0kb data compared to 4kb.

It's a bit like shared libraries in linux, you might just use the library that almost everyone has installed or you compile a static binary, both solutions have their pros and cons.