CSS Frameworks

26/10/2017
3151

In modern web design we often come across what is called a CSS framework. But what are these and what do they mean for your website.

Basically they are a set of cross browse red tested styles to create simple and reusable design elements. Such as a card, navbars, lists etc. They make it easy to do responsive layouts with the “grid system” (please note some designers hate this concept and depending on the situation I think it has advantages and disadvantages but I won't go into detail here) this allows you to quickly decide what and how your content will be displayed on mobile, tablet and PC.

The biggest question in using a framework is which one is right for you. They all provide the basics and some slightly more advanced sections such as cards or carousels.

Although this question is really a personal one. It really boils down to the look and feel you are after. You've got

  • Materializecss,
  • Bootstrap,
  • Leaf,
  • Semantic UI,
  • Foundation and
  • many more.

While I'm not going to go into each one now, we would be here all night. I'm going to mention some key points to consider when picking the best framework for you.

  1. Pick the one with the elements that are right for you, you might not get all of what you want but best to find one with the most common elements you use
  2. One that's regularly update. There's no point picking a framework that's only update every couple of years, you'll spend half the time fixing the little bugs that could lead to css errors (checkout our Killer CSS post for more details)
  3. Preferably one that's lightweight or if you don't need to or want to customise it's standard colours one that is hosted by a 3rd party. This will reduce page load times for your sites visitors.

Now although there are many good options a framework might not be right for you. “Going it alone” and doing it all yourself takes time and effort. This can payoff if you spend the time. However using a framework in the right combinations will get you up and running faster.