CSS frameworks in some way or another have been around for years now. The most popular likely being Bootstrap. It has been used to build countless websites. But, many perceive CSS frameworks to be rather bloated. Nowadays though, the market of CSS frameworks is larger, with more of them becoming smarter, more modular, and able to be incredibly slim once compiled and minified.
The benefits of a CSS framework
So what are the benefits? Why should you consider using one in your next website build? The simple answer is for most, they say the framework makes building out websites much faster. Once you are comfortable with your chosen framework you’re able to put together quite complex layouts in a matter of minutes. Why? Because you could be only working within one file, in one markup language.
A quick example
Take one very popular tool in a web designer’s arsenal – the card layout. For developers, they have built these things a thousand times, but, for those who don’t use a framework or keep to hand code for their cards they can copy and paste, they could be coding the same things over and over again from scratch. Potentially wasting precious development time. BUT, if you utilise a CSS framework, you could build out a card layout as such in minor minutes. Take a look at the minimal code needed for this card. This has been built with Tailwind CSS.
See the Pen
Simple card with Tachyons by Nick lewis (@nickylew)
on CodePen.
The downsides of a CSS framework
Some may argue that using a CSS framework limits you in how you can build. While this may have a little truth to it, I don’t think that is necessarily a bad thing. Limitations can breed creativity, and there are no rules to say you can’t include custom CSS alongside your CSS framework. Obviously though, caution needs to be taken with adding too much additional CSS alongside a potential CSS framework as this is where the potential bloat can arise.
What CSS frameworks are out there?
Gosh, there are so many. Each with its potential benefits and drawbacks. Here is a non-exhaustive list of frameworks to choose from.
- https://tailwindcss.com/
- https://tachyons.io/
- https://getbootstrap.com/
- https://bulma.io/
- https://get.foundation/
- https://getmdl.io/
- http://getskeleton.com/
- https://materializecss.com/
- https://semantic-ui.com/
- https://purecss.io/
- http://getuikit.com/
So, are CSS frameworks any good? And should you use one?
The answer isn’t that straightforward. It really depends on your preference for how you work and want to work. For many, it seems using a particular framework can work wonders for their workflow, vastly speeding up the process. I think they can work fantastically for the right project, and I say, why not give one a go. It doesn’t matter which one, just pick one and give it a try. My current favourite for small websites is Tachyons, which I used to build this very site. So I know from experience, that they can be very pleasing to use.
Happy building!