There are many CSS frameworks out there that will make your developer job much easier.
What is a CSS framework? How does it help?
CSS frameworks are libraries of predefined classes to assign to your HTML tags. You just need to link your page to the CSS stylesheet (you can download it but it's better to use the CDN link, here's why) and you're good to go.
Using a framework for your CSS has many advantages. It reduces the time you spend on crafting your styles since you only need to know what class to add and most classes will handle different styling aspect (in Bootstrap for example, assigning the class 'btn-lg' to your <button> element will increase the size of the button container AND its font-size at the same time.
Another great aspect is that it will provide clarity and consistency to your styling, two things that are often missing when one begins to code.
CSS frameworks are also great for quickly drafting up a page or a web app, if you're visiting a client or making a presentation during a meeting.
Downside is that sites using those framework tend to be similar in terms of layout and looks.
It can also keep you rusty on the knowledge/practice side of things. If you're on top of your 'Flexbox' game, you need no grid system!
My 3 top CSS frameworks are...
Let's get the big guy out of the way. Of course, you've probably heard about Bootstrap a lot and it's up to the point where some devs use it automatically on almost all their projects. It's easy to use, intuitive enough, with a lot of tractions and support from a huge community of users out there. Very stable (Bootstrap literally always work for what is expected from it) and reliable, 100% responsive and its got a great documentation. The latest version is still in alpha mode (v4) but it's stable enough to be used in production and streamlined a lot of its classes (thanks for the simplified syntax on grids!).
The cons are that Bootstrap sites are recognizable from a hundred mile (Yes "Jumbotron with btn-group" I'm looking at you!) and sometimes it looks like half of the landing pages out there are built on BS... (are they? 🤔).
Another pitfall is that BS does not give a shite about semantic tags. The latest iteration of HTML (5) is relying heavily on those semantic tags (see full list here) for structuring pages, for both clarity and SEO purposes. So you often end up with hundreds of meaningless divs with dozens of classes. A mess.
If you're into the whole graceful degradation vs. progressive enhancement debate, you probably know what I mean.
So to counter that, you will have to customize your CSS and style you elements to your taste, step away from BS buttons and create your own stylesheets. It's possible to use BS ad still get away with unique layouts and fresh designs. Check this out:
I personally use it on my React web apps as it's lightweight and easier to integrate.
If picking Bulma is a real choice, choosing between Foundation and Bootstrap is (as Nick Petit from Treehouse is saying in this great post) like choosing between red and white wine. It's really down to personal taste.
Both will provide you with:
- A responsive, grids-based site.
- A reliable and stable tool with a great documentation.
- A community of users that can help.
Since this is all personal, let's get a bit a partial for a bit. I personally prefer Bootstrap for its documentation that I find clearer and easier to browse although I must say the "collapse" class from the Foundation and the possibility to have images nested into unordered lists is pretty cool.
So the best framework would be something that's as lightweight and simple as Bulma, as stable and complete as Bootstrap, sprinkled with some Foundation features...
In general, Bootstrap is the perfect tool for quickly prototyping sites. If you're freelancing for a client, you can just flesh out a page with a nav, sidebar, footer and couple of images in just a few minutes.
Let me know what you think about CSS frameworks down below, which one you use and why. :)
PS: Here are some useful links if you want to know more on that topic