CSS is an evolving language, and keeping up to date with the latest revelations can sometimes prove to be rather difficult.
A framework helps to bridge the gap between having to write each and every single query yourself, and having a library to do it for you.
CSS frameworks fall under many categories (as you saw in the post itself), such as typography, CSS reset, UI elements, global styles, and responsive grids. All of which can be used separately or combined for a rapid website building environment, or prototyping if you prefer.
CSS frameworks are also great at solving problems between cross-browser and cross- device compatibility; ensuring that your websites will look equally good (as well as function equally good) on any kind of device that’s trying to access it.
Most if not all of today’s newly built CSS frameworks guarantee an inclusion of responsive design patterns for rapid development, and when it comes to developing within a team environment — CSS frameworks allow a number of developers to work on a project together, at a much quicker pace; which then allows to save up some development time, and ultimately save budget as well.
Building your own CSS framework is also a possibility, not only will that propel your learning experience with the language, you will have a much more clear idea how other frameworks are being built and structured.
Bootstrap 3 (the current version, since Bootstrap 4 is also coming soon) is the world’s most popular and sought after front-end development framework for building and rapid prototyping websites, web design concepts, and mobile web designs.
While not strictly a CSS3 framework per se, Bootstrap does involve working with CSS3 on consistent basis, and the main attraction for the framework in the first places is the fact that it puts CSS3 to the test with modern design choices and possibilities.
The CSS aspects of Bootstrap can be used to build grid systems, forms, buttons, to manage images, to utilize helpers, to work with responsive design, and many more sub-category possibilities that are required in modern web design.
What is Bootstrap?
Bootstrap can be boiled down to three main files:
- bootstrap.css – a CSS framework
- glyphicons – a font (an icon font set)
Additionally, Bootstrap requires jQuery to function.
Everything else you might happen across while studying the Bootstrap documentation – Grunt, Gulp, Sass, LESS, bower, npm, etc – is not necessary to get started with Bootstrap.
These are task runners, preprocessors, installation aids, and package managers, so don’t be discouraged if you don’t know how to use any of them yet.
Why is a framework important? Do I need to use one?
You absolutely don’t need to use a framework – I recently wrote an article
called You Don’t Need a Framework: Understanding the Fundamentals of Responsive Design, which I would recommend reading if you want to learn more about responsive design.
However, frameworks are very popular and have many benefits, so it’s important to learn how to work with them.
Some of the ways that frameworks can help you:
- Prevent repetition between projects
- Utilize responsive design to allow your website to adapt to various screen sizes – mobile, desktop, and everything in between
- Add consistency to design and code between projects and between developers
- Quickly and easily prototype new designs
- Ensure cross-browser compatibility
Generally, every web project you work on will need to be responsive and work properly on all the major browsers, and likely have some fallbacks for older browsers.
Bootstrap has a huge open source community that works on covering this so you don’t have to.
Additionally, when multiple developers all know the same system, they can work in better harmony – and it also makes it easier for newcomers on a project to get up to speed.
The grid is probably one of the most essential aspects of the framework.
It’s the basis on which the entire layout is created.