When it comes to building websites, developers and code-savvy designers are often on tight deadlines. CSS frameworks are sets of code that give you a head start when turning prototypes into working products — or testing hi-fi prototypes in real-world situations.
Today we’re looking at two big players: Bootstrap and ZURB Foundation.
We could argue the pros and cons of each, as many have done. But the more important question is whether any framework is worth the learning curve.
Do they improve the feasibility of our designs? Or are they too cumbersome for production use?
The Advantages
CSS frameworks help get people off to a good start with pre-built, thoroughly-tested code. That means designers and developers don’t have to start writing code from scratch for every new project, saving time and effort.
Faster CSS: Both frameworks use Sass to manage CSS. The ability to use loops, variables and mixins (a.k.a. functions) lets code-savvy designers write more sophisticated CSS with less effort.
Faster layouts: With robust, responsive grid systems, arranging (and rearranging) elements is as easy as changing a few class attributes in HTML. Looking ahead, both frameworks will soon support Flexbox for next-generation layouts.
Easier interactive elements: Both frameworks let designers build widgets and add-ons like modals, navigation drawers, tooltips, and simple animations with customizable, plug-n-play jQuery components.
Plug them in and add instant interactions to your websites or apps. What’s not to love? In truth, frameworks have tradeoffs.
The Issues
But frameworks aren’t perfect, and detractors cite several drawbacks.
Lack of IE8 support. Foundation officially dropped Internet Explorer 8 support in 2014, and the next version of Bootstrap will follow suit. While IE8 usage is generally low, it’s still important for users in certain countries (like China).
Code bloat. In spite of using minifiers and Sass mixins, framework-based projects may still require end users to download more bytes than built-from-scratch sites.
Learning curve. Designers need to learn a framework’s ins and outs before they can use it properly. That means studying their methods in addition to knowing some HTML, CSS and JavaScript.
Platform dependence. Once designers adopt a framework, they often find themselves adhering to its standards no matter what. To an extent, their mindsets influences designers’ work.
The Future
ZURB just released Foundation 6. Bootstrap is alpha testing version 4.
Photo credit: Foundation
Photo credit: Bootstrap
Improvements to both frameworks make them lighter (less code for faster downloads) and more capable (with Flexbox options and nifty animations).
Their well-established grid systems make building and editing responsive web layouts a snap. And the framework-friendly design community has a history of seeking designers who know frameworks’ ins and outs.
It’s a great time for designers to get up and running quickly — provided they have the right ideas to code up.
The Verdict
Both Foundation and Bootstrap are especially known for their layout grids. These flexible systems let designers and developers determine the width of different elements — say, sidebars, and sections of headers and footers — at different breakpoints.
From simple portfolios to complex e-commerce sites, every kind of project can benefit from a framework — when used appropriately. Entire galleries exist to show how framework-based sites don’t have to look the same.
But are they worth the learning curve? If one’s goal is to expedite production, then it depends on:
- How well a framework fits one’s workflow, or if the workflow can adapt to a new tool
- If one wants to invest the time up-front for potential long-term benefits
- If one’s willing to commit to a particular style of JavaScript, HTML, CSS, and/or a preprocessor like Sass or Less.
Personally, as a designer who also codes, I’ve found that frameworks help me scale my designs quickly. Whether it’s ensuring consistent typography or element styles, frameworks like either Foundation or Bootstrap help handle the more tedious aspects of UI design.
The process of learning Foundation or Bootstrap is also valuable. You’re better able to understand design from a modular perspective, which reduces the learning curve for your own custom frameworks later on.
At the very least, frameworks will help you better understand the technical implications of your design. And in today’s Agile world, it’s never a bad idea to understand how the other half lives.
From Rapid to HTML Prototype
Regardless of the framework you choose to build your designs, you need a plan to validate your ideas first. Using prototyping tools to hash out ideas with your team ensures your plans are on the right track before you spend time in code.
UXPin, for example, supports low and high fidelity prototyping with built-in libraries including Foundation and Bootstrap. You can design fully interactive prototypes with the editor, get feedback from the team, then iterate and test with users via the built-in usability tools.
If you’d like to validate ideas before committing yourself to code, get started with a free trial and let us know how you like it.
