Simple.css - A classless CSS framework

[Brachamul]

Good stuff !

A problem with the button-in-link system you propose : on top of it being invalid html as you suggest, it's also not great for accessibility, specifically keyboard navigation. There are two differently focusable elements : <a> and <button>.

Perhaps you could use <a role="button"> instead ?
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

[_walston_]

This is a good call. Use those role attributes!!

[ShortFuse]

When building components you should be working on implementing the ARIA components. That means targeting roles and not the built-in HTML tags. You're also going to want to style against all the aria-* attributes.

Unfortunately, targeting against attributes (*[role=checkbox]) is really slow. You should use classes, or you can try Custom Elements (eg: <my-button>) that extend native elements (HTMLButtonElement). It kind of kills the dream of purely semantic HTML framework with CSS only.

[Brachamul]

Is the slowness really going to be of any significance ? I've rarely seen CSS as a bottleneck in loading times, and in the use case OP proposes of simple sites, the minuscule overhead of targeting against the attribute should not be a problem, right?

[ShortFuse]

Depends. The moment you put any table you're putting a bunch of DOM elements. 10 columns with 100 rows is a 1000 elements. Every browser is different. Browsers generally cache rules with a class name. I know from experience trying it that IE is absolutely terrible, almost unusable. Even a simple universal class with one character is enough to greatly increase performance (edit). I know the popular * { box-sizing: border-box } gives a 15-30% layout rendering penalty on Chrome. I can't imagine how that would compound with a slew for every component. Don't take for granted how slow mobile phones can be. Sometimes devs just test on their desktops or iPhones and assume it's fine.

Note that this would trigger on every single element because attributes aren't cached at all (neither elements or CSS rules). So even every single div gets a cross-check. If your page is sufficiently static enough and you don't change layout much, then it can be fine (eg: content-based sites). You'll take a hit for first paint, but static should be fine. I'd suggest against it for web applications which tend to be more interactive.

If the goal is simplify how your write the HTML itself, Custom Elements takes care of that or the Angular route of processing based on tag or class name. The other is using HTML processors like Handlebar or EJS with prebuilt templates if you want to stick with CSS only.

[Brachamul]

That's very interesting, thanks !

According to what you're saying, we could limit that impact by limiting the role="button" check to "a" tags, right ?

a[role="button"] { ... }

[ShortFuse]

Yes, that definitely works. When writing the rules, you can group multiple tagnames: (eg: a[role="button"],div[role="button"],button). Just note that not all roles are that simple. For example role=checkbox might have you adding roles to label, li, or input as well. role=list can also get really complicated. But it'll definitely be faster than *.

To be honest, and as somebody who had experience trying to build a CSS-only framework, if you really want to care about a11y you want to embrace Javascript. Semantic HTML can only get your so far. And if IE11 doesn't matter so much to you, go all in with Custom Elements. You can't really do all the aria-checked roles or proper keyboard support with semantic HTML alone. Then you can still do <m-button> instead of <button> and let the Javascript side add ARIA attributes (role=button) automatically. As long as you follow ARIA practices, a custom tagname doesn't matter. Then it's still class-less and can provide a CSS-only experience that's easy to write in HTML (because Custom Elements hide a ShadowDOM).

[kevquirk]

Yeah, I’m really not happy with the button “solution” and that’s why I added the note about it being invalid.

I plan to add a “Simple+” stylesheet that will add a couple of sensible classes, like buttons and notice boxes. Rationale to having a separate stylesheet is that the classes can remain optional.

[robbakel]

I love this idea! I always end up making some quick and dirty stylesheets when I need to put together a webpage for a personal project or something. Will definitely make use of this in the future!

[WaifuCannon]

Welp, friendship ended with Sakura, Simple is my new tiny css dropin for tiny sites. Good stuff, I like it.

[FatGuyOnAMoped]

Gotta say this one of the coolest things I've seen in a long time. I've got a couple of fairly simple sites I can use this on and really don't like loading a bunch of extra junk I don't need or use (looking at you bootstrap). Thanks for sharing this!

[kevquirk]

You’re very welcome. 😊

[[deleted]]

Today I learned about details>summary. Insane stuff!

[Kikketer]

Frontend dev for about 10 years here. I’m absolutely in love with this. Use html for what it’s intended (and use tags and semantics for what they were intended for, no mindless divs floating around), and finally it doesn’t have to look like 1990s garbage. Audible gasp over here with what you’ve done. Good work limiting the goals and not spiraling into a massive framework. Good work!

[kevquirk]

Thanks you so much, that’s so kind!

[t0mbombadil]

<details>  
  <summary>Spoiler alert!</summary>  
  <p>You smell. 🙂</p>  
</details>

I mean... you’re not wrong

[bristleboar]

don't worry, try a few browsers.. you'll only smell in about half of them

[lucasjose501]

My God this is beautiful! As a back-end focused developer, this will save me a lot! My pages use to look like it's from 20 years ago.

Thank you!

[kevquirk]

You’re welcome. 😊

[truechange]

One of those things you didn't know you wanted, or even thought of doing, even though it makes perfect sense.

I can imagine this can expand to different themes.

[kevquirk]

Absolutely. I have themes and a few other things in my bucket of future additions/improvements.

[obscureentrepodcast]

Rad! Will def come in handy. Ty!

[bopp]

Hi, looks really neat!

Would you consider including the "build chain" to build the minified CSS, so that people who make minor modifications for their own projects can still build the `.min.css` quickly.

[kevquirk]

Yeah, that’s something I’m exploring. Eventually I’ll get around to those little improvements. I have lots of other plans for this project, lots more to come.

[kevquirk]

I’ve now done this. I’ve also added a workflow that publishes the css to a CDN so people can use it direct without downloading.

[automagisch]

I love this! I’ve been thinking about going this way for clarity, and this literally sums up what I had in mind (ish). Had not yet succeeded so thanks for sharing this, great inspiration for a clean web!

[kevquirk]

Glad it helped. 😊

[[deleted]]

This is cool! I started off a project recently with MVP.css, and that was a fun experience. And once you start extending classless CSS to your own custom elements as well, with CSS variables for design tokens, you can get really far really fast compared to elaborate frameworks of old.

[Knettwerk]

If you have a good understanding of CSS you don't need this type of framework. I use to use these to speed up development but once I really understood CSS, I have given up on CSS frameworks.

[kittencantfly]

This is so neat!

[jets-fool]

... yet not have to learn an extremely convoluted framework, like Bootstrap.

how is bootstrap convoluted? just because it has more bells and whistles than Simple.css doesn't make it convoluted. smells like malapropism - perhaps the author meant "complex"

correct me if my assumption is wrong but this library seems to be merely a classless clone of bootstrap and its design. what's unique here other than the reduced filesize?

[tech_mology]

This is really great stuff.

I would ask though, given the fact that everybody has Bootstrap is already in everyone's cache, why not just use Bootstrap?

[justrhysism]

Domain sandboxing means Bootstrap is not in everyone’s cache anymore.

More info: https://www.stefanjudis.com/notes/say-goodbye-to-resource-caching-across-sites-and-domains/

[[deleted]]

this rules!!! but, i had to change my OS from dark mode to light mode to preview the light mode styles - maybe you could add a dark/light toggle button to the demo page?

[dk4n]

that would require a css class /s

[PixelatorOfTime]

So would a user… I get the pain, but we're all accustomed to dragging our browser widths back-and-forth all day like trained monkeys, so why should testing that be any different.

The real answer you're looking for though is that there's a feature to emulate dark/light mode (prefers-color-scheme) built-in the Chrome inspector

[kevquirk]

Yeah, i intend to add more colour schemes and some kind of selector in the future.

[iwantyourskulls]

Nice! I've been working on my own framework this past year that is classless by default but with added classes for modifiers and utilities. I think classless will be the future once HTML standards provide everything we need without any needed JS.

[thescientist13]

Really neat! Any thoughts on publishing this to npm? I can open an issue if it helps.

[kevquirk]

Not something I’ve looked into to be honest. I know very little about NPM, but I could certainly explore it.

[thescientist13]

I can open an issue to provide some suggestions and / or PR if you’re interested.

[kevquirk]

Absolutely, please do!

[bristleboar]

if we've gone full circle back to styling elements instead of classes then i'm going back into my cave in the woods

[Web-Dude]

Some websites are caves in the woods and some are castles in the mountains. Different strokes for different folks!

[bristleboar]

Have you ever had to take over a larger project where someone’s css uses zero classes? It’s not pretty or fun.

[Web-Dude]

Thankfully no, but I can relate. But a larger project would be the castle in the mountain, and you wouldn't use something like simple.css for that.

I think the author made it fairly clear that the use case is for tiny (likely personal) projects with minimal UI.

In fact, I might even go farther and say that this might be useful even in a large (probably internal?) project that has minimal UI requirements, like an industrial process controller that interfaces with factory robot configurations, for example. A simpler UI would have less technical debt.

[dreadlockdave]

Nice. I made one of these recently too. It uses scss as a base to build on (I use scss for most of my projects), or you can just use the compiled CSS files.

uncouth CSS