12

Your opinion designing using frameworks like Bootstrap.

almost 9 years ago from , Interface Prototyper / Designer

I'm on contract with a firm and I did some comps. Everything is fine but they insist that we use the Bootstrap PSD and web elements. To me this just seems like skinning and laying out. Yes i still have say over the transitions and interactions, but I'm used to creating elements or at least supplementing the frameworks. The devs have a system and that's fine, it's just different for me. We have time and it's not a rush either.

So I was wondering how other within the field field about this. Perhaps this is the norm and I've just worked at places that don't do it this way,.

17 comments

  • Sam Pierce LollaSam Pierce Lolla, almost 9 years ago

    I can't speak for agency designers, but I'm currently removing BS from our product's front end.

    Our developers don't need help building tabs and drop downs, and our designers don't need help making buttons and setting type. We've essentially reimplemented most BS features over the past year anyway, and more often than not it just gets in the way these days.

    Now we're building a style guide with clearly documented, reusable components that are suited to our specific design needs. Hopefully our designers and devs can have consistency without overhead or generic-looking UI.

    10 points
  • Parm GrewalParm Grewal, almost 9 years ago (edited almost 9 years ago )

    I started using my own starter boilerplate comprising of SCSS with just essential mixins, extends and a grid system. This actually boosted my productivity and at the same time i now have way less code bloat.

    7 points
    • Max ShelleyMax Shelley, almost 9 years ago

      I've done exactly the same thing. I've used Bootstrap and Foundation for client work, and they do help teams iterate quickly due to a shared, well-documented way of doing things.

      However once a project reaches a certain point I, and a few other people I know, have found ourselves overriding or stripping out parts of the framework.

      I now have a 'home-grown' UI boilerplate/framework/toolkit (whatever you want to call it) and share it across three related projects. Not ideal for a freelancer coming in, but as long as my naming and methodology is consistent I'm hoping it'll grow in a fairly logical way.

      3 points
  • Bruno DanielBruno Daniel, almost 9 years ago

    Your client probably wants to keep the maintainability of the project as simple as possible, so that their devs can quickly iterate over their current system using the visual identity that you're designing for them after your contract ended.

    5 points
  • Matt JohnstonMatt Johnston, almost 9 years ago

    I'm really surprised at the responses I'm seeing in here. The gist of most responses is, "I tried it, didn't like it, and so I wrote it all myself." This is a very nearsighted response, and I'd like to take a second to explain the value of and demystify some of the myths about using an established framework like Bootstrap or Foundation.

    Bloat

    If you do it right, using a framework shouldn't result in css bloat. You should always turn off components you're not actually using. Foundation even gives you a SASS variable to turn off all CSS output, or you can do it individually ($include-html-classes: false;).

    You should also use the LESS or SASS variable hooks to customize styling before resorting to adding new styles on top of the framework. By styling over the framework you're adding extra selectors and styles that double-up on the styles already there.

    Customization

    Unless you are making a down-and-dirty MVP of a product, you should always customize the theme of your framework. If done right, frameworks shouldn't come packed with a theme built in, but only provide the styles necessary to layout components correctly and visually imply the correct interaction. Beyond that, the theming should all be done by you - custom. We used Foundation for Boatbound and you would never know it because almost every component has been themed to fit our style guide.

    "I'll Just Make My Own"

    This is the worst response of all. Let's play this out. If you make your own, you'll be an expert at it. Hooray! Instead of spending a couple hours reading through the docs and source code of an existing framework, you've spent 10x that on making your own. And now when you bring new people into your project, instead of pointing them to the well-documented framework's website, you will take them through your own source and try to teach them yourself. Then, if you actually do a good job at creating your own personal framework, the code's going to look a lot like the frameworks that exist already. If it looks really different than pre-existing frameworks, you've probably written bad CSS that can't easily be reused in multiple situations.

    Final Thoughts

    Frameworks provide a boilerplate for standard web design patterns that can and should be easily styled and extended. It encourages front-end developers to write modular, scalable css, and it encourages designers to think about designing modular, scalable components as opposed to designing individual pages that can't be reused across a growing app. If you're going to write your own, at least pick a good organizational pattern like OOCSS

    3 points
  • Dwayne CharringtonDwayne Charrington, almost 9 years ago

    The way I see frameworks like Bootstrap is that they are good for prototyping, but in my opinion, they're not good for final projects. Sure, some companies have great success using them for actual final projects, but I think Bootstrap in particular limits you greatly with what you can do.

    As you put it, you are effectively skinning pre-existing elements. The best approach in my opinion is to build a living styleguide and use that instead. Boostrap comes with a lot of bloat and unneeded complexity which a simple collection of SCSS can replace.

    I think Bootstrap is fine for non-customer facing parts of an app or site like an admin panel because forms and other custom components are time consuming. However, I think it's best to design something yourself that you are familiar with and meets your needs.

    PS. I can mostly always tell when a site is built with Bootstrap, it has that look about it which in turn, makes your site look like everyone else's.

    1 point
  • Sam MularczykSam Mularczyk, almost 9 years ago

    I really dislike using Bootstrap/other frameworks. The code just feels messy next to stuff I write by hand.

    I can definitely see its value in a team environment, but personally I try to avoid it as much as possible.

    1 point
  • Carlos BruscoliCarlos Bruscoli, almost 9 years ago

    i always use bootstrap, but mainly for grids / forms, the rest i build on top as other people say here.

    1 point
  • Diego LafuenteDiego Lafuente, almost 9 years ago

    My opinion is: it saves me a lot of time and code to write from 0.

    1 point
  • Cihad TurhanCihad Turhan, almost 9 years ago

    I like its grid system and naming convention (pull-right, text-center, danger, success...) so I borrow them and build my project on the top of them.

    1 point
  • Bud ParrBud Parr, almost 9 years ago (edited almost 9 years ago )

    Pros - Widely tested across a broad set of users.

    • Well documented so easy for future developers to pick up (more important for turning over to client than in-house work).

    • Easy and fast.

    • Easy to just take what you want and not include the rest.

    • Not difficult to modify

    Cons

    • Large footprint, even if only using basic elements (I use to use just typography and grid and just those two were quite large).

    • Promotes designer complacency.

    I stopped using for the large footprint, but think it's a well-thought out framework and wouldn't hesitate to use it as long as I was allowed to override or not use elements where I thought appropriate.

    0 points
  • Ray BriglebRay Brigleb, almost 9 years ago

    I prefer Foundation to Bootstrap because it has less visual "opinion" which is good.

    I wrote a long-ish piece about our methods here: http://needmoredesigns.com/blog/prototype-website-foundation/

    0 points
  • Hamish TaplinHamish Taplin, almost 9 years ago

    Bootstrap is the absence of design.

    0 points
  • Darth BaneDarth Bane, almost 9 years ago

    I think Bootstrap is absolutely fine, I sometimes use it for non-customer-facing pages (admin areas, etc) where a design voice is irrelevant. Using it for customer-facing pages...why not? It's just a tool, and if the client is more comfortable using it, then so be it.

    I guess the question here is why the client wants Bootstrap. Do they like the neutral look of it? Do they want to future-proof the design? Have they lost faith in your abilities? You say there's no rush, but is the client worried about timeframe?

    0 points
  • Patrick SmithPatrick Smith, almost 9 years ago

    Personally I feel this is too limiting, like the devs have a comfort zone. That’s just my point of view having worked as a front-end dev. I used bootstrap in a recent group project, and some parts of it like the dropdown were inflexible and really slow.

    They may be quite a talented bunch, but to me relying too much on premade components feels a bit like putting training wheels back on your bike as an adult.

    From a designer point of view I would say it may age the site sooner, in 2 years it might look quite dated. Constraints are good, but is this too much of a constraint?

    However, I guess it comes down to what the client wants. You may not be able to personally talk to them on this project, but I'd want to know their view – do they wants something where the design is pushed and more unique, or do they want something that follows a template so the code (and possibly UX) is known to be rock solid?

    0 points
  • Elliott ReganElliott Regan, almost 9 years ago

    I prefer Foundation over Bootstrap because it seems easier to style, and it isn't as recognizable.

    You could suggest redesigning the UI elements, and putting the new styles in their own sheet. That way, the developers don't need to learn anything new, but it won't look like a Bootstrap site. If alterations need to be made in the future, you (or anyone else) knows where to look.

    0 points