Responsive Design Frameworks: Just Because You Can, Should You?

Advertisement

Responsive design is about building a website with a grid-based layout, images that resize and media queries, as described by Ethan Marcotte. After Marcotte defined the technique, responsive design frameworks began to emerge that incorporated these principles. Mostly based on CSS and JavaScript, many of these frameworks are open-source, free to download and quickly customizable.

Some of the most popular today are Bootstrap1 and Foundation2, which we’ll focus on in this article.

As responsive design frameworks became popular, a big debate emerged: Why would a professional designer use a responsive design framework?

Internet debates rage on3. Many declare that responsive design frameworks are awful, that only people who don’t know HTML and CSS would ever use such a thing. Here were the standard arguments against frameworks:

  • A designer could write their own grid system, and they probably should if they know any HTML and CSS.
  • Websites based on frameworks load slowly.
  • All websites based on frameworks look the same.
  • Bloat is common, whether due to the extra div tags, the 5000+ lines of CSS or the large JavaScript files.

While detractors complain vociferously, responsive design frameworks continue to grow in popularity. I suggest that these frameworks have positive aspects, even for the most experienced front-end Web developer, and I’ll outline these below.

The website for Greek restaurant Grk was built with Bootstrap.4
The website for American modernist Paul Rand 5 was built with Foundation.

A Place For Responsive Design Frameworks

One morning, I was listening to Eli White’s keynote presentation6 at the Northeast PHP Conference7. White is a PHP developer, and his talk was a retrospective of the development of the Web and PHP over the last 20 years. One point he made was that, 15 years ago, back-end developers built everything from scratch. Not much was available in the open-source world at the time, and proprietary content management systems (CMS) cost in the hundreds of thousands of dollars. If you wanted a survey for your website, for example, you had to write one from scratch.

Now in 2014, back-end developers no longer do this. Why would they, when they can use SurveyMonkey’s API to create something for their client in 10 hours, rather than 100 or 1000 hours? Is SurveyMonkey’s code the most awesome in the world, the most efficient, the most cleverly written and bloat-free? I am not a PHP developer and don’t know the answer to that. However, the API is tested and debugged, it runs well, and it is ready to be incorporated in your next project — and that has tremendous value.

Unless your client wants something very specific and has the money to fund such a project, as White explained, most PHP developers would argue that there is no good reason to write your own survey by hand in 2014.

So, what’s the equivalent technology shortcut for the front end of a website? Unfortunately, we don’t have one.

Currently, we have two choices for creating the front end of a website. The first choice is to download a template (or theme). Commonly used with CMS-based websites, a theme might come with a few color choices and a few variables to be tweaked. On the plus side, most themes are available for free or a very low cost relative to the cost of the overall website. Downloading a theme, changing some colors and dropping in a logo takes little time.

What’s more, a good theme will be updated regularly, and it will come with documentation, making it much more straightforward to modify. On the negative side, a theme might be used by many and not be unique in the slightest, and it might even make the website look like it belongs to a particular CMS.

The second choice is a fully customized solution. A graphic designer would be hired to discuss branding, and they would iterate through three designs and two rounds of revisions, perhaps prototype directly in the browser or convert the designs to HTML and CSS, integrate the design with a CMS or their back end of choice if desired, and deliver the (hopefully) perfect result to the client. On the plus side, each tag would be precisely placed, and the code would be perfectly semantic, with not an ounce of fat or an excess div to be found.

To achieve this, though, the developer must be highly trained and experienced — and whenever a developer of that caliber is involved, the price tag goes up accordingly, putting the project out of financial reach of small clients and adding significantly to the expenditures of large clients. Furthermore, unless additional dollars are spent on documentation (which is unusual in my experience), if the initial developer leaves, then the next developer would have to figure out the code in order to modify it. That’s an additional cost to the client.

Where’s the middle ground between downloading a low-end design, used all over the Internet, and creating something highly customized and expensive? Where is the equivalent of a back-end developer’s API or code library? Can we create some kind of mass customization8 for the front end?

We need to be able to tap into some prewritten elements, combine them with customized additions, and develop a solution that’s more customized than a canned theme but less customized than a high-end solution. By not starting from scratch, we’ll have saved hours of time in development and saved money for the client.

Am I saying we should ditch customized solutions for frameworks? No, of course not. A fully customized solution has its place in the Web development world, just as canned CMS themes have their place. If your client has the time and money to achieve perfection and a fully customized solution is a sound approach for the project, then why not?

But many clients have very limited time and money, and they might not be able to wait or pay for perfection. Can we get something that’s “pretty good” instead? Perhaps not every div would be perfectly placed, and there might be a few too many of them. Perhaps the code takes a bit longer than necessary to download. Nevertheless, the solution would be documented, in active development and customizable, and it could be built on quickly for much less than a custom website. There is value in that.

Like every other technology at our disposal in the Web development world, a responsive design framework has its own positives and negatives that we need to consider.

The website for Greek restaurant Grk was built with Bootstrap.9
The website for Greek restaurant Grk10 was built with Bootstrap.

Positives And Negatives Of Responsive Design Frameworks

Focusing on Bootstrap 3 and Foundation 5, let’s explore many of the positive and negative aspects of building your next website with one of these frameworks.

Browser Compatibility

Debugging for browsers sometimes take as long as developing the website itself. If you can reduce the time spent on debugging, you could save significant costs for the client (and your own hair).

Responsive design frameworks have already been tested on a specific set of browsers and devices, which reduces the work required to launch a website. (The amount of testing you’d have to do will vary according to how much you’ve customized the framework. If you’ve changed only a few colors, then only minimal testing is required. If you’ve hacked the grid system, then testing would need to be extensive.)

The latest versions of Bootstrap11 and Foundation12 support Internet Explorer (IE) 9 and up. There are tricks to making the frameworks work in IE 8, but IE 6 and 7 are not compatible with either. In general, these frameworks also support the latest versions of other common browsers, including Firefox, Safari and Chrome, as well as different sets of mobile browsers.

Unfortunately, if you want to support a browser that hasn’t been tested, then you might discover bugs that need to be fixed in code that you aren’t familiar with.

Customizing Files

Bootstrap and Foundation have standard download packages that contain all of the required files, styles and widgets. Some files are large, and there are several files to download. In general, files come in both human-readable and minified formats.

Just because your framework of choice ships with styles and JavaScript to support dozens of components doesn’t mean you have to download and integrate them all. Bootstrap1713 and Foundation1814 allow you to customize your download package, so you can grab only the CSS and JavaScript that you need to run your website. This reduces bloat and, as a result, reduces downloading times, a common argument against frameworks.

Later, if you want to add a widget or style that you previously excluded, you might need to reconfigure the package. This can be avoided, though. I recommend developing the website first, without customizing the look, to determine exactly which features you need. You can then customize the download package to include code for only those features. Once the framework is in place, you can then customize the look of the website.

Note: When the next minor version of Bootstrap or Foundation is released, you’ll need to redownload the customized package. Take careful notes of what you have and have not downloaded, so that you can repeat the process when updating your files.

CMS Critic, a website that reviews content management systems, was built with Foundation.15
CMS Critic16, a website that reviews content management systems, was built with Foundation.

Customizing Code

Some level of customization is likely required. You will probably want to change colors. If you’re more experienced, you may wish to hack the grid system.

Just because you’re using a framework doesn’t mean your website has to look like one. You can customize the CSS to give the website its own unique look, either by using LESS (for Bootstrap) or Sass (for Foundation) or simply by writing CSS from scratch.

The styles that come in Bootstrap out of the box are quite extensive, and the assumption is that you won’t be changing them extensively. You can override the CSS in a separate style sheet or by using LESS or Sass files. Unfortunately, little documentation is provided for LESS and Sass files, so you’ll need to figure out much of the code on your own. The abundant styles built into Bootstrap make it a popular choice for inexperienced front-end Web developers. (Note that Bootstrap has released Sass files within the last month. Prior to this, only LESS files were available for it.)

Foundation has fewer styles out of the box. While you can customize it with a separate style sheet, Foundation is more efficiently customized through its extensive Sass files (for which documentation is provided). With less CSS to override, you can build a fully customized look more easily. However, less experienced front-end developers might find Foundation more difficult to work with because of the greater knowledge of CSS and Sass required.

Bootstrap1713 and Foundation1814 can also be customized even before being downloaded, through simple changes to LESS and Sass variables. In Bootstrap, the customization options go on for pages, whereas only a handful of changes may be made to Foundation. But if you are not familiar with LESS or Sass, this is a quick and dirty way to customize the look of the framework.

Likewise, you can leverage the JavaScript provided to customize the functionality. The most recent versions of Bootstrap and Foundation require jQuery for customized widgets to work.

If you use the dedicated screens for Bootstrap and Foundation, then your download package will be customized. When the next minor version of each framework is released, you will need to customize the variables all over again for a new package.

Note that Foundation’s JavaScript includes a lot of well-placed semicolons. Bootstrap contains very few semicolons. This affects some developers’ choice of framework.

Accessibility

Accessibility is becoming increasingly important to developers. Both frameworks offer valid HTML, but let’s consider accessibility beyond valid HTML.

Bootstrap has made some advances with the help of Joomla19. Joomla, an open-source CMS, incorporated Bootstrap into version 3. Joomla’s developers have a long-standing commitment to accessibility, and they did not want Bootstrap to reduce accessibility of the CMS. As a result, in Bootstrap 3 you’ll find ARIA codes and screen reader-only styles, among other accessibility improvements.

Foundation, unfortunately, has not prioritized accessibility thus far. It does not come with ARIA codes or screen reader-only styles. Zurb has stated, however, that it wants to do more.

Webflow, a drag-and-drop website builder, is built with Bootstrap.20
Webflow21, a drag-and-drop website builder, was built with Bootstrap.

Conclusion

No responsive design framework is perfect. For a tool that performs various jobs, extra code is required to make that tool flex to your needs. Granted, completely custom code would probably be more efficient for a website than a framework.

Some front-end developers tell me that they have their own grid system, CSS and JavaScript components that they maintain for their own websites. Certainly nothing is wrong with this approach. But you have to maintain that code yourself. A popular framework minimizes the need for maintenance and testing.

I’m calling on my fellow front-end Web developers to reconsider the prospect of using a responsive design framework. Think of it as a productivity tool that you can draw on in full or in part. Download just the grid system, or take the whole package with all of the extras. Perhaps use a framework just for prototyping purpose or actually reuse the parts of the framework that you know well in your own project.

A framework is intended to get a website running quickly, with minimum debugging. Customize the heck out of it to look completely different, or change just a few colors and be done. However you use it, you’ll have standardized, documented code that can be easily passed on to another developer for maintenance and tweaking and that looks reasonable and functions well. The code is not perfect of course, but it’s pretty good. It cuts down the time required to create a website, which will make the website cost a bit less, too.

The world certainly has room for fully customized websites. I don’t mean to suggest dropping them in favor of mass customization. However, the next time a client wants a bit more in their design but is stretched for budget, perhaps it’s a good idea to consider a responsive design framework after all. You might find it to be a helpful tool in your arsenal, for quick prototyping, testing or even production code — one that expands your range of products and makes clients happy.

(al, ea)

Front page image credits: Zurb Foundation22.

Footnotes

  1. 1 http://www.getbootstrap.com
  2. 2 http://foundation.zurb.com
  3. 3 http://boagworld.com/dev/css-frameworks
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/02/paulrand-foundation-large-opt.jpg
  5. 5 http://www.paul-rand.com/
  6. 6 http://eliw.com/presentations/2013/ne13/ne13.history.pdf
  7. 7 http://www.nephp.org
  8. 8 http://www.investopedia.com/terms/m/masscustomization.asp
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/02/grk-bootstrap-large-opt.jpg
  10. 10 http://grkfresh.com/
  11. 11 http://getbootstrap.com/getting-started/#browsers
  12. 12 http://foundation.zurb.com/docs/compatibility.html
  13. 13 http://getbootstrap.com/customize/
  14. 14 http://foundation.zurb.com/develop/download.html#customizeFoundation
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/02/cmscritic-foundation-large-opt.jpg
  16. 16 http://www.cmscritic.com/
  17. 17 http://getbootstrap.com/customize/
  18. 18 http://foundation.zurb.com/develop/download.html#customizeFoundation
  19. 19 http://www.joomla.org
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/02/webflow-bootstrap-large-opt.jpg
  21. 21 https://webflow.com/
  22. 22 http://foundation.zurb.com/

↑ Back to topShare on Twitter

For more than a dozen years, Jen Kramer has been educating clients, colleagues, friends and graduate students about the meaning of a "quality website." Since 2000, she has built websites in a freelance capacity and as part of an agency.

Jen is a lynda.com author with fourteen published titles, including the popular "Up and Running with Foundation", " Bootstrap: Adding Interactivity To Your Site", and "Responsive Design with Joomla!". She has published two books on Joomla and is working on a third book on Bootstrap.

Jen currently offers in-person and online courses through Harvard Extension School, Community College of Vermont, Center for Digital Imaging Arts at Boston University, and National University. She is also available for individual private tutoring, customized classroom training, and consulting. Jen earned a BS in biology at University of North Carolina at Chapel Hill and an MS in Internet Strategy Management at the Marlboro College Graduate School.

Advertising
  1. 1

    Agreed! When used in a clever manner there can be a lot of advantages to using a framework. Still I’d recommend using only parts of any framework combined with your own code, a sort of hybrid system, to get the best of both worlds. I find that usually the frameworks’ responsivity relies too much on standard breakpoints. I like using content to determine breakpoints wich means that a grid like Bootstraps won’t work as good…

    3
    • 2

      Agreed, it’s likely you’re going to supplement the framework code with your own, if only to make things look a bit different… otherwise, every site looks the same.

      In regards to Bootstrap/Foundation and their breakpoints, these are variables that are easily customized. The grid is programmed to respond appropriately to the breakpoints assigned. As you point out, breakpoints should be assigned based on where the content dictates, so this would be an important customization to make when working with these frameworks.

      1
    • 3

      Foundation at least lets you customise a breakpoint when you download the files without even touching the CSS.

      0
    • 6

      Agreed. This is one of the reasons I like Foundation over Bootstrap because it’s far more design neutral. It doesn’t seem to require as much unstyling in order to add my own design styles in.

      0
      • 7

        very well said. I just tried bootstrap for a change from foundation, I found its very similar to foundation but has much more styling for elements. unstyling it is a task for it. with plain css its difficult , may be with sass it will not be so hard.

        0
    • 8

      That’s exactly how I ended up using Bootstrap and what subsequently got me into pre-processing & gave my modular approach to CSS a much needed boost – if anything, I learnt a great deal.

      I’ve since moved on to using SASS and my own tiny framework, which borrows from not only bootstrap, but whatever I find useful and, most importantly, minimal. One example, the excellent article “Don’t Overthink it Grids” – http://css-tricks.com/dont-overthink-it-grids/
      My Grid css is now generally about 15 lines of code.

      Despite the fact I’ve crafted my own framework, I still use bootstrap. I recently assisted my companies Java team to redevelop the front-end of an online account management system and opted for bootstrap. It allows the Java programmers to simply reference the bootstrap site when creating HTML – letting them get on with what they do best without worrying about front-end code.

      I also use Bootstrap for Wireframing.

      I think every web developer should investigate responsive design frameworks – if anything, there’s a great deal you can learn. These frameworks are the work of countless man hours by multiple developers and code reviewers – there’s a lot you can pick up!

      3
  2. 9

    Our team launched a few weeks ago good addition for Bootstrap, we called this Startup Framework.
    We choose Bootstrap because he have very logical structure and documentation. Bootstrap give us the chance to make our dreams reality, here is reality http://designmodo.com/startup/ and here http://designmodo.com/flat/.

    Now, Bootstrap get an amazing visual addition. I know that internet is full of themes and templates, but how you said in your article “What’s more, a good theme will be updated regularly, and it will come with documentation, making it much more straightforward to modify.”.

    So, you’re welcome to try our solution, it’s free on github http://designmodo.github.io/startup-demo/

    Thanks.

    2
  3. 10

    I am more of a designer than developer, but I have played with Bootstrap and Foundation just a bit. From what I can tell, things like LESS and SASS seem kind of redundant and, forgive me, but… dumb. It seems to me that if you organize your CSS well and name everything properly, it should be no problem to find certain styles and change them just as easily as if you are using LESS or SASS. Especially if you are using an editor with Find and Replace (and what good editor doesn’t have that feature?). Given the fact that you have to post-compile it afterwards, it just seems like using those wastes time more than saves time.
    Just my opinion.

    -7
    • 11

      Dumb? I’d hate to see your CSS file.

      6
    • 12

      First, if you think SASS / LESS are redundant, you likely have no idea how different browsers influence a website and how much time you shed off just by getting rid of a ton of prefixes special cases.

      Secondly, it makes your work intuitive – if you’re tracking down the current page styles, they could be anywhere in CSS, be it the beginning of a file or right there at the end. With SASS, you’re more likely to find it in that “_article.scss” sitting right there in your folder.

      Thirdly, you can use them to build your own personal library that won’t be turned into CSS unless you specifically call it. Quick color changes, advanced animations and indeed entire layouts can be replicated in moments, rather than painfully tracking every single instance down. Do I want to change rounded corners into sharp ones? With CSS, you’ll have to track every corner – sure, in a text editor like Sublime Text, it’ll be fast, but it can still be tricky. SASS? One extend change and you’re done. Don’t like the change? Again, CSS – every single corner. SASS – one extend. Now imagine doing this for entire grids and you’ll realize just how incredible the power of SASS or LESS is.

      As for “post-compiling” – it’s all fully automatic, especially if you use something like CodeKit or Prepros.

      However, with great power comes great responsibility, as they say. SASS, LESS and their less known alternatives can be written badly, just like CSS. For instance, let’s say I have a button style that I’m using throughout the site. In SASS you should call it with @extend, then build all substyles on that. But the same can be done with @include and nobody will notice the difference – that is, until they open CSS and die from shock over all those duplications. I’ve also seen nested code that was there just for the sake of nesting, again needlessly bloating the compiled code.

      Thus, even as a designer, embrace the power of SASS or LESS – not only will you be able to do more in less time, it’ll also make you a better designer. :)

      6
    • 13

      Definitely not dumb. Using LESS/SASS for CSS is equivalent to using layers in a PSD or Illustrator file — it helps organize your work in a powerful way. Start with labeling RGB colors … a very simple use for CSS pre-processors is to define @logo-color: #ff1328; and use @logo-color; throughout your CSS. This makes it much easier to read and debug.

      0
    • 14

      Tim,

      Thanks for your thoughts. I am assuming that the negative votes you received for your comment are strictly from biased programmers who don’t really understand front end coding. I believe there is value in frameworks for most teams of developers but I also see the value of client based work being easy to spin out from a custom stand point. I have actually built a simple layout in a fraction of the time it takes me to modify Bootstrap and there are over 100,000,000 unique visitors on that site everyday. I didn’t use a framework and my CSS files are less than 2000 lines of code before minimizing.

      Don’t let anyone ever bully you into thinking a framework is the right answer. Both thoughts are not wrong but both thoughts are not completely right either. I am under massive pressure right now to make a decision whether to use a framework or right our own as a company with a team of developers.

      Good luck with your design journey and don’t let the negative votes throw you off. Keep growing and keep learning and keep fighting for what you believe in.

      Chuck

      1
  4. 15

    I use Foundation & http://Bolt.cm for most websites these days, and when you dive into the (Sass) customisation/minifying options a bit, the amount of excess code is not extreme (and _much_ less than in most WP themes).

    I assume that Bootstrap offers similar tricks.

    0
    • 16

      Bootstrap itself not, but bootstrap-sass does. When you add bootstrap in its most undressed version to your site, you’re adding little over 40kB of extra weight. That’s nothing, really. Especially with SASS you can leave out so much, it’s amazing.

      0
  5. 17

    In my day job as a .Net developer we use many different frameworks. I find that they increase my productivity and allow me to focus on the job I need to get done for my (internal) clients, rather than having to focus on passing bytes around the network.

    Now I agree that by using frameworks there is bound to be some bloat. But in my opinion if you are already using a CMS like WordPress or Joomla, you are committing to having extra ‘bloat’ anyway.

    Also if enough people use a framework, then it becomes more in the framework authors favour to make the framework as efficient as possible.

    0
  6. 18

    I agree with this article Jen – contrary to the message that an experienced developer should write their own css every time they approach a site build, if you’re an experienced developer (that knows their way around sass / bower) you have such granular control over your css with foundation that I would argue you’d be crazy to reinvent the wheel for a relatively ‘standard’ site build. Of course, if you’re building a web app that has non-standard layouts/functionality you’d be crazy to take on a framework and bend it to fit your needs – but if we’re talking about delivering quality and value to budget conscious clients that want a responsive site, you’re surely saving days of work (and thereby cost) by getting your head around how powerful foundation can be and using it to good effect.

    I take my hat off to Zurb for making it available and maintaining for free!

    0
    • 19

      Paul,

      I completely agree with you. Using SASS / Bower, we’ve been able to pick out what we want from Foundation to remove the bloat. There is a bit of a learning curve to picking up grunt for those not familiar with SS Javascript but the payoff is huge once they do!

      0
    • 20

      Thank you, Paul! There’s a time and a place for everything in web development. I’ve heard so many people trash responsive design frameworks, I thought I’d put my own philosophy out there. As professionals, it’s our job to determine when we can use a framework and when custom coding makes more sense, rather than dismissing one approach or the other out of hand.

      0
    • 21

      completely agreed with your point, I recently learned this sass , bower and grunt tricks, learning and documentation on it is not enough on internet but yes by using these tools you can minify css js and loading time . :)

      thanks @foundation @zurb for making it free !

      0
  7. 22

    In my opinion, there is nothing bad about using CSS grid frameworks. I remember two important things that they taught us on university (and actually you don’t really need any university to figure these things out).

    1) Don’t reinvent the wheel
    2) Always choose the best solution/technique/programming language/whatever according to project needs

    So when you are about to start new project, first, you should analyze the specific needs and based on that analysis choose to:
    a) use an existing CSS framework, if it has what it takes to do the job
    b) write your own grid, if there is nothing suitable

    Should it get more complicated than that? I think not..

    By the way, I decided to try “Profound grid” in project I am actually working on and I have to say it already saved me a LOT of time :)

    0
  8. 23

    I have used the full Bootstrap library in production for projects in the past, precisely for the reasons you spell out: it provides well tested solutions across a wide range of devices and browsers that minimizes the amount of time I have to spend testing. Few of my clients could afford the kind of time that goes into really, properly testing a website’s compatibility across a lot of browsers and devices.

    However, I always found that I used no more than the grid and a few components for almost all projects. This bloat always bothered me, but serving small-scale clients I often didn’t have the budget to invest in tons of testing.

    For my latest project, though, I finally dug in my heels and worked my way through the problem. Now, rather than just use the LESS files to customize the output, I’ve used them as modules and jettisoned all the files I don’t need. I just include the styles and JS needed for the grids, dropdowns, responsive utilities and glyphicons.

    It took a bit of work to copy out just the dependencies I needed and integrate them with my project. But the result is that I get the reliability of a well-tested framework without the bloat. And if I run into some issue with one of Bootstrap’s components, I still get the benefit of a vast community of users from which to search and find solutions.

    I don’t think frameworks are bad, but I do think that Bootstrap could try harder to make its components modular. I had to go through a day of trial and error to get just the rules I needed copied out of variables.less (grid.less won’t work on its own). And I also had to spend a while stripping out a ton of code related to their little utilities (like pull-right classes) just to get to the bare components I wanted to use. I can appreciate that they have their reasons for structuring it the way it is, but they would go a long way towards addressing the criticisms if they encouraged more modular implementations.

    0
    • 24

      Hey Nate — Sorry for your pain and suffering, but hopefully you learned a ton about Bootstrap, and the next round of customizations will be much easier! Do check out the new Sass files with Bootstrap as well. I don’t know if they’ll help you in any way, but I’m pretty excited that we have a Sass option now, in addition to LESS.

      1
      • 25

        Bootstrap and Foundation are obese. I did a small comparison of minified CSS file sizes and the results are:

        Foundation: 106KB!
        Bootstrap: 98KB + 13KB theme
        Pure: 19KB
        Cardinal: 16KB
        Skeleton: 11KB

        The last three CSS frameworks have everything we need – responsive grids, fonts, forms, buttons, tables, etc. – still being lightweight. So we don’t need no bloated Bootstrap!

        0
        • 26

          You’re right, Foundation and Bootstrap are much bigger in their default download configurations.

          However, you’re not really comparing one thing to the other.

          For example, in Bootstrap/Foundation’s default download, there’s JavaScript and styling available for tab-based navigation within a page. That’s not present in Pure. (And this is just one small example — there’s many more examples like this.)

          Your comparison would be far more useful if you used Bootstrap or Foundation’s customization screens to compare the same sets of functionality to the other frameworks.

          So just download Bootstrap or Foundation’s “responsive grids, fonts, forms, buttons, tables, etc.”, then compare those file sizes to what you get with Pure/Cardinal/Skeleton with the same set of features.

          I have not done this myself, but my guess is that there isn’t one framework that’s drastically larger or smaller than the other.

          0
          • 27

            Jen is right in that a comparison between those frameworks is not viable though Jan is also correct. Both Bootstrap and Foundation are grossly bloated. They demonstrate internally some terrible code also. Look at this selector for example in the Bootstrap release. https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L767

            Both contain swathes of opinionated design styles that add absolutely nothing to the functionality of the framework, sure you can customize components but even within those individual feature sets there is still code bloat.

            It’s perfectly possible to build a framework with equivalent functionality without that excess. Have a play around with http://responsivebp.com/ and you’ll immediately see the difference.

            1
  9. 28

    I used to be very anti-frameworks, preferred to code my own grid systems etc., but after using Bootstrap 3 a couple times on projects, I have to agree, it does have its perks. I’m not sold on every aspect of Bootstrap yet, as I work with very custom designs and some aspects take more time to customize than just writing them from scratch. But I did find Bootstrap’s grids, buttons and glyphicons very handy, and include only those that I use. The main reason I was nudged into the framework-way was, as mentioned in the article, the ease of a future developer taking over the project one day, and not having to figure out my custom code.

    0
    • 29

      If you work with really custom designs, you may find Foundation is easier to work with than Bootstrap. Foundation was designed by ZURB, a web development company, for use with their own in-house clients. It comes with less out-of-the-box styling (less overrides!!!), and it has tremendous flexibility in their Sass files. You might check it out for your next project.

      0
  10. 30

    I personally like to use Twitter Bootstrap as a rapid prototyping tool, and code the final product by hand. This has turned out to be a successful approach for me, as building the prototype takes very little time, and the client gets something to play with, and gets a better perspective on how the final product will behave during the process. This also buys me additional time to prepare and organize the final implementation strategy, based on clients input from playing with the prototype and understanding what can and what can’t be done. Great article, thanks for sharing your thoughts.

    0
  11. 31

    How about Grid tools like Susy 2.0 or Singularity, and Breakpoint ? They aren’t frameworks, but you can make your own responsive grid.

    0
    • 32

      Depends on what you want. Responsive design frameworks aren’t all about the grid necessarily. Some like the CSS styling or some subset of the JavaScript widgets bundled with it.

      If all you want is a responsive grid, then there’s certainly simpler ways of getting that, and the technologies you cite are a few examples of that.

      0
  12. 33

    I’m a bit surprised by the comments so far. Of course Bootstrap and Foundation are incredibly useful frameworks. But if performance matters on a production site, which is usually the case, it is always much more beneficial to create custom CSS and JS. Because the frameworks include so much that may not be needed on a specific site, it’s more work to remove all that “bloat” than to create custom code. Plus, if you work with SASS (or LESS) in an atomic structure, you quickly accumulate “your own” framework anyway. And you can integrate any of the great things that Bootstrap Foundation include, if needed :)

    0
    • 34

      Agreed! Bootstrap is a great way to build a quick mockup/prototype, but I don’t like to have 8 classes to get my float of elements right. (push/pull for multiple breakpoints etc). I would recommend building a decent Boilerplate, Sass-files with snippets/mixins in combination with zen-coding. Maintain it with Git. It will result in more control, a clean Sass-file (with nested media-queries to be able to build mobile first) and Less overhead. Especially when you’re only using the grid-utilities.

      0
    • 35

      Hi Peter — do check out the customization pages for Bootstrap and Foundation. You can customize your download automatically. If you’re not using dropdown menus (for example), you could turn off that piece of functionality. The customization screens not only strip out the relevant JavaScript, but also the CSS (including in the LESS/Sass files).

      What’s more, if you aren’t using a piece of styling (let’s say the Jumbotron, breadcrumbs, glyphicons, whatever), you can toggle that off as well. It winds up being pretty straightforward to strip out most of the styling or JavaScript you don’t require with just a few clicks.

      With Bootstrap, the only downside I see at the moment is that this would generate customized/streamlined LESS files only — it’s not offering Sass files just yet. I’d be surprised if that wasn’t in the works, though.

      Keep in mind the quantity of testing time required for your own custom code, vs. the time it takes to strip out unused JS/CSS from these frameworks. If you have the budget to go fully custom, why not? But I’d argue that you’ll spend less time customizing your framework download than you would in browser testing. I’m sure you can find exceptions with specific projects, but in general, I think you’ll find that to be the case.

      0
      • 36

        Yes check out the custom pages which allow you to pick which elements you want.

        Also I know both teams work incredibly hard at making their frameworks as fast as possible to download which means their code is designed to be light. I rather rely on 20+ people making the core elements as fast as possible vs a two person team trying to achieve the same thing.

        Removing bloat or “uncoding” is one of the main reasons I use Foundation. They try to keep their framework as unstyled as possible so that you don’t have to rework their code. I often found myself working against Bootstraps styling (v1 – 2).

        0
  13. 37

    I usually use the development version of Bootstrap and then I customize the LESS & JS files according to each project needs. This way I make sure that each project uses only the necessary codes and nothing extra.
    In addition to Bootstrap & Foundation, I advise you guys to take a look at UIkit Framework http://www.getuikit.com which is simple to use, easy to customize and extend.

    0
  14. 38

    Very nice article, you hit a lot of good points. While there will always be a need for full customization, a framework provide a great option for a lower budget project but there is still plenty of customization options available. I find I spend less time debugging and less time writing media queries and refining the responsive layout since using Bootstrap. I have not had too much of an issue with bloat either. As you become well versed in Bootstrap you can easily trim down the css and remove unnecessary files.

    0
  15. 39

    Hi Jen,

    Thank you for your discussion on responsive frameworks. You’re right, they are great productivity tools that can benefit front-end developers. What I’ve seen, from meetups and events I attend, is many developers hesitate to transition to frameworks. Their reasons are varied: time spent learning a new system, losing control over the code, or thinking the code is not as good as their own.

    Jen, are you familiar with the free and open-source Pattern Lab, from Brad Frost and Dave Olsen? http://pattern-lab.info/ I learned more about it at a conference this week where Brad Frost talked about it. I haven’t tried it, but it sounds like a good tool to add to my toolkit.

    0
    • 40

      Hi Deborah —

      It seems that there are new frameworks released every day! I have not specifically encountered Pattern Lab just yet. However, my primary job is in education. I tend to look at the technologies that are “big” and “hot” as important job skills that my students should know. One could argue that once you know one of the responsive design frameworks, the next one tends to be simpler to learn, since you understand the basic way the moving parts fit together.

      If Pattern Lab (or any other framework) becomes popular, I will certainly learn it!

      Bootstrap and Foundation are both open source and free. I don’t think I stated that in my article.

      0
      • 41

        Jen-

        As the lead dev for Pattern Lab I’d like to note that Pattern Lab is not a framework in the sense that you’ve written about here. It’s neither a Bootstrap nor a Foundation. Actually, either could be used with Pattern Lab. Really it’s more about helping designers and developers create modular and re-usable systems based on whatever tool they like. Be it custom or a library as you’ve noted here. It’s also a tool to act as a one-stop-shop for a team and clients to review work. It seems like we need to rethink what kinds of deliverables are needed to properly showcase a responsive design (e.g. style guides which seem to be pretty hot at the moment). Pattern Lab falls out of what was learned in the Techcrunch and Entertainment Weekly redesigns.

        I put together a short presentation about the what and why of Pattern Lab for our team here at West Virginia University. We’re reevaluating our own internal processes as we try to break out of the traditional linear workflow :)

        http://www.slideshare.net/dmolsenwvu/the-what-and-why-of-pattern-lab

        It’s still early days. Both for the tool and the processes. Just wanted to offer the clarification for you and your readers :)

        1
  16. 42

    I’d like a more light-weight solution, something less pre-designed and more like a good set of building blocks. My main beef with Bootstrap and Foundation are the excessive divs. There’s got to be a way to cut down on them.

    0
    • 43

      Both Bootstrap and Foundation seem to be working on this issue. Bootstrap 2 had way more div’s than Bootstrap 3, for example. Both frameworks also support semantic tags rather than divs. So if it makes sense to use nav, header, footer, etc in your structure, you can work those into the grid system easily with both frameworks.

      0
    • 44

      You should try Toolkit: http://titon.io/toolkit

      What’s exactly wrong with a lot of divs? Less markup != better code. Tags should be used semantically, which in turn can increase the amount of tags being used. Some situations and components are not possible without a specific structure anyways.

      0
  17. 45

    I believe that those “huge” frameworks are for people who really know them, not for everyone. Usually people ends up with more code than the project needs. If you know the framework, you know what to avoid and what to do to get a sharp final code.

    Me? I created my own “framework” but is more a CSS framework than a *design* framework like Bootstrap is. I can use it, and I can twerk it as I want.

    I recommend everyone to create their own framework: Observe how Bootstrap, Foundation and others work. Get the best from them, adapt it to your coding style and workflow.

    This way, you have a tool adapted to your workflow, and not a tool you have to adapt to.

    Nice article!

    0
    • 46

      Daniel: “I recommend everyone to create their own framework”

      And I don’t. Your own framework isn’t tested across many, many, many platforms, doesn’t have a team of developers devoted to fixing bugs and improving performance, isn’t documented, doesn’t have books and articles and sites and videos devoted to teaching and explaining it, doesn’t have a support community, and will be a totally unknown entity to the next individual who walks in and has to look at your code.

      Several people have talked about “unstyling” Bootstrap, but there are a couple of solutions to that.

      First is simply using the LESS/SASS version, changing the default definitions, and generating your own CSS off of it. Then you’re not “unstyling” the styles, but defining the ones you want in the first place. Second is to do the same thing off the customization page.

      Third is to use Bootstrap Themeroller or some other site to generate your own set of base colors.

      Personally, I’d go the LESS/SASS route and add modern CSS tools to your toolkit. I think once you’ve done it once or twice you’ll find that it’s just as fast to cycle through the defaults as it is to define your own versions, or reset your own library.

      0
    • 47

      I’d have to agree with Daniel. I never cared for frameworks and have spend years developing my own method. It’s a bare bones type framework that can adapt to any project. I take on a very minimalist approach, so any web designer could pick up my work and not be lost, providing they actually know HTML/CSS. :)

      0
  18. 48

    I tried Bootstrap but when you start customizing the css by overwriting styles and you find out you would have been better off building it from scratch.

    I moved over to intuit because it doesn’t add any styling but that project isn’t being supported anymore.

    I’m using Pure now because it is super light weight and very minimal styling.

    0
  19. 49

    Also as far as frameworks go both Foundation and Bootstrap are excellent. Two big wins in my book for Foundation are:

    1. Foundation seems to require less undoing or unstyling. I seldom need to override Foundation elements to make it look the way I want. Bootstrap feels overly designed and required more time counter styling their styles.

    2. Zurb (Foundation) has an amazing community. Their whole team is incredibly friendly and supportive. I’ve been using their resources for years and multiple times they’ve gone above and beyond to help. And they are just plain fun people. That attitude is contagious and is evident in their community of users.

    0
    • 50

      Point #1 is a double-edged sword, as they say. :-)

      Experienced front-end developers tend to love Foundation for this very reason.

      However, if you’re working with a PHP developer (for example), and they need to build a front-end for whatever goodie they’ve cooked up, they tend to like Bootstrap for that very reason. There’s way less styling to write to get a decent looking site very quickly. Sure, it looks like a default Bootstrap installation, but it’s still way better than what they can design, they get the site up fast, and the boss is happy. It’s a win for them.

      In the end, I think Bootstrap and Foundation are pretty awesome, but they serve very different target markets and solve different kinds of problems.

      0
  20. 51

    I’m one of those where I use a framework, but only partially.

    I’ve developed many sites from scratch before, but felt like I kept rewriting the same code. I eventually created a base code for myself.

    Later, I started looking at frameworks, to see if there was an easier way to have a responsive site. After trying out Bootstrap, Foundation, and a few others, I settled on Groundwork. It was good with the exception that I felt like the code was a very bloated, especially in the final CSS file.

    I decided to make some contributions to the code through git, but as I now mainly develop WordPress themes, I discovered I was still rewriting a lot of code each time. I also should point out that all of these sites that are custom-designed.

    Using the basis of the Groundwork framework, I developed my own base theme. It’s grid-based, responsive with customizable breakpoints, and it uses Sass. Because performance is very important to me, I’ve created all sorts of settings that easily turn on/off sections of the code to remove all of the bloat depending on the project.

    The best part of it, is because it’s something I developed, I know where everything is in the code, so I can modify it as much as I need. It has now saved me countless hours with all of the sites I’ve developed with it. Someday, I may release it on Github, but I don’t feel like it is documented well enough to do that.

    With that said though, I actually had the need to create my own, and that’s why it has worked so well for me. With others, a framework may be the best solution, but my main issue is the additional bloat that comes with the framework, so I agree that it’s always best to weigh out the pros and the cons.

    0
  21. 52

    Hi Jen!

    Thanks so much for the shout-out! We really wanted CMS Critic to be as responsive as possible and I think foundation has amazingly good functionality and is a solid framework. Great article!

    Mike (CMS Critic)

    0
    • 53

      Hi Mike, you’re very welcome! I thought your site made a good example because it was so full of information packed into a flexible space. Nice work!

      0
  22. 54

    I think that you need to make the decision to use a framework on a project to project basis. For example, if low load times are a focal point of a project, a framework probably isn’t the right way to go. However, for many of the brochure and marketing sites that you see, the additional load time of a framework isn’t going to matter.

    We use Bootstrap frequently at the agency I work for, simply because it streamlines the development process while adding some consistency between developers.

    0
    • 55

      Exactly so. I’ve not said that you should use a framework 100% of the time for every project you ever code.

      But it’s also not true that 100% of the time, you should code everything from scratch.

      The trick is always knowing what works best when in what situation. Ultimately, that’s what’s going to make you a successful web developer.

      0
  23. 56

    I’m just saying this to frameworks detractors: Savvy developers know that reinventing the wheel is for suckers.

    0
    • 57

      Suckers work at this site, Amazon, Apple, etc? Sometimes out of the box framework is not a solution. Eventually, “savvy developers” create their own frameworks – polished fir their own needs.

      0
  24. 58

    Thanks for this balanced account. I tend to avoid frameworks myself (not just for css, but also for php and anything else). For me the issue is that if I use a framework I fear I will place myself in a position of dependence. This could conflict with my ability to be innovative and to respond to customer requests. On the other hand, I do depend on some WP plugins and I am certainly not averse to using tested code like SurveyMonkey, etc. I agree that there is a place in the market for non-customized sites that rely on frameworks.

    0
  25. 59

    This might be a stupid question, but who is using IE 6 and 7? Hell, why not support IE 5 or 4? In most cases we have to work twice to make a website work on this browser. I know this is the beauty of web development, but why worry for 5% of users who visits the site using IE 6 and 7? The beauty of web technologies stops when IE comes around.

    0
    • 60

      Not a stupid question at all. There are, unfortunately, still people that use the browsers. On a project I worked on last year, I decided to drop support for IE 6 & 7 since they were something like less than 3 percent of the Internet traffic.

      It didn’t take long for me to start hearing from my client that he was getting complaints people couldn’t access the website.

      I looked deeper at the analytics to figure out just how many people were dealing with this issue, and even though IE 6 & 7 are proportionally a small group in the Internet world, there appears to be some sectors that still use it, and my hunch is it’s mostly people who cannot really upgrade their computers… which is a mix of “it works fine so why should I upgrade” and office workers in the public sectors.

      I’m sure others can be more precise, but it was something I noticed. Because a lot of the work that my client focused on was of interest to the public sector, that meant about 25 percent of the traffic to the site was from Windows XP machines using IE 6 & 7.

      0
  26. 61

    I have used both, but I prefer bootstrap. I would have to agree that for larger projects you should roll your own. However, even then there is a good Boilerplate, http://bjankord.github.io/Style-Guide-Boilerplate/ I am for anything that helps speed up my workflow, and with the customization options in these frameworks you can get it pretty lean.

    0
  27. 62

    I also want to point out than when I clicked on this article from the home page I went directly to mobile.smashingmagazine.com rather than the regular site, and I am using a desktop browser.

    0
    • 63

      It’s a responsive website, therefore it has no “regular” or “mobile” version. mobile.smashingmagazine.com means you’re in the Mobile category, same as for instance coding.smashingmagazine.com.

      0
  28. 64

    I recommend reading Handcrafted CSS by Dan Cederholm and Ethan Marcotte, then reading SMACCS by Jonathan Snook. I feel like people are looking for a standard way of writing something that is different every time.

    Sure, there are common patterns, a grid is always going to be one of them, but a grid has no fixed rules either, if it did gridset would have been a waste of investment for Mark Boulton. This is where taking inspiration from a method like SMACCS, OOCSS et al is a better direction; write better markup make tasks simpler. This is actually what a lot of the aforementioned php frameworks have all been about – simplifying a complex language, that’s all that Symfony, Cake, Zend are at their heart. Yes they may do routing a particular way and you may prefer X over Y, or they allow you to get to a variable using curly bracelets instead of a bunch of mathematical symbols but ultimately their goal is to simplify something complex which html and css are not – and if they are, it’s because you made them that way.

    As noted, ‘frameworks’ have a number of critical risks associated with them. You’re going to end up with a lot of things you’ll never use or don’t need, and the ones you want you have to extend or worse change. As soon as you do that you’ve lost your ability to maintain the framework. If there is an update to it you can’t upgrade because you’re dependant on something now deprecated or modified. Then there is the added issue that our work as front-end designers and developers is dictated by two factions fighting against one another. Vendor manufacturers and the W3C. We have specifications instead of fact to work with meaning that most of the things you want to work with are different from one place to the next.

    Roll your own, and learn from the last, but don’t copy and paste it unless you’re still making the same website 100 times with a different colours scheme and charging twice as much to the next guy.

    0
  29. 65

    Certainly nothing wrong with using frameworks, although I pretty much always find that there is a significant amount that isn’t entirely suitable, or which I want to change, so customization needs to be easy.

    Responsive frameworks still seem very heavily reliant on float based layout, even though flex is increasingly widely supported. It’s going to be interesting to see how rapidly they respond to that significant change.

    0
  30. 66

    These are exactly the reasons why I wrote Titon Toolkit. The CSS is designed with no aesthetics so the filesize is extremely small, literally half of what Bootstrap/Foundations are. As for the JS, I use a robust prototype inheritance system where I can pack in double the amount of features for a smaller filesize. You can check it out here:

    http://titon.io/en/toolkit
    https://github.com/titon/toolkit

    I have some interactive demos available for testing also.

    http://demo.titon.io/

    As well as a presentation I gave a few weeks ago that discuss more of the philosophies behind Toolkit.

    http://titon.io/slides/what-is-toolkit.pdf

    Toolkit is extremely customizable, more so than the competition. I’m really curious what others have to say about it. We started using it at my employer and it’s working wonderfully so far.

    0
  31. 67

    In an increasingly mobile world, a Website needs to be both Responsive and Fast. It’s going to be very difficult to do the latter in a ‘One Web’ kind of way using Responsive Design Frameworks because of the superfluous bloat.

    Restive.js is a Responsive Design Framework I built that enables you add the Responsive enhancements you need and control them directly within your CSS markup. It’s really easy when you know how.

    http://www.github.com/obihill/restive.js

    0
  32. 68

    Another possibility is to use a micro-framework : a lot of people think Boostrap is far too heavy and complicated for their needs.

    A micro-framework is very light, allows to benefit from good practices, allows to build quickly personnalized grids, etc.

    https://github.com/raphaelgoetter/KNACSS & https://github.com/nico3333fr/ROCSSTI are two examples of micro-frameworks.

    0
  33. 69

    Totally agreed with this article, as suggested we should use our own CSS/JS if our client is having time and money, other else we should go for these frameworks.

    In my experience I’ve faced that sometimes we have to compromise with our design a little bit while using these frameworks.

    Hey Jen, Can you please explain LESS or SASS ?

    Actually i am not much experienced but it would be appreciated if you can wake it up for me :)

    In my opinion BS3 is better than Foundation.

    0
    • 70

      LESS and Sass are CSS preprocessors. They are a way of writing your CSS such that it can contain variables, bits of reusable code (called mixins, think things like rounded corners), logic (if/else), math (make that padding 50% larger) and more. LESS or Sass files compile to form regular CSS files. LESS compiles with JavaScript, and Sass compiles using Ruby.

      This is a good article explaining Sass: http://alistapart.com/article/why-sass

      Sass is the more popular of these two CSS preprocessors.

      0
  34. 71

    Thanks Jen, for this interesting write up. Frameworks indeed makes our development efforts to minimum, and customization can always make the code better.

    0
  35. 72

    Hi!
    I have been designing web for 17 years and gone through a couple of frameworks and CMS during their development upgrade cycles. I can see the benefit of using frameworks for some occations, but not always. As a HCI person with focus towards learning, I would say it’s a bad part getting things served all the time, for your own development of learning how to solve problems with different kinds of solutions.

    Just my 2 cents…

    0
  36. 73

    In the last few months I have used both Bootstrap and Foundation to build a website. Both have their advantages and their disadvantages. Frameworks are another TOOL to keep in my development toolbox. Which one comes out of the toolbox depends on what the project calls for. They are not the end all and be all.

    0
  37. 74

    I know you said at the beginning that you’re focussing on mainly Bootstrap and Foundation, but the article does make it look more clear cut than it is – either you go for a heavy-handed, bloated framework, or you do everything yourself completely from scratch.

    For designers who maybe aren’t so confident with responsive design, there’s lots of simple responsive grid solutions, such as Base, Toast, Suzy, Skeleton, etc. that will deal with their pains of making the site neatly responsive, while not getting in the way of the styling at all.

    0
    • 75

      I don’t like Bootstrap or Foundation, but I agree, Base and Skeleton are very nice. I think they are simpler and easier to build on.

      0
  38. 76

    I’ve come to love frameworks with the many micro-sites I create for work. Bootstrap and Foundation are both great. I’ve preferred Foundation because, like others have said, there seems less css I have to override than in Bootstrap.

    However, I’ve been recently impressed with the Pure framework. It is a nice basic, extremely lightweight framework. It is a compromise between a full-featured framework and creating your own, as you can pick and choose which basic styles you want loaded from their CDN.

    Check it out: purecss.io

    0
    • 77

      Foundation and Bootstrap also have customization screens where you can choose what elements you can download. If you only want the grid system, you can just download that part of these frameworks, without anything else.

      1
      • 78

        Thanks for the response Jen. I guess I should have said that I picked pure primarily for the speed aspect on my site.

        I compared the pieces of what I needed from my custom Foundation build on my network to the pieces of what I needed from pure on the Yahoo CDN. Pure was about half the compressed size and nearly 3 times as fast.

        I think folks would really benefit from doing similar analysis for their specific site needs. It does take some time upfront, but it has significant benefits.

        0
        • 79

          Thanks for that response. That’s a truly educated, thoughtful, and insightful answer. You kept an open mind, looked at different approaches, considered your own needs and the needs of the client, and you identified the solution that worked for you — and you can say exactly why that solution was the one you chose.

          0
  39. 80

    I’m personally not a fan of either of those two frameworks. I think they tend to be a little over involved. And if you have any custom layout approach, they become that much more involved to overwrite. I prefer to build my own framework. But I basically reuse it on every project I do. Since I’m familiar with my own code, it’s limitations, etc. I think the result is much better efficiency.

    However, I can see how frameworks can be very beneficial for backend developers. It gives them a great foundation to build on and not have to spend the extra time to create their own.

    If you’re a front-end developer though, I strongly encourage you to create your own framework for at least a couple projects. It really helps create a cohesive code set that is clean and easier to modify later on. Plus you learn a lot that way.

    0
  40. 81

    I like to think that my boilerplate/front-end framework solves all the issues you mentioned. I recommend everyone go have a look…

    0
  41. 82

    If you’re working with a custom design, it’s better to build from scratch… If you’re on a tight budget and need to throw up a site, you might as well purchase a template online.. For rapid prototyping, these frameworks are great… Although I find it quicker to code responsive sites by hand very often (since one accumulates snippets over time) than use Bootstrap or Foundation and override them… I’m surprised no one’s talking about updating Bootstrap or Foundation… The migration guides are crazy for Bootstrap 3… Do keep in mind that it’s a time investment and that div structure is occasionally a bit excessive…

    0
  42. 83

    First I have to say that I think that you can learn a lot from good frameworks like this two, I usually read all the documentation, and download the packages, but in production, if you want to be really ‘free’ designing and coding your web, frameworks tends to steer you in some ways, styled buttons, etc. Maybe you can customize a lot of things, but I think that at this point it would be easier to make your from scratch, cause you have hacked a lot the frameworks and you will not upload it anymore.

    I’m not agree that 100% of page doing from frameworks are the same, but It shares the same structure grid, the same breakpoints and the same js/css based soutions and animations.

    Very nice article!

    0
  43. 84

    Depending on the project, I either use Bootstrap (mostly already prepared themes for WordPress, including my own) or a much less weighty approach with Responsive Grid System and a few selected addons (eg. Font Awesome or HeadJS).

    In most initial, “complete new design” situations, where the customer needs a working solution really fast, I choose the first option. For retrofitting RWD into already existing, more complex websites, I usually choose the second option. In some cases, the full-blown option #1 is still legible, but in most cases a catious, cool-headed approach is required, as to not totally have to redo the site and thus having to “reinvent the wheel”. So #2 is the obvious better choice, as you still might have to rework quite a lot. Also, if there is already some kind of grid framework pre-existing in the site “to retrofit”, then adding RGS turns out to be much easier than eg. BootStrap. The major advantage is, that you can calculate different column numbers easily by yourself – but in Bootstrap, they are a fixed value. So if the project might have got a Blueprint CSS-based grid framework with 27 cols integrated, Bootstrap falls flat on its nose with this.

    In case of the realign of my own website I chose the second option thou, mostly because I wanted to learn. Relearn native Javascript, pure-preed HTML and CSS, that is. So far it works out quite well – compared to the monster feature (over)load of Bootstrap (160 kb plus about 150 kb of addons, w/o counting in the ~440 kb of Font Awesome).

    cu, w0lf.

    0
  44. 85

    you need to be able to tap into some prewritten elements, combine them with customized additions, and develop a solution that’s more customized than a canned theme but less customized than a high-end solution. By not starting from scratch, we’ll have saved hours of time in development and saved money for the client. http://www.viziononline.co.uk offers Responsive Design Frameworks

    0
  45. 86

    Most of my clients get more quality out of a framework like bootstrap; they have not the money for a faster solution and they would not get a better solution, even if they spend much more money. They will never reach the point to use devlopement from the scratch.
    Bootstrap as an standard would make websites in general much more useful, much better then today. Everyone who can pay more, has more time and resources is very welcome to get much more…
    Don´t forget, that many of the benefits of custom development don´t count, if your client runs his services on shared servers, has no content strategy and no knowledge of internet sales and marketing. Who ever develops for other clients, has the choice; Congratulations! – but most of small and middle-sized companies have not. Nor the developer/designer. A “bloated” framework serves all the benefits of the big player websites – only slower. Thats a lot!

    0
  46. 87

    I’ve used both Foundation (3 and 4) as well as Bootstrap (2.3.2 and 3.1.1 at the moment) and found both had their own issues. I think Javascript components in Bootstrap are better quality than Foundation (though that may have changed), just less problems overall. However, Bootstrap has somewhat overly verbose markup for things like the nav bar.

    The real key to using both is the mixins though. Even if you just use the grid, don’t just put the preset grids in your markup. Instead use more intelligible names for your classes and then add the grid mixins in those to size your containers.

    Also always work with straight LESS or SASS and build your own minified combined CSS files instead of including Bootstrap or Foundation CSS and then overriding those with your own stuff. If you use the Bootstrap or Foundation LESS/SASS from the start you can use their variables, override them nicely and so on. Makes for a much more pleasant development.

    Overall I find that the most useful parts of both frameworks are the grid, form, table and button stylings. The Javascript components usually end up being just a tad bit wrong for more elaborate stuff.

    0
  47. 88

    Hi Jen, I agree with your motivations for productivity, efficiency and getting the most out of your budget. And I also believe it’s crucial to set up projects in such a way that they are easy to use for current and future team members. However I do feel like the step of analysing project requirements and client’s wishes to determine technical scope and requirements is too often skipped. I feel that using a framework as a starting point instead of the project requirements is risky and can often lead to messy code and unsuitable solutions. I’ll try to explain with a few examples:

    * Most frameworks answer the question of a responsive layout with a grid system. While you can customise the grid, I think it should actually be the content that defines responsive behaviour. For instance I don’t want my main menu to always collapse at 768px. Instead I want it to collapse when the menu items (content) no longer fit horizontally. Pixel based media queries are not really responsive anyway. But more importantly if the site is available in multiple languages, The width of the menu items will be different per language. So any pre-defined grid is useless to me.
    * If the framework you pick doesn’t support a specific project requirement you will need to extend a framework feature. It depends very much on the framework whether you can actually extend rather than having to break / fork the framework. I find framework features are often closed off to outside manipulation (other than feature configuration options). For instance I want to use Bootstrap’s carousel component because its size adapts nicely to the viewport. Now I also want it to lazy load images, show a grid of images on each slide and make the number of images per slide dependent on the viewport size. These additional requirements are not natively supported by the carousel component. And I feel we have to hack this extra functionality in, which makes it especially hard for future developers on that project to work with this component.
    * Accessibility is still an issue in most frameworks. You indicate Bootstrap has mode improvements. However modals, dropdowns, tabs and carousels still don’t progressively enhance. Dropdown options, tab pane and carousel content is directly hidden by the css even when the javascript is not (correctly) executed. Those are big accessibility issues. I believe this is setting a wrong example. I’d rather developers start with plain content and copy progressive enhancement techniques like the ones from the Filament Group (http://filamentgroup.com/dwpe/).

    I have a lot of respect for all the frameworks out there and the people who developed them. I would just like everyone to take a minute before starting a project to figure out what they are trying to achieve and then what existing tools they can use to increase productivity. I think in a lot of cases you might be better of with using a lot of small helper libraries than using a one size fits all framework solution.

    1
  48. 89

    I work at an ad agency, and for me, its all about productivity and deadlines. Sometimes I got the time to work my custom grid in about 1-2 week max but 80% of the time clients needs the project in a 2-day timeframe and thats where a framework or a heavily-customized Themeforest theme are my only choice.

    0
  49. 90

    For me, it’s all about the vertical rhythm. Most of the frameworks have ironed this out, whereas it’s a pain to get it right from scratch every project.

    0
  50. 91

    I’m curious to know what your thoughts/opinions are regarding Bourbon Neat. It’s a SASS Responsive Grid Framework that doesn’t add extra markup, doesn’t require to use un-semantic class names and simply adds the appropriate styling to the elements to fit the grid layout you desire.

    I also contains breakpoint mixins/functions to help with responsiveness and seems to work pretty well for my project so far.

    Because it’s a set of mixins/functions/etc. it doesn’t bloat your CSS.

    Thoughts anyone?

    0
  51. 92

    I completely agree with this article, frameworks are excellent tools, they save time and work wonders when used properly, I generally only use the Bootstrap grid system, customizing the media queries to my needs, however when a project calls for a custom grid I have no problem coding it up.

    The important thing is to analize your project’s needs and find an appropriate solution, more often than not part of a framework will cover part of your need

    0
  52. 93

    Awesome,
    Front-end developer though, I strongly encourage you to create your own framework for at least a couple projects.

    0
  53. 94

    Jen,
    A great article and you nicely consolidate the debate between frameworks and custom build for big projects.

    As most of the comments illustrate there are a huge number of frameworks and skeletons out there and as experienced developers it is up to us to decide what is appropriate for each project.

    As a PHP developer, I will often use bootstrap, as you already outlined, because it delivers functionality to a business very quickly. More often than not, intranet based systems do not have the styling requirements of a frontend website. Furthermore, bootstrap wrappers are available for PHP frameworks that mean that I can implement a database driven drop down, it’s label and wrapping DIV with one line of code – including responsive spans.

    When developing a frontend website, or CMS template, like WordPress I would perhaps chose something more adaptive like skelJS which is very light and concentrates on the grid with breakpoints rather than styling.

    So what is right for one project may well not apply to another – there really isn’t a right or wrong answer.

    0
  54. 97

    Do you know @import (reference) in Less? Bootstrap is Awesome!!! Do you know Less Hat?

    0
    • 98

      Is it easier to find bootstrap or foundation developer help?

      0
      • 99

        I think you’ll find help for Bootstrap to be more available — but that’s because it has significantly more users than Foundation. Also, the level of developer using Bootstrap tends to be lower than Foundation, so you may find more basic tutorials pertaining to Bootstrap.

        0
  55. 100

    Why would a professional designer use a responsive design framework?

    So that less experienced designers can easily make changes.

    0
  56. 102

    Roll your own and steal from existing stuff. Be it Bootstrap, be it foundation, Harry Robertson’s inuitcss, Andrew Clarke’s Rockhammer or the HTML5 Boilerplate or just a cool site you like..
    It’s HTML, it’s open-source, it’s great, and it’s great to see all the code you need, so ..
    why on earth limit yourself to one framework and stay within it’s confinements ?

    0
  57. 103

    For my experience from my fellow web designers and front-end developers, person who does not have enough knowledge on HTML and CSS tend to go with Bootstrap. On the other hand, person who knows how to use HTML and CSS good enough they tend to build their own framework.

    In my opinion, Bootstrap is great Framework that offers many functions and pre-defined class that you can just use without worrying about CSS or JS at all. However, it’s not always good choice to use it. For instance, if you just want full responsive grid system you don’t really need a Bootstrap’s 5700 + lines of code to do that because it can be done in under 50 lines of CSS code.

    I will probably use Bootstrap if I’m gonna be using at least 50% of functions or pre-defined CSS from Bootstrap on my website. Maybe it all comes down to personal preference at the end.

    One thing I’m sure tho, if I want to hire a Front-end developer, I will make sure he/she knows how to build a site without Bootstrap or Foundation.

    0
    • 104

      You’re right, hopefully you don’t need 5700+ lines of CSS to code a grid. But Bootstrap’s 5700+ lines of code aren’t responsible for just a grid. If you want just the grid CSS, you can download just that. Look into the custom downloading features so you can get exactly what you need, not necessarily the entire framework.

      0
  58. 105

    I have seen a web designer said ” I don’t understand why people design a site, you can just pay $50 at Themeforest and it’s done. It’s much faster and cost efficient.”

    0
  59. 107

    Like many of the other designers/devs who have commented, I too use my own mini framework/set up and these are the reasons why.

    1. personally I think frameworks make you lazy. I for a while used the foundation and BS frameworks and when I needed to create a custom build for a client, I was trying to remember basic code, because I got use to tweaking code instead of thinking about what I needed to do and code it out.

    2. finding bugs and fixing issues. As designers/devs is part of our Job to find and fix. It keeps us on our toes and constantly learning and evolving. If everything is done for us we end up at point 1.

    3. Using frameworks as a learning and inspiration tool. Just like looking at other designers work, using frameworks should be the same, look at how it’s done and build your own. That way you can add and take out what you need and don’t need, and keep the framework to a bare minimum.

    4. If all else fails, go with the framework. As the web evolves at a rapid pace, those that live in the world of frameworks will get left behind, just like those who didn’t want to take the plunge into sass and less. I know so many designers that didn’t get jobs, because they didn’t know any pre-pro’s. Companies want people who push the envelope and not stay static. Frameworks like all the other things past and gone is a trend until something better comes along.

    At the end of the day it’s up to each individual how they work, but me personally I love the challenge and the need to keep evolving and learning from mistakes and issues and being out of my comfort zone. That’s what makes a better designer. Do think Richard branson asked other airline companies to use their planes, so he could run an airline business? nooo. he got he’s own.

    2
  60. 108

    One of the problems I find with frameworks is that you are having to adhere to set out classes, then apply them to each of the elements, and this is similar to inline styling. Then if you want something changes, you must alter the markup when you really should be changing the CSS.

    For this, I created my own mixin system with SASS. I can name the class or ID, or target child elements and apply a mixin to tell it what to do. From there, all my classes are written out inside the media queries (mobile first of course) and concatenated just by using one mixin.

    0
  61. 109

    Personally, i’m a big fan of foundation. Still using F4 though because of better IE8 support (with an additional css file).

    Maybe one of the main reasons that webcompany’s should adopt a framework – and a reason that has not been stated here yet – is the advantage of being able to work togethter better. If your in a company with multiple developers, using the same framework on your projects makes it dead easy to take over work when one developer is not available (or quit, or fired, or ill or whatever). If all developers use their own way of working, their own class names, their own coding habits… it’s just hard. I guess it’s one of the main reasons that Zurb created Foundation in the first place i guess. …. Hire someone new? Teach ‘m foundation and they can work on all projects without investing a lot of time figuring out other people’s code.

    I do agree that you should take the time to remove unnessesary css or js files, but wiht foundation, that’s no problem.

    Why should you write basic css (the grid) every time from scratch? Starting to use foundation with sass was the best thing we did down here. It gives us more time to focus on the custom design for our clients and makes collaborating on projects so much easier.

    0
  62. 110

    Christian Benseler

    March 12, 2014 10:11 am

    Tottally agree!

    By the way, when you said “Take careful notes of what you have and have not downloaded, so that you can repeat the process when updating your files” you don’t have to cate the notes (at least in bootstrap): the custom build generates a .json file (don’t remember the full name) with your settings.

    []s!

    0
  63. 111

    The fact that Frameworks slows down the website is less and less accurate especially with the possibility to load the CDN files with Bootstrap and Foundation. Those Frameworks come with a load of useless code and as mentionned, Pure can be a better alternative sometimes.

    Does anybody has a take for Font Awesome ? I’ve found myself save a load of time not having to find/resize/upload all kind of icons.

    0
  64. 112

    Frontend development has moved towards frameworks due to the complexity of features required to deliver modern websites/apps.

    When used right, the overhead of such frameworks is negligible and allows boutique studios to deliver complex and efficient solutions fast, which means you’re business stays competitive given the landscape.

    In response to some of the comments about building your own grid, although it’s possible to produce a simple grid framework for yourself, the Twitter Bootstrap 3 grid framework is quite complex, lightweight and highly customisable through proper use of Less variables.

    Once we master these grid frameworks, they really can bring a lot of value to a design and development business.

    1
  65. 113

    Advising against a framework is the dumbest thing I’ve read on here. You lose points, Smashing Magazine. There’s no need to “show off” what you can do these days, and spend hundreds of hours writing sub-par responsive styles that will only be worked on and tested by you and your few other developers, when you can base your work off of a “Foundation” that has been tested and developed by hundreds, if not thousands, of devs, and can be built out in a fraction of the time. I’m sorry, but I have no desire to act like a “real programmer” by reinventing the wheel.

    -2
    • 114

      @Nathan You might want to read the entire article because I think you missed the message. Responsive frameworks have their place and can be used effectively based on the situation. Additionally, it is not about using a framework or building your own, but rather looking at it from a hybrid approach. Use what you want and create what you need to build better custom designs.

      @ Jen Great article and stellar discussion. Cheers!

      0
  66. 115

    really helpful. thanks a lot.
    If someone needs to know about RWD, i found this really good and brief writing
    starscontest.com/blog/responsive-web-design-what-and-why/

    0
  67. 116

    Another fully featured frontend framework out there is my offering: Responsive.

    The advantages over the ones referenced in the article?

    Responsive has been built from the ground up to be accessible. All the javascript widgets provide support for mouse, touch, keyboard, and screen readers whilst requiring only the simplest markup to set them up.

    It’s also been coded specifically to avoid opinionated design elements yet be feature rich; there’s no point adding multiple colours and classes to simply have them overwritten. It’s got multiple grid layouts, normalized forms, images, video and much more – all with native right-to-left language support built in.

    Check it out here. http://responsivebp.com/

    0
  68. 117

    We use frameworks quite often in our daily work (mostly Twitter Bootstrap or Foundation). One of the drawbacks is that most websites based on frameworks look the same – you can easily notice a lot of sites with uncustomized Bootstrap. Thankfully both Bootstrap and Foundation use preprocessors. That means you can easily customize it by either using online customizers and downloading customized CSS code or getting dirty with the code yourself. We’re summed up a few tips we use while putting our hands on framweorks, take a peek at: https://netguru.co/blog/posts/kick-off-ui-development-with-these-simple-steps

    0
  69. 118

    Prototyping a design using a framework just makes sense.

    Get the sign-off from the client first before carrying a project too far down the path. Letting them see the basic appearance / where frames from, say, Foundation, is a boon to rapid development (especially when a client may be using a proprietary CSS where an HTML file may be easier to read).

    The fact many of them use SASS/LESS saved me time on a project before their Web developers adapted it to a framework, so I could focus on the dozen other services I provide in a small consulting shop.

    Many front-end frameworks are packaged modularly, meaning you can strip the bloat or just use their responsive/Nav solutions and forget the rest.

    0
  70. 119

    Jen

    Thanks for this article. I have watched a couple of your linda videos on Bootstrap as well. My question for you is this, as a professional ui developer who is well versed in HTML and CSS, wouldn’t it be easier for me to spin out my own grid and CSS structure conducive to the project at hand? If my project is not client based but a single company project, and I am well tested in the areas of browser support and device intricacies, should I bring in a bloated 8000 line CSS file before I even put my own touches to it?

    My fellow ‘backend’ developers say it would make things easier for them but I usually write all the HTML before they even touch it. They want a familiar list of class names that will make a button do what our Designer wants it to do but there is nothing prebuilt into Bootstrap or Foundation that will give them that comfort.

    So, it all comes back to my desk anyway and I have to make it dance the way the designer wants it to dance by writing specific CSS for its irregularities. I’ve built many grids and used grid builders for quit builds but if I want to make my life easier why would I want to manage a big code based from a framework of which 80% I may never use? And that includes their bloated grid system.

    Thanks for the consideration ahead of time.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top