It is a reality that web design has become more complex over the years. New versions of HTML and CSS added new elements and properties that allow us to play with shapes, gradients and animations increasingly necessary but increasingly complex. At the same time it had no sense to design for a particular browser resolution, the multitude of devices that gave access to the web required a new way of working, more flexible, more adaptable. And thus was born the responsive design.
All this web revolution impacted on all necessary agents for its operation, but if there was a section that clearly increased by these new possibilities this was definitely the CSS. Style sheets web were doubled and tripled in size with each new project. New specifications, including media queries, prefixes to ensure compatibility with browsers… this was very costly in time and effort to develop a style sheet from scratch for each project. It was necessary to reuse your code and use external frameworks that were already tested for certain parts of the web.
And to meet this need the CSS frameworks were born: style sheets already tested by teams and designers, ready to be used as a base in a web layout, without writing everything from scratch. These frameworks get ultimately save time and effort to the web designers, since they part from a solid and tested foundation, and can focus their efforts more on details than in the logical structure of the web and basic elements (buttons, inputs, styles of text…).
Advantages of using a CSS Framework
If you are thinking that perhaps write all CSS from scratch for each project may not be the most productive for you, it is time to explore the use of a CSS framework. These are the advantages that contribute to the design of a web:
• Saving time: Writing again and again the same code is repetitive. It is one of the principles we mentioned in our list of best practices for writing CSS. With a framework you will have a basis on which to start the layout design.
• Tested on browsers: most frameworks are used by many users and these users report failures or errors found in different browsers, so they can be fixed. This makes the frameworks improve its compatibility without being worried about whether the design looks good in Chrome, Firefox, Safari…
• Using Mobile first: Most frameworks are responsive design, and are also built based on the methodology Mobile First, so we ensure optimal viewing at lower resolution devices without overloading with styles and unnecessary properties such resolutions.
• Scalability: Using a CSS Framework allows your design to be able to grow in the future. If we add a new section, a new page or a new element we do not need to write new lines of CSS, we can reuse the predefined styles, focusing on the HTML and the details that make this page unique from the rest.
However, it is also necessary to know that the use of a CSS framework has a number of disadvantages:
• It can limit the creativity of your design. From a grid structure or margins and preset shapes you can make your design look conditioned even if the level of creativity of your project is not the same as if it does not start from a blank sheet.
• Unnecessary lines of code. Surely you do not use 50% of written specifications and classes in the CSS. It is normal; however users download the complete files, so the weight of the web will be higher, and therefore the load speed will be slower.
• Training time: Although the learning curve is usually rapid, it is true that knowing the whole framework will take us time and even after a couple of projects we will not know most of the code.
Best responsive CSS Frameworks
After this introduction we go with a list of the best CSS frameworks for responsive design that we believe deserve a mention, either because they are the most used by designers or by contributing a feature that makes it special for a particular type of project. The order of the list does not respond to any priority:
Bootstrap, the King of CSS
If there is a famous CSS framework, that is Bootstrap. It is perhaps the most used and most in demand in jobs for web designers and typesetters. Its advantages include a solid base of users and professionals currently using it, while incorporating rules for virtually all styles that can be designed on a website.
One drawback if you do not know how to use it and what modules to download is that you will force the user to download a lot of unnecessary data. So before putting it into production, it is advisable to know very deeply how this framework works and which elements you will use.
Currently version 4 is almost ready, which in addition to still maintain the famous system of columns and grids, adds the possibility of incorporating the grid Flexbox, a set of relatively recent CSS specifications that will give us much more flexibility and freedom when designing. Highly recommended!
Foundation: advanced and veteran
It is a framework leading since 2011 that has been improving and adding new features version to version. In fact, in the current version, as happens with Bootstrap, it is possible to use Flexbox on your grid. It is a safe bet.
In addition to websites, Foundation has two other distributions to its framework. On the one hand to work with emails, and on the other hand to work with Apps. Thus, you can take advantage of the learning of a CSS framework, opening up other avenues of design.
Pure CSS: light and fast
For those looking for something lighter in weight that allows the web to load fast, Pure CSS is your choice. It is the perfect framework to create a quick project without complications and with some degree of reliability. Compressed it occupies less than 4KB, it is wonderful.
It is true that the elements are not the prettiest, personally I do not really like styles of buttons and forms, but it depends on the person. If you want something fast and without much complication, it is a good choice.
Milligram: minimalist up to the size
Personally it is the most ingenious framework. 2kb only when compressed, very basic styles with careful designs, and flat design. Besides this, it solves one of the big problems of the great frameworks, the ability to switch between grid of 12 columns and 10 columns, and even combine both. In addition all measures are in rem!
As a point against, its compatibility ensures only the latest version of the most used browsers, so you may encounter unexpected behavior in older browsers. But to maintain that size it is more than justified the absence of compatibility. It is fantastic.
Materialize, CSS framework for material design
If your project is based on a very particular style as it is material design, then you should use this framework, which comes with everything you need to lay out your website or app using fonts, cards and styles recommended by Google.
It is a very complete framework but with a clear design component. It is very useful if your project is going to be material. Not useful if it will not be.
Skeleton, for the old times!
I still remember the first project where we decided it was time to use a framework; and the chosen one was skeleton. At that time it competed with the most important frameworks (Bootstrap, Foundation, 960grid …) It had a very flexible grid of 16 columns and a few basic styles allowing you to quickly measure a configuration without complications. But it failed to adapt to the mobile world and responsive: it did not change his philosophy and did not incorporate the Mobile first until years later. Its competitors did it, and many users left skeleton looking for an alternative that would improve performance on mobile devices. In addition, the grid was set at 960px, when Bootstrap offered 1200px.
Years later this framework is still alive; it has reinvented itself and it has changed some of its original content. The grid remains 960px, but it has already built the mobile first, and it has incorporated many of its elements, such as fonts, tables, forms … It is an alternative that is always nice to have in mind.
Conclusion: choose your own CSS framework
The important thing when deciding which framework to use should not be the number of elements or the basis design of the elements. It is quite the opposite. We should feel comfortable, understand how it works and feel that is useful, saving us time. It is the most important thing. We have to find the link that takes us forward and improve our work. And not all frameworks succeed; there is a framework for every type of Front-End Developer.
So there is no choice; you have to try and try until you find the glove that fits your hand. Do not be afraid to experiment with CSS resources and discard what does not serve you. And in the future, with your own additions, it will be time to build your own framework. But in the meantime, you have the list above.
I hope the information is helpful!
Bootstrap is awesome… for Twitter. For anything else, not so much. It puts some very real restrictions on developers until they dig deep and make changes to the css. I really don’t like it and the more I try to use it, the less I like it. I wish it would just go away.
Yes, I agree with you!
When someone starts with CSS, Bootstrap gives a lot options with minimum effort. You can load components, grids and js library with two lines. The world is under your feet. However, after two or three projects you start noticing that there are too many files, too much data used and this is not sustainable in a long-term way.
One day a client asks you for something that requieres to deep in CSS and can’t be done only with Bootstrap. This is when you really notice that using a framework is ok, but you must know how to build things from scratch. I like understanding that Bootstrap works as a parachute, but one day a front-end developer have to fly alone.
Thank your four comment!
I really like mini.css: https://chalarangelo.github.io/mini.css/
It’s a lightweight alternative, that comes with a full-featured set of modules and components and keeps things simple to write and remember, while it’s very responsive and uses flexbox for msot things. I think it would be a nice addition to this great list!
Thank you Maria! It looks interesting 🙂