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


see also

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.