Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

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?
share|improve this question
1  
+1 nice question i have been curious about this myself but have no where near the amount of experience as you do. so i was approaching it as someone starting off wanting to know the advantages to a newbie. when you reference Dreamweaver are you talking about the coding or WYSIWYG method of using it? i use Dreamweaver, but only the code editor and nothing automated if i can help it. –  brnnnrsmssn Mar 4 '13 at 16:47
    
I was referring to mostly those that use the Design view of DW. Code is code and it doesn't matter if that's what you use. Although, despite marketing, DW still rewrites code in my experience. –  Scott Mar 4 '13 at 21:27
1  
The ONE and ONLY killer feature that Dreamweaver has is the ability to select an arbitrary number of local files at random, arbitrary tree depth and upload them to a remote site. I have looked long and often for an FTP program with a similar treeview w/files and directories integrated which does this. –  horatio May 15 '13 at 16:39
1  
@horatio Transmit on the Mac. Can't say about Windows. –  Scott May 15 '13 at 20:00
    
@horatio Filezilla is what I'd recommend for FTP. Tree views and simple drag and drop files to and from the server. –  John Jun 21 '13 at 20:54
show 3 more comments

10 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
A few months on - I've actually built my own 'framework' (really it is just a css file with common layout attributes) I started out with Base (link above), but then added a lot of customization. Good thing about Base is that it was very simple to figure out and refer to as a solid start. –  John Jun 21 '13 at 19:43
add comment

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.

share|improve this answer
add comment

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 normalized 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 set of 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 customized 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 customize 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 Boostrap 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.

share|improve this answer
    
Excellent answer. Thanks. –  Scott Mar 4 '13 at 22:29
add comment

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.

share|improve this answer
1  
Good point on rolling your own. Similarly, I know about less or sass, but would rather handle variables in CSS via php. So.. so I don't want to jump to Ruby for anything. Don't want to encroach on the "development" side too much, just want to make my life easier :) –  Scott Mar 4 '13 at 21:46
    
@Scott - Gotcha. I only mentioned Ruby because I first tried Bootstrap in a Rails environment, and I liked that you could change the master variables on the fly without having to reassemble a new version. –  Brendan Mar 4 '13 at 22:10
2  
@Scott Might be a case of "if all you have is a hammer, everything looks like a nail" — certainly you can use php to handle CSS variables, but then you're taking an unnecessary performance hit. You can precompile the variables with LESS or SASS. I find LESS easier to read than PHP peppered throughout. :) –  ghoppe Mar 4 '13 at 22:31
    
@ghoppe Understood :) But a list of variables at the top of a PHP page for colors, then simply using those variables in CSS selectors makes life way easier than LESS or SASS in my experience. And yes, I realize php presents performance for larger structures but I can spit out a standard .css file to use if needed (sort of my own LESS architecture). I find LESS a bit more difficult to read being a new markup essentially. HTML/CSS/PHP is very familiar here. –  Scott Mar 4 '13 at 22:35
    
@Scott I totally get you with learning new markup. That's why I like SASS. It's essentially just an extension of CSS, you don't have to learn a new syntax, just new features you need (like variables or mixins.) Super easy. –  ghoppe Mar 4 '13 at 22:54
add comment

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.

share|improve this answer
1  
That's part of what I was thinking. And why I decided to take a stab with Bootstrap. The responsiveness of the system could be beneficial. But it seems almost outweighed by the learning curve of the structure. Brenden does present a good point in his answer with respect to "rolling your own" structure. –  Scott Mar 4 '13 at 21:45
add comment

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.

share|improve this answer
    
See my answer. :) –  DA01 May 15 '13 at 18:20
    
.. and that's why I asked. I don't work in a large development environment. I suspect my opinions would be different if I did. –  Scott May 15 '13 at 20:05
add comment

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

share|improve this answer
    
Thank you. I'm finding Skeleton very nice and usable compared to a few others. Just enough to help responsiveness without actually designing anything for you. –  Scott May 21 '13 at 18:27
add comment

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.

share|improve this answer
    
Sorry,I see this answer as essentially stating "Bootstrap designs for me rather than my designing a web site." As a designer, that's exactly where I feel Bootstrap fails. If your'e relying on Bootstrap to style everything, you are relying on Bootstrap to design for you. Essentially you are doing page layout, not design. –  Scott Mar 5 '13 at 10:47
    
@Scott: That is correct, I'm not a graphic designer; I care about a website that works and being able to build it quickly, and less about that it being painted the exact color that I wanted it to have. –  Lie Ryan Mar 5 '13 at 10:54
    
Fair enough. (but given this site's name....) I'm not asking about development. I'm asking about design. I understand using Bootstrap as your "designer" However, if you are a designer, Bootstrap merely offers structure. I'm finding it difficult to see value in a prepackaged structure I'll simply rewrite to better the canned appearance. It's really easy enough to create your own .btn class and style it. There's little value in the CSS appearance of items as a designer. –  Scott Mar 5 '13 at 10:57
    
You act as if you could write Bootstrap in an hour. :) –  deizel Mar 5 '13 at 11:02
    
No, not at all. But I'd rather spend more time on a custom appearance than use some canned package where every site ends up looking the same. I don't expect all developers to "get" that. And for the record, Bootstrap isn't that involved or complex. It's merely custom which requires learning Twitters naming conventions. –  Scott Mar 5 '13 at 11:04
show 5 more comments

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.

share|improve this answer
3  
WordPress is beneficial to those that don't know PHP, want a plug in architecture to the PHP, or want the user/security system. I see far more benefit in CMS systems on the whole than I do for CSS templates. Using Wordpress isn't about front-end, it's about back-end. –  Scott Mar 4 '13 at 21:17
add comment

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.

share|improve this answer
add comment

protected by Gramps Dec 12 '13 at 14:47

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.