Web design has evolved in giant steps during the last few years, especially since the arrival of smartphones and tablets and the opportunities they offer us through HTML5 + CSS3 and JavaScript. These new mobile platforms have required important adaptations in terms of design so a new way of designing (“responsive design”) was chosen, bringing new tools and resources to help designers and developers make their work easier along with it. CSS Frameworks are among these tools and they are an option to take into account when starting any web development.
What are they?
CSS Frameworks are mainly composed of one or several CSS files (reset.css, layout.css, iehacks.css, forms.css, etc.) and may contain JS files (yaml-focusfix.js, smoothscroll .js, etc.), generally used to solve specific compatibility problems between different browsers. Their main goal is simply to try and streamline the design of our layout and make it as flexible as possible. Web developers or designers who aren’t entirely familiar with this Style Sheet language have to take into account that, in most cases, an enormous CSS file that is heavy and badly structured may be generated (which must be avoided) so the use of these frameworks may help us achieve this.
Positive aspects
- You avoid common layout “problems” with different browsers.
- They may streamline the development of the style sheet as they avoid having to code them from scratch.
- They force you to develop according to certain patterns so, when working as part of a team, everyone will work in the same fashion, using the same criteria and patterns.
Negative aspects
- Some frameworks may be relatively complex so the initial learning curve may be long.
- They try to cover many causes and solve many problems that are so common you may never use them so much unnecessary code is left.
- Occasionally, they may force you to make semantic changes since they force you to adapt to their premises, which may lead you to making changes in your elements and selectors.
Some frameworks:
- Twitter Bootstrap, may not need much of an introduction since it’s probably the most popular front-end framework since its creation in 2011. It uses “LESS CSS” in its style sheets and offers a range of plugins based on “jQuery”. This is a great option to build websites quickly.
- Created in 2005, YAML (Yet Another Multicolumn Layout) is an ideal CSS framework to create flexible layouts. Its grid system (based on the popular 960 grid system) allows you to make a variety of prototypes quickly.
- Blueprint, created in 2007, it’s an ideal CSS framework to reduce timeframes in traditional web development, reducing compatibility problems between browsers. Its latest update took place in 2011 so it may not be the best option for mobile development and responsive design.
- You may also be interested in: Amazium, Ingrid, Less Framework 4, Gumby 2 or BlueCSS among others.
After writing this article, showing some of the aspects I deem positive and negative (I’m sure there are more), I must say that, personally, I like having control over everything I do. This doesn’t mean that I’ve never used any CSS framework but this clearly depends on the project in question. The more layers you use, the more you risk losing focus in what you’re doing and finding errors may take you longer, etc. This is why what may in principle be more comfortable may occasionally turn into a nightmare unless you use it wisely.
