Styling with CSS in 2018

In an effort to revamp my websites, I have ventured into looking at current state of the CSS art. I have been picking up Bootstrap by default for more than a while. At some point, I was very impressed by Metro/Modern design language that Microsoft was adopting and thus used Metro UI CSS 2.0 for my homepage. But things changed over time and there are a lot of new tools out there. So, it is time to check what is out there.

So, here are the few names that seems to be popular now: Bootstrap, Foundation, Bulma, Pure, Semantic, Skeleton etc. — and these are just some of many good CSS frameworks to chose from. Here starts the dilemma. It is more than just a dilemma, it is n-lemma. So many choices! Which one is to pick?

nice to haves

Here are few things I am looking for

Responsive – literally everyone of them is responsive, so it is a no brainer
Small footprint – the CSS file I ship with my web page should be small, as in few kilobytes
Variety of components – I want to seem more than just basic components
Fluid – there should be a grid system that feels natural and helps align elements well
Unopinionated – the framework should not force me to do some things in certain specific way; that is, it should be easy to apply my own taste and flavor
but Not too bare-bone – while I want it to allow me to customize the look and feel according to my taste, the out of the box should not look too grim
Minimal JavaScript – if someone disables JavaScript on their browser, I don’t want my web-pages to look horrible
No steep learning curve – if the amount of time I spend learning and figuring out how the framework approaches to the amount of time I would spend for writing CSS from scratch then it is no good for me
not very !important – if the custom CSS I write end up using too much !important, then it is not a suitable framework for my purpose

In a nutshell, the goal is to minimize the amount of code I write and also to optimize the amount of time I spend in completing the project.

an overview

Let’s look at some of the options in terms of ship size, JS use, grid system, overall look-and-feel utility vs flexibility

Framework	kb	JS	Grid	Overall utility
Bootstrap	12	Y	12 col	comprehensive; +plugins
Bulma	10	N	fluid	many elements and components; customizable; extendable
Concise CSS			fluid	SCSS based configurable, basic components platform
Foundation	7	Y	12/6/8	comprehensive; some plugins
Kube	85	Y		CSS and JS framework
Miligram	2	N	3/4/10	very basic
mini.css	10	N	12 col	common components; a flavor tool to generate fine-tuned style
Paper CSS		N	none	fun style sheet
Picnic CSS		N	fluid	basic but powerful elements
Primer		N		GitHub’s design system
Pure CSS	3.8	N	5 col 24col	basic components only
Semantic UI	20	Y	fluid	comprehensive UI toolkit
Skeleton		N	12 col	very basic
Spectre	10	N	12 col	many useful and advanced components
UIkit	6	Y	quasi fluid	very comprehensive with many UI components, nifty animation etc.

some notes

Bootstrap is still the most used and most supported UI toolkit. It has a lot of things, but often feels like you are bound to do something in a certain way. Often, you may have to override a lot of things to apply your taste.
Bulma is a new framework and not very bloated yet. It doesn’t depend on JavaScript, which is nice. However, being at below v 1.0 it doesn’t offer as many components as Bootstrap or UIkit.
Semantic UI, powered by jQuery, has a lot of UI elements. Things like rails, sticky, dimmer, feed, message, sidebar etc. are interesting.
UIkit looks like a very comprehensive platform. Has some nice elements like sticky, light box, drop, label, inverse, leader, off-canvas, overlay, parallax, easing, scrollspy, lazy loading image, image affects etc.

interesting finds

Gutenberg as print style-sheet
WickedCSS animations – CSS powered animations
Trianglify.io – generates triangle patterned PNG and vectors; useful as background
instagram.css and CSSgram for Instagram like image effects