Simple.css – A classless CSS framework

Simple.css – A classless CSS framework

108 comments

·January 14, 2022

Brajeshwar

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

johnisgood

Wow! https://dohliam.github.io/dropin-minimal-css/ is amazing.

I had absolutely no idea that you can have such a color picker with pure HTML. When I click on it, my browser's color picker comes up. This is amazing. I always had issues picking the right color picker or implement my own. I love the date input as well! Thank you!!!

mcintyre1994

The MDN docs on inputs are worth a look, there's really good coverage now of the sorts of things that used to need custom JS https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

If you give the colour picker a little more height than the one in that link then it'll display the selected colour as well, which you can see in the MDN one.

ecliptik

Kev also runs Fosstodon [1] which is an awesome Mastodon instance focused on free & open source software.

1. https://fosstodon.org/about

smoldesu

I see a ton of cool fedi people from that site. Rock on!

kevq

Hi!

kevq

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

tgb

I was looking for something just like this two weeks ago and came up empty due to Google being filled with just the huge frameworks like bootstrap or with SEO listicles with no content. It's disappointing how hard it can be to find stuff like this. (I guess "classless" is the keyword I wasn't aware of.)

Anyway, I'm confused about what makes something a CSS 'framework'. I feel like I just want decent defaults more than a framework, and that seems to be what this basically comes down to. Is there anything else to it?

FrontAid

You can have a look at https://github.com/troxler/awesome-css-frameworks which is an extensive collection of CSS frameworks. Check out the "Class-less" section for similar projects.

There is also an open PR to add Simple.css to the list: https://github.com/troxler/awesome-css-frameworks/pull/85

kevq

That’s what I see a framework as being - sane defaults. It’s a way to get started quickly without having to write everything from scratch.

I would argue that “frameworks” like Bootstrap, Tailwinds and their ilk are more ecosystems than frameworks, but that’s just me. :)

swyx

ive been collecting a list of alternatives if you wanna pick https://github.com/sw-yx/spark-joy#drop-in-css-frameworks (or point to it)

irq-1

Forms should support the required attribute, and :optional, :invalid, :valid

https://developer.mozilla.org/en-US/docs/Web/CSS/:required

Client-side form validation - https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_va...

Nice work.

animesh

Hey kevq, thanks for simple.css. I started using it last year on my blog and love it. After some modifications, maintenance work on styles has reduced considerably. Love it, thanks.

kevq

Really glad you’re enjoying it! :)

UltraViolence

Could you make the navigation look more like Bootstrap's NavBar with a simple flat items? The button menu looks weird.

pchangr

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.

jebronie

  <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;
  }

thomascz

I can't understand why so many websites use an onclick handler on a button to redirect to websites. It's not hard to even find something like <a href="#" onclick="location.href='https://example.com';">click here</a>

The worst part is that it's not just random websites doing this, this can be found on most FAANG websites as well.

fath0m

why not just use

  <form action="https://example.com"><button type="submit">Link button</button></form>
no need for JS

stefanfisk

Because you cannot make `form` `inline-block` for only this instance without classes.

yurishimo

Why not use use an anchor tag?

notjustanymike

Yep that's a pretty fundamental accessibility failure.

aetherspawn

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.

TiredGuy

I wish more designers would look at these minimalist frameworks and add helpful feedback like this. I feel like the aesthetics of a lot of them could be improved with more attention from designers.

Xevi

It seems intentional. H1 and paragraphs placed in headers don't have any margin.

header h1, header p {

    margin: 0;

}

digisign

Interestingly, there is margin there.

wastholm

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

chrismorgan

The recommendations on markup for citation sources has changed significantly over time. Originally they said something like <blockquote>… <cite>…</cite></blockquote>, then they changed it to <blockquote>… <footer><cite>…</cite></footer></blockquote>, now they seem to be saying <figure><blockquote>…</blockquote><figcaption><cite>…</cite></figcaption></figure> Similarly what should be included in the text inside a <cite> element has changed over time.

Frankly, since the cite element has no implicit ARIA role and is normal flow and phrasing content, it’s roughly just another spelling of <i>. Don’t worry too much about its nominal semantics, they’ll probably tweak them again before long.

kevq

That’s good to know, thanks. I always (incorrectly it seems) assumed that a citation was valid within a blockquote too.

13324

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

bdn_

new.css developer here, thank you :) Happy to see people still enjoying it. I've been meaning to update it for a very long time, but have been working through a lot of coding-based anxiety and burnout for a while.

It's encouraging to see people still using new.css though, and I hope to work on upgrades soon!

synergy20

new.css is my default classless css. Thanks for your work!

bdn_

Thanks for the support!

nickcox

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

TiredGuy

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

glacials

I see a bit of straw man here -- thorough frameworks are often liked _because_ they're thorough. Simple.css looks fantastic and I'll reach for it next time I make a simple personal site, but for a professional website with a hundred pages and design considerations that go way beyond "it should look pleasing", I need more levers, leverage, and turnkey components.

TiredGuy

I certainly see your point that any unsatisfactorily complete benefit-drawback list is going to seem like a strawman. I meant to point out some of the more commonly stated benefits and contrast them to the less commonly considered drawbacks, but I would also enjoy seeing this thread evolving into a more complete list.

I also agree with your other point that that is a benefit for having more bells and whistles in a single branch of dependencies.

powersnail

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.

edoceo

Too right! I want my links to look like links, something to identify that it's a clickable.

kevq

Im a firm believer in links being underlined. I also wanted it to be a little opinionated, as to started life as a personal project, yet easy to customise.

awb

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

But always happy to see more classless CSS options.

Disclosure: Author of MVP.css

fareesh

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.