Bootstrap vs Skeleton

Why I recommend any other CSS boilerplate framework over Bootstrap. 15 May 2018

PIC: Bootstrap Namespaces – Medium (Jonas Jancarik)

Truth be told I never liked Bootstrap from the get go. I understood the potential it held to make my work easier and faster but perhaps my dislike resulted from having a lot of friends using free downloadable Bootstrap templates instead of calling me for web work [evil-smirk].

However the more I avoided using Bootstrap the more I started appreciating the need for a CSS framework to ease up my workload. First I tried LESS which allowed me to write more with less code and in less time hence I think its name but still as I started to do piling amounts of client work there was now an ever more urgent need for a CSS framework. So what was a developer to do? Avoid Bootstrap still of course and look for alternatives of course. That is when I then met Skeleton.css and Foundation.

Skeleton is the first framework whose documentation I bothered reading – so out went Foundation through the window. I was immediately hooked. Unlike Bootstrap, Skeleton was much easier and more intuitive to write/follow. For example instead of the Bootstrap ‘col-md-12’ syntax to specify full width columns, in Skeleton I simply write ‘twelve columns’ or ‘u-full-width’. Skeleton’s English like syntax certainly makes more sense to me. And at 13kb Skeleton is the most light-weight I’ve ever seen and needed yet it provides much needed ease in starting new projects quickly and writing semantic styling that other developers will likely be able to follow along unlike the coded class names Bootstrap uses to specify layout. Oh and that’s one other thing I’ve always disliked about Bootstrap, the class names are hard to follow unless you have read up on its docs – I mean what the hell is 'col-md-12', compared to Skeleton’s novice-friendly 'twelve columns'.

Skeleton is my favourite CSS framework right now and I recommend you check it out and it’s documentation to get you started as well.

*Warnings: As far as I know Skeleton does not come with height-setting classes of which Bootstrap does so you might want to set your own default heights in a separate linked stylesheet so you can see you layout as you work.

#pro-tip: “Set background colours to elements such as div and span and so that you can see how they’ve been laid. It makes it much easier to track your layout and placements”.

Lastly Skeleton can sometimes get margins slightly off when you use it right out of the box so you might want to adjust those before anything else. Drop me a tweet if you need any help.

Share This

     
more stories
Let the good times keep rolling.

Web designers v Web develope…

Bootstrap vs Skeleton