Do web frameworks such as Bootstrap or HTML5 boilerplate offer anything to a designer (not developer)?

Question

Note, this is about design much more than development.

I build sites from scratch with completely hand written CSS and HTML.

I've known about pre-build css templates such as Bootstrap or HTML5 Boilerplate for some time. I've looked at them a briefly in the past but never jumped into actually using them for anything. I don't have any issues resetting CSS, or including javascript when needed, or configuring for viewports.

This evening, I coded a basic HTML5/CSS page. Nothing really earth-shattering in terms of layout. Simply a jumping off point. Afterwards I decided to give Bootstrap a whirl with the same layout. It's a pretty standard 960px, 3 column with hero image page.

As I'm altering Bootstrap it occurred to me that 80% or more of my time was being spent learning what class or id was applied to something, then finding that in the CSS to adjust. It became clear that Bootstrap was not going to save me any time at all. In fact, Bootstrap would greatly increase production times due to the *overly templated CSS.

*(by "overly templated" I mean there's a great deal of CSS I probably wouldn't use for any given web site. Not that there is unnecessary CSS on the whole.)

I understand that if I were familiar with Bootstrap I would be familiar with class/id names and general location in the stylesheets. So, I'm willing to bend a bit on the time it was taking me, realizing that some of it was due to my own unfamiliarity.

However, I can't help but wonder if Bootstrap et. al. are merely crutches which are crippling designers by spoon feeding them their own brand of code. Thus locking in a consumer base which will rely entirely on a third party solution and it's functionality for everything, or at least the majority. It reminds me of those that can only design a web site if they can use Dreamweaver. And heaven forbid if they don't have access to Dreamweaver and a change is needed.

When I build a site I use my own set of standard class and ID names. I structure CSS how it's intuitive for me. I have my own set of pre-build templates for quick set up. Therefore any site I build I can edit fairly quickly. Using any of the pre-configured front-end packages simply means I need to learn their naming conventions and their structure rather than relying on my own.

• Can anyone extoll upon me the great virtues of such templating systems as Bootstrap or HTML5 Boilerplate?
• What makes them valuable to you?
• Are you merely familiar with the system you use so you can navigate it easily or do you still have to hunt for items?
• Could you build a site without them if you had to?

Answer 1

The advantages tend to be primarily:

• Rapid Prototyping (ie, speed)
• Built-in Cross browser consistency

If you need to create a grid, and the grid you need to create fits the pre-built CSS framework, then the logic is that you're halfway there by using the framework.

All that said, I tend to agree with you. CSS frameworks, IMHO, are like visual design templates in that if they meet 90% of your objective, they're great, but if they don't, then you're spending way more time and effort modifying the default vs. just building your own froms scratch.

ADDENDUM:

I should add one more potential benefit:

• it's a documented system

In an enterprise environment, where you may have several front end developers, and the project may span several years with several different teams of front end developers, having a documented underlying presentation layer framework can help.

That's not to say your own home-built framework can't be documented, it's just that documentation is often not a priority.

Answer 2

I'm familiar with HTML5 Boilerplate, but I'm more familiar with Bootstrap, so I'll talk about that. Remember that both are geared towards two different tasks, (H5BP is a responsive normalised template, Bootstrap is a collection of HTML/CSS/JS widgets and a responsive grid.) In fact they can be used together.

However, I can't help but wonder if Bootstrap et. al. are merely crutches which are crippling designers by spoon feeding them their own brand of code. Thus locking in a consumer base which will rely entirely on a third party solution and it's functionality for everything, or at least the majority. It reminds me of those that can only design a web site if they can use Dreamweaver. And heaven forbid if they don't have access to Dreamweaver and a change is needed.

Analogy fails here because you have full access to Bootstrap source. If you don't like how something works, you can change it. To me it's the opposite of a crutch — you can use the source code to learn css techniques.

I don't agree that "designing a website" needs to be that close to the metal any more than I believe C coders need to have intimate knowledge of assembly language. Although even that analogy falls flat because adjusting HTML/CSS is simply a matter of extending selectors and adding what you need.

Can anyone extoll upon me the great virtues of such templating systems as Bootstrap or HTML5 Boilerplate?

The killer feature of Bootstrap, for me, is the consistent and easy to apply widget styling and Javascript components. Want a link to look like a button? Add a '.btn' class. Want a table? Add a '.table' class. Want a navigation element? Set up an unordered list and add navigation classes.

Dropdowns, popovers, alerts, etc. are easily added to elements with data- attributes. Bootstrap includes a very nice looking set of icons that can be easily integrated into widgets.

What makes them valuable to you?

• Can quickly prototype sites
• All the debugging of cross-browser and cross-platform css has been done for me.
• Easily customised CSS with a wide selection of variables so I can experiment and prototype layouts quickly.
• Standard navigation widgets
• Source code open and free, I can get my hands dirty and customise the LESS if I need a new mixin or change behaviour the way I need.

Are you merely familiar with the system you use so you can navigate it easily or do you still have to hunt for items?

One of the biggest features of Bootstrap is its excellent documentation. I can navigate it easily and css selectors are intuitive and easy to remember.

Could you build a site without them if you had to?

Yes, but it's clearly more work. I can focus on UX and rapidly prototype layouts with finished good looking widgets and consistent functionality.

Answer 3

The nice thing about templating systems and frameworks is that they can save you a lot of time iff you work the way they want you to. So, with Bootstrap, once you learn their semantics for doing a JS carousel, it's almost criminally simple to implement. Also, Bootstrap seems to get a lot simpler if you either roll your own before you get started or use something like bootstrap-sass in Rails to change those variables on the fly; it'll save you from changing everything around later.

DA01 talks about browser consistency...that's a big factor for me. That's why I use jQuery even though any number of folks over at SO will remind you that adding a large library just to do a few things is a waste of resources. I know that when I use jQuery, it'll work across a certain set of browsers, and so even though I can probably achieve a more lightweight solution on my own, I've found it more beneficial to learn how jQuery wants me to write JavaScript and then do it their way.

In the end, I tend to find HTML/CSS frameworks restrictive; I'm enough of a control freak that I still like to code by hand when I can. But, I respect the fact that people smarter and more advanced than me spent a lot of time to set these templates/frameworks up.

Answer 4

I've been researching frameworks a lot the last month or so. I haven't actually dived into any of the solutions, but a couple of framework alternatives that are on my shortlist are Foundation, Intuit and YAML and Base.

The good thing about these is that they don't have the 'Bootstrap' look, and seem to encourage designers to to their job (design), whilst they take care of the responsiveness.

Here is a big list of frameworks and more info in this article.

As mentioned, I've done the research legwork, but haven't started testing them out, so any comments advocating any of the frameworks would be helpful.

Answer 5

Out of interest, do any of you work in a large team for a large company?

Frameworks such as bootstrap are fantastic for creating a consistent standard of code throughout a project, it also means that when recruiting for new developers, those with experience of a popular framework will already be familiar with the syntax and can become productive much quicker... great news for big companies.

Also.. with frameworks such as bootstrap, they are constantly keeping it updated by supporting more screen sizes, more devices and better features, to a company such as ours (where we use bootstrap) this comes down to money saved essentially.

Reading some of the answers so far, they seem to be very narrow minded, I am assuming that most of the answers are from people used to working alone or in very small teams and on smaller projects where this kind of thing typically is not an issue.

Answer 6

Adding to what has been said in the great previous answers, another advantage to these templates would be cross-device consistency. The built-in grids make it very easy to design for any OS.

I still prefer to write my own code, for the following reasons:

• Familiarity with what I've already written. If I need to change anything, I know exactly where it is;

• Project-centric structure. Each new site / app will have different needs from the previous, thus files and resources might need to be organised separately.

• Customized views for different devices.

Unless you are making a very restricted page, you will end up adding more and more styles to new elements, and overwriting existing ones.

Because I like to work with responsive designs, the main reason why I wouldn't use them is because I prefer to design each responsive step "separately" and as a whole. And these templates usually work with a more or less rigid grid that you can't fully tweak.

Answer 7

The biggest advantage is that you can experiment with the resizing yourself instead of just speculating what things would look like.

I have a very "content first" approach of development where I actually code the navigation and add the text content. It tends to expose you to things that you did not anticipate when you were in design phase.

By using a framework such as Twitter Bootstrap, you can actually test the pages while still in design and might even uncover usability issues and other User Experience challenges. The frameworks have plenty of reusable classes that you will get familiar with and will save you time.

You mentioned that you code a lot from scratch. When I have something that needs to be very custom or very light weight, I go with Skeleton

Answer 8

For years, I used to handcode everything, but nowadays I tend to use Bootstrap. Why do I do that?

1. I get a responsive layout with very little work. At some of the websites I was working on, it just need a couple minor tweaks to get a tablet- and mobile-optimized layout. The responsive navbar is one of my favorite bootstrap component.
2. Default controls is not consistent between browsers and OS, not to mention they are all invariably ugly whatever OS or browser you're using. With bootstrap, you get a decent, consistent look and feel little work. If you want to restyle all the controls anyway though, then yes, Bootstrap won't save you much time, but in my experience, most of the time you would not have enough time to restyle every controls but still feel irritated by the ugly default controls.
3. It puts a limit to what you want to do, which is a good thing, because when working in pure CSS you tend to want to tweak every little stuff (the color, the border thickness, the gradient, the shadow, border radius, the transitions, and the list goes on), while individually they take little time, on the whole it is a major time sink. When working on projects with deadline, you want to limit what you can and cannot do; using frameworks lets you think in coarser-grained components instead of what CSS properties to tweak.
4. Some server side frameworks have integration with bootstrap. For instance, when using django-bootstrap, you can just do {{ form|as_bootstrap }} to get forms styled bootstrap-style, including red-highlight on error messages, etc.

As I'm altering Bootstrap it occurred to me that 80% or more of my time was being spent learning what class or id was applied to something, then finding that in the CSS to adjust.

That's where you get it wrong. If you want to benefit from Bootstrap, you should not be customizing too much; you give up the flexibility of having to and being able to tweak everything when using pre-built components. You should not be spending time sawing or carving woodboards when decorating a room from IKEA components.

Bootstrap is good when you need to quickly patch up a working website from prebuilt components; their components does stick out like sore thumb if you put them in sites with fancy designs so I usually drop Bootstrap for those kind of projects.

Using any of the pre-configured front-end packages simply means I need to learn their naming conventions and their structure rather than relying on my own.

That's actually an advantage of using a popular package. It's easier to hand off a project to another developer when both of you know what "btn-group", "btn btn-large" does, with personal frameworks they would have to learn your peculiarities (or more common, they'd just cascade your css with their changes, and not bothering to try to decipher or modify your code).

Are you merely familiar with the system you use so you can navigate it easily or do you still have to hunt for items?

Common ones like btn, table, row*, span*, etc would be natural. But for the html for major components, it's much faster to just copy-paste from their examples rather than typing them out.

Could you build a site without them if you had to?

Been there, done that, many times.

Answer 9

they are only good for:

1. designers that are not familar with coding but want a solution to bring their designs to a site.
2. a way to stream line production for someone that doesnt want to build their own framework.

personally I have my own methods and have no desire to go this route because I already learned how to code CSS, HTML and jQuery. I do see a benefit in these for people that have no clue and are trying to learn how to code. It would have been nice to see something like this around five years ago. Also, as you have stated, it would take you longer to implement this in your current production methods.

EDIT: not trying to highjack your thread but I too am wondering the same thing but in regards to WordPress. I have lightly used WordPress but I don't know if a framework is beneficial. I have planned to go the old fashioned way until I can find a major benefit.

Answer 10

Bootstrap is good as a starting point for a responsive layout. But as far as design goes i think its pretty lacking. It does its one kinda 'bootstrappy' look, which because its a template is extremely over used..

But you have to bare in mind what bootstrap was made for, it was to bring consistency to in house apps built by twitter, and if you were to use it for that, or even if your a developer who wants to quickly spruce up there web app without much thought, perhaps as an mvp or prototype its a really great tool.