CSS for the Minimalist: Exploring Classless CSS
In 2011, the first version of Bootstrap (then called Twitter Bootstrap) came out. It was a product of Twitter’s UI team and was a framework aimed at simplifying the creation of professional looking applications across the Web.
It’s release revolutionized how developers used CSS – it took what was often a bespoke, unruly approach to Web stylization and gave developers the tools to easily make professional looking websites with standard components and minimal effort.
As more and more developers began using Bootstrap, other CSS frameworks sprouted, as developer and application requirements multiplied.
Now on version 4, Bootstrap is a 160kb (in minified form) library that offers developers an everything-but-the-kitchen-sink set of utilities. One can easily generate tags that look like this:
In other words, “class bloat.” By addressing the multitude of requirements that applications need, Bootstrap and its brethren have created a plethora of nested HTML components, utility classes, complex themes, and javascript interactions.
While newer approaches, like Tailwind.CSS, attempt to minimize class bloat by integrating deeper into the developer toolchain, the learning curve can be steep.
Recently at Solitaired, we’ve been exploring the direct opposite. We want to get rid of class bloat and go “classless.” We think it will allow our solitaire games to run smoother and improve the user experience for our players.
Classless means just what it says – building sites that minimize, or ideally eliminate, the need for classes to make a sharp-looking website.
In other words, all you need to do is use standard HTML and slap a classless stylizer up top to get a cleanly formatted, responsive, and easy to manage a website.
While going classless may not be realistic for many web applications, it can absolutely be an approach for static sites, portfolio sites, personal blogs, or even small-ish applications.
What are the top classless libraries of 2020?
Water.css
Water is my preferred CSS library – responsive and pretty, and 2.67kb compressed. One of the more interesting aspects of Water is that has light and dark modes. You can choose to use one, or it will automatically adjust based on a user’s preferences. Who knew you could pack so much power in such a small library?
If you need themes, Water includes documentation on how to do it. The default approach relies on CSS custom variables, which are supported by all browsers except Internet Explorer. Despite that incompatibility, custom variables make it incredibly easy to change the default water.css theme. For sites that require IE support, you can still customize using yarn.
Water has 5.3K stars as of this writing, making it arguably the most popular classless library out there. On our end, we’ll be migrating our word unscrambler to this in the next couple of months.
How to use:
Add to your the tag.
Tufte CSS
Named after noted professor and pioneer of data visualization Edward Tufte, this CSS library attempts to implement his suggestions in an easy to implement CSS library. Tufte CSS may be the preferable choice for longer articles, academia, or personal projects, because it uses a serif, and has an emphasis on supporting graphs, charts, and side notes.
Tufte is 7.71kb compressed and has been starred 4.5K times.
How to use:
Download the library at the Github link above, and add to your the tag.
New.css
At 4.8kb compressed, new.css is in the middle of the pack of classless CSS library sizes. Similar to Water, new.css creates clean, responsive pages easily. New.css also comes with a couple of additional themes if you have a hankering for additional styles.
New.css also uses CSS custom variables to make theming easy.
How to use:
Add to your the tag. They also recommend adding the Inter font, using .
Sakura
Sakura’s default theme aims for a calm, clean style. In the GitHub repository are also a number of themes that can be utilized right out of the box. At 2.8K stars, it’s one of the more popular Classless CSS options.
Sakura suggests using normalize.css, which will add a few more kb to its main payload of ~2kb compressed. Their theming methodology is slightly more complicated than Water’s, relying on SCSS to update variables in the main CSS. One upside with this approach, however, is compatibility, as native CSS variables are not supported in any version of Internet Explorer.
How to use:
Add to your the tag.
Marx
With a tagline of “The classless CSS reset (perfect for Communists),” Marx would be on this list no matter what – but it also happens to be very popular, with over 1.4K Github stars.
Marx is also easily themeable with SCSS and the documentation has some handy instructions on how to use this with Jekyll. That’s nice, because static websites would be a common and great use case for classless frameworks.
How to use:
Add to your the tag.
As you can easily see above, the nice thing with classless CSS is that there’s just not too much to them. One line converts an ugly webpage into something nice. Additionally, most of these frameworks clock in at far smaller than 10kb, making them at least 16 times smaller than Bootstrap.
Obviously, one of the big downsides with classless is that you don’t get the kinds of complex components and javascript-ready interactions as you would with Bootstrap, Foundation, or some of the other libraries out there. However, there’s a silver lining here. Since you’re relying mostly on tags for formatting, it’ll push you to be more semantic on your page – which is better for SEO and accessibility.
Featured image by Scott Webb on Unsplash
I hope that classless becomes more of a movement and that the default library people add to their applications is no longer Bootstrap, but something smaller, cleaner, and simpler.
