Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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

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 Link

One morning, I was listening to Eli White’s keynote presentation at the Northeast PHP Conference6. 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 customization7 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.8
The website for Greek restaurant Grk9 was built with Bootstrap.

Positives And Negatives Of Responsive Design Frameworks Link

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 Link

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 Bootstrap10 and Foundation11 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 Link

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. Bootstrap1512 and Foundation 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.13
CMS Critic14, a website that reviews content management systems, was built with Foundation.

Customizing Code Link

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.

Bootstrap1512 and Foundation 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 Link

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 Joomla16. 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.17
Webflow18, a drag-and-drop website builder, was built with Bootstrap.

Conclusion Link

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 Foundation19.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


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 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.

  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…

    • 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.

    • 3

      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.

      • 4

        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.

    • 5

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

      • 6

        I tell a lie. It’s only the breakpoint for the top bar.

        • 7

          Actually Tom, in F5 you can change any of the breakpoints through the “Media Query Ranges” in _settings.scss

    • 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” –
      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!

  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 and here

    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


  3. 10

    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.

  4. 11

    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!

    • 12


      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!

    • 13

      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.

    • 14

      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 !

  5. 15

    Pavel Antolík

    February 19, 2014 3:36 am

    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 :)

  6. 17

    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.

    • 18

      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.

  7. 19

    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.

  8. 20

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

    • 21

      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.

  9. 22

    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 :)

    • 23

      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.

    • 24

      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.

      • 25

        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).

  10. 26

    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 which is simple to use, easy to customize and extend.

  11. 27

    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? 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.

    • 28

      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.

      • 29


        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 :)

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

  12. 30

    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.

    • 31

      You should try 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.

    • 32

      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.

  13. 33

    Daniel Martínez

    February 19, 2014 6:06 am

    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!

    • 34

      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.

    • 35

      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. :)

  14. 36

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

    • 37

      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.

  15. 38

    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.

    • 39

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

    • 40

      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. :)

    • 41

      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.

    • 42


      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.


      • 43


        I’d love to see this site with ‘over 100,000,000 unique visitors’.

        Tim’s main point (and probably why he received the downvotes) is that LESS/SASS is redundant and/or dumb. It’s obviously not. Any front-end developer worth their salt understands this, utilizes the OO aspect and many other productive results you get from LESS/SASS.

        Using SMACCS with LESS/SASS is far more organized and powerful than CSS by itself.

        Whether you go with Bootstrap, Foundation, Susy, Jeet, Bourbon yada yada is a different story. If you’re concerned with bloat, remove what you don’t need via the mixins and crunch it down further with tools like UnCSS from Addy.

  16. 44

    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.

  17. 45

    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.

  18. 46

    I use Foundation & 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.

    • 47

      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.

  19. 48

    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.

    • 49

      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.

      • 50

        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!

        • 51

          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.

          • 52

            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.

            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 and you’ll immediately see the difference.

  20. 53

    Matt Stellwagen

    February 19, 2014 5:05 am

    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.


↑ Back to top