{"id":10103,"date":"2015-11-24T17:35:43","date_gmt":"2015-11-25T01:35:43","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=10103"},"modified":"2021-07-22T01:59:32","modified_gmt":"2021-07-22T08:59:32","slug":"are-design-frameworks-a-waste-of-time","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/are-design-frameworks-a-waste-of-time\/","title":{"rendered":"Are Design Frameworks A Waste of Time?"},"content":{"rendered":"

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 \u2014 or testing hi-fi prototypes in real-world situations.<\/p>\n

Today we\u2019re looking at two big players: Bootstrap<\/a> and ZURB Foundation<\/a>.<\/p>\n

We could argue the pros and cons of each, as many have done. But the more important question is whether any<\/i> framework is worth the learning curve.<\/p>\n

Do they improve the feasibility of our designs? Or are they too cumbersome for production use?<\/p>\n

The Advantages<\/h2>\n

CSS frameworks help get people off to a good start with pre-built, thoroughly-tested code. That means designers and developers don\u2019t have to start writing code from scratch for every new project, saving time and effort.<\/p>\n

Faster CSS:<\/b> Both frameworks use Sass to manage CSS<\/a>. The ability to use loops, variables and mixins (a.k.a. functions) lets code-savvy designers write more sophisticated CSS with less effort.<\/p>\n

Faster layouts:<\/b> 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.<\/p>\n

Easier interactive elements:<\/b> Both frameworks let designers build widgets<\/a> and add-ons<\/a> like modals, navigation drawers, tooltips, and simple animations with customizable, plug-n-play jQuery<\/a> components<\/a>.<\/p>\n

Plug them in and add instant interactions to your websites or apps. What\u2019s not to love? In truth, frameworks have tradeoffs.<\/p>\n

The Issues<\/h2>\n

But frameworks aren\u2019t perfect, and detractors cite several drawbacks.<\/p>\n

Lack of IE8 support.<\/b> Foundation officially dropped Internet Explorer 8 support in 2014, and the next version of Bootstrap will follow suit<\/a>. While IE8 usage is generally low, it\u2019s still important for users in certain countries (like China<\/a>).<\/p>\n

Code bloat.<\/b> 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.<\/p>\n

Learning curve.<\/b> Designers need to learn a framework\u2019s ins and outs before they can use it properly. That means studying their methods in addition to knowing some HTML, CSS and JavaScript.<\/p>\n

Platform dependence.<\/b> Once designers adopt a framework, they often find themselves adhering to its standards no matter what. To an extent, their mindsets influences designers\u2019 work.<\/p>\n

The Future<\/h2>\n

ZURB just released Foundation 6<\/a>. Bootstrap is alpha testing version 4<\/a>.<\/p>\n

\"image00\"<\/p>\n

Photo credit: Foundation<\/a><\/p>\n

\"image01\"<\/p>\n

Photo credit:\u00a0Bootstrap<\/a><\/p>\n

Improvements to both frameworks make them lighter (less code for faster downloads) and more capable (with Flexbox<\/a> options and nifty animations).<\/p>\n

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<\/a> who know frameworks\u2019 ins and outs.<\/p>\n

It\u2019s a great time for designers to get up and running quickly \u2014 provided they have the right ideas to code up.<\/p>\n

The Verdict<\/h2>\n

Both Foundation and Bootstrap are especially known for their layout grids. These flexible systems let designers and developers determine the width of different elements \u2014 say, sidebars, and sections of headers and footers \u2014 at different breakpoints<\/a>.<\/p>\n

From simple portfolios to complex e-commerce sites, every kind of project can benefit from a framework \u2014 when used appropriately. Entire galleries<\/a> exist to show how framework-based sites don\u2019t have to look the same.<\/p>\n

But are they worth the learning curve? If one\u2019s goal is to expedite production, then it depends on:<\/p>\n