top | item 8448265

Why don't you use Bootstrap?

69 points| porker | 11 years ago |punkchip.com

69 comments

order
[+] bryanlarsen|11 years ago|reply
I use bootstrap because a common design language is a good thing. If your iOS app uses custom controls and deviates from the Apple design language, your design is rightly criticized.

Yet on the web, you are criticized for not being different.

I call B.S.

I don't have to teach my users what a hamburger menu is because they've seen it elsewhere.

My users think my sites look good because I let professional designers do the heavy lifting. Because my sites look like many other sites, they are comfortable, easy to use and not jarring.

The only people who care that you've used Bootstrap are other web developers. And it's probably not because everything looks the same, it's because you did it the easy way. You're supposed to walk up the hill backwards in the snow both ways like all the old-timers did.

Guess what, your clients want you to do it the easy way. The quicker you get the design done, the quicker you can move on to other things that add value to the site.

[+] SwellJoe|11 years ago|reply
The value of a common design language thing really can't be overestimated, I think. I'm working on a new wiki, a new UI for our products, and a new Drupal deployment for our forums/issues/shopping cart. Making all of these look consistent would have been unrealistic on our budget in the past...given that there are now Bootstrap themes for Drupal and MediaWiki (with varying degrees of completeness and quality), it becomes much more reasonable. We may still fail to provide perfect consistency, but it'll be a lot closer than was possible in the past.

Also, the "bloat" arguments that I keep seeing are kind of no-op arguments, used against languages, operating systems, applications, etc. when you don't have useful criticisms. "Bloat" means, "it has features I don't use". Which is true of most things that have been in development for a while. It also ignores the ability to roll a custom Bootstrap which is missing the stuff you don't need. Sure there are some inter-dependencies, but nothing too offensive.

I like that we now have a higher level abstraction for UI components. I hate it when desktop application designers throw together their own UI components and ignore the OS guidelines and API. That's not to say there isn't room for innovation and novel UI concepts. Just that if you're building a thing with buttons and tables and forms and crap like that, it probably doesn't need to look completely unlike anything else that has ever existed...and it's probably bad design if it does look completely unlike anything else that has ever existed.

[+] freehunter|11 years ago|reply
If Bootstrap means you won't do the "scrolling doesn't actually scroll but flips to the next frame in what is really just a video" then for the love of god please use Bootstrap.
[+] stronglikedan|11 years ago|reply
I use Bootstrap, because the majority of the apps that I build are for internal use within the company that I work for. The default look and feel is perfect for these utilitarian apps, and we don't have to worry about being inconsistent in our design by using it. It's just the right tool for my job.
[+] masklinn|11 years ago|reply
> If your iOS app uses custom controls and deviates from the Apple design language, your design is rightly criticized.

Not necessarily true, even ignoring games (which are a whole 'nother bucket of filth) deviating from Apple's guideline and creating your own aesthetics can work nicely.

It is a huge amount of design and implementation work, especially if you want to match the spit and polish of the built-in solutions, but because iOS applications are "full screen" it can in fact work better than on a desktop: there's no chrome with different aesthetics around.

Tapbots has been pretty successful at building up and using their own non-native aesthetics. They're completely insane though, their attention to detail is even higher than the platform's.

[+] emodendroket|11 years ago|reply
> While Twitter Bootstrap is fast and easy to implement, creativity is often compromised as a result. Innovative designs which defy conventions can be difficult to implement in Bootstrap’s structured environment while you have a tight time constraint.

"Innovative designs which defy conventions" are also UX nightmares. Remember the old Jakob Nielsen maxim about how your users spend the vast majority of their time on other Web sites before you get too clever.

[+] Lord_Zero|11 years ago|reply
This was my thought as soon as I saw the little image at the bottom with the designer and developer. I got a little sore because currently at work we have hired a new advertising agency and they like to bring screenshots of their complex designs that I the developer have to implement and maintain. Bootstrap makes it easy for me to have a properly formatted cross browser design. And liker you noted, my designs are set up to where users can hit my site and almost immediately know where to look for things. Login, search, contact us, ect.
[+] jaredstenquist|11 years ago|reply
I'm intrigued by this. The author states that they work primarily with "idea stage" e-commerce businesses. I can't think of a more perfect scenario for using bootstrap - building MVPs and validating the ideas. If I were him I would have my in-house developers master bootstrap, resulting in a higher output for the incubated non-technical teams.

Perhaps Bootstrap isn't a good fit for their team (there are many UI frameworks), but if you're developing each of your MVPs from scratch, I'd have to argue that your idea-to-business engine is running inefficiently.

Additionally, the out of box cross browser support that you get from Bootstrap will be a big help in ensuring conversion on an e-commerce site, without spending heavily in testing.

[+] tzaman|11 years ago|reply
Bootstrap and Foundation introduce something I'd like to call reverse development, which is, instead of adding functionality, you're removing large, unneeded portions of it (removing bloat). I completely agree, it's much better to set up own couple of base styles, helpers and mixins (you're not still using vanilla CSS in 2014, are you?) and then modify that significantly smaller codebase according to your needs.
[+] nailer|11 years ago|reply
> 'reverse development'

I'm going to use that term. As someone who's had to maintain Bootstrap/Pure.css sites with:

- styling done half in visual-based classes added to HTML

- massive amounts of unnecessary block element nesting

- hacks to work around browsers we don't support

I've spent a bunch of time in 'reverse development' before we could achieve whatever we needed.

Doing your own styling in 2014 is less work than using bootstrap. Use SASS for mixins and border-box and go for a modern, flat look. Results will look better than Bootstrap and you'll always be moving forward.

[+] Swizec|11 years ago|reply
> you're not still using vanilla CSS in 2014, are you?

Oh you'd be surprised ...

For example, I am currently working on a project that uses Bootstrap, but heavily customised, but with vanilla CSS. So instead of using less and changing values of variables, they used the vanilla CSS version of Bootstrap and then wrote a bunch of overwrites manually and then ... stuff.

I am not happy with my predecessors on this project.

[+] Keats|11 years ago|reply
I switched to that type of development as well, SASS + autoprefixer + some common mixin and it's enough to get started (unless it's an internal app in which case Foundation is usually enough)
[+] onion2k|11 years ago|reply
One thing that strikes me as odd is that there seems to be two camps in startup design;

1. Use Bootstrap and don't do much customisation, thus making something that looks a lot like a Bootstrap demo site.

2. Don't use Bootstrap because all Bootstrap sites look the same.

There's a third path - use Bootstrap, but only as a foundation. Customise it. Bootstrap can be used to underpin really good design work. You only need to spend 5 minutes on https://wrapbootstrap.com/ to see some things that really don't look 'bootstrappy' but still have all the advantages of a well tested, well understood toolkit.

[+] at-fates-hands|11 years ago|reply
>>There's a third path - use Bootstrap, but only as a foundation. Customise it.

I did this and gave up fairly quickly. The amount of time I was spending adding and removing code was brain numbing. I'd start with it as a prototype, completely stripped down. Soon my clients where asking for things Bootstrap couldn't handle, or didn't come "Stock" as they say. Now I have a foundation (Bootstrap) which needs heavy modification and soon, it's completely bloated.

I decided to just start with a robust set of media queries and then build my site from there. I can control the code, the UI/UX and pick and choose which plugins or design patterns I want to use. For me, this has been the best option. Does it take a little longer? Sure, but in the end, I control all the code and can pivot and modify the code a lot faster to suit my clients. It also saves time having to dig through oodles of documentation to try and find out if some functionality my client requested is supported by Bootstrap and how to implement it.

[+] chucknelson|11 years ago|reply
Agreed. This article is a good example of #2 when they reference the cartoon that shows the developer using default bootstrap style. Being lazy with Bootstrap does not make Bootstrap itself a bad thing.
[+] personZ|11 years ago|reply
It's also worth noting that sites only look "bootstrappy" to developers. Among the general public and user base, they just want a site that looks decent enough and functions well across devices, which is what bootstrap offers.

This is, however, very much a follow the leader industry, where the purportedly innovative designs are all follow the leader. Right now the trend is overwhelmingly for the overloaded scroll, the images that fade in on scroll in, the fixed back images, the hero board (a lot of these came into parlance via the NY Times Snow special feature which was quite innovative at the time. Similar to how AJAX gained broad awareness with Google suggests). These are absolutely cliche at this point, but it is held as the high point of design. In two years it will look positively beginner.

[+] yeldarb|11 years ago|reply
Just a heads up, looks like at certain screen sizes your content doesn't line up as intended.

Chrome 38 on OSX: http://i.imgur.com/hegUCFO.jpg

[+] mdda|11 years ago|reply
Excellent! The article manages to make two opposing arguments simultaneously (same problem can be seen in Firefox too).
[+] Fluketyfluke|11 years ago|reply
I use it but only because the backend team insists on it because it's all they know. I argued against using it, but they were very insistent. We were working on a huge site and the site had already been designed and I was the one who had to get Bootstrap to conform to the design. Guess what? That didn't go so well! Bootstrap is opinionated about a lot of stuff and ties together disparate things that shouldn't be tied together. I think if Bootstrap didn't make opinions about colors, fonts, border-radius, box-shadow and the like it would be more flexible. To that end it should just focus on display, positioning, and necessary tie-ins to the JavaScript. There is a way to make Bootstrap more useful if you are working with a design, though. Switch it's class names to placeholders (Sass version) and then extend as needed. This doesn't necessarily cut down on the bloat, but if you're working on a large site or application a larger CSS file is on the lower end of your worries.
[+] ceejayoz|11 years ago|reply
http://getbootstrap.com/customize/

Tweak colors, fonts, border-radius, box-shadow and the like to your heart's content.

Or, set these variables in a SASS file and include it before the main Bootstrap SASS. Bootstrap will happily use your variables instead of the defaults.

[+] kyriakos|11 years ago|reply
Bootstrap is good if you don't have a lot of time or budget to spend on design. It makes your site look ok with minimal effort but usually your result looks similar to someone else's. I don't consider that a problem.
[+] netcan|11 years ago|reply
I don't necessarily agree.

The more time and resources you spend and the better the people spending that time are, the better your result will be. Bootstrap, like a vanilla wordpress theme works even with very limited effort, but obviously it's not ideal and it looks like everything else.

If you've got a great designer spending 100 hours on a theme, the result will be much better. He might use bootstrap or something else or nothing. The more time and resources are spent, the less the defaults of the framework impact on the final result.

Comparing Bootstrap with 5 hours of work from someone who isn't great at design to non bootstrap with 50 hours of work from someone who is great at design isn't a useful comparison.

[+] thathonkey|11 years ago|reply
It's a framework. If you don't want to spend much time customizing it, your site will look like everyone else's who made the same choice. But it is very easy to customize and themes are becoming prevalent too.
[+] angrybits|11 years ago|reply
Why I do use it:

Because my time is important and I can't afford a designer yet.

[+] emodendroket|11 years ago|reply
Also, cut-rate UI work often looks much worse than Bootstrap.
[+] kingrolo|11 years ago|reply
One of the nice things about starting with Bootstrap for side projects is that it makes it very easy to plug in a theme from WrapBootstrap (or one of the other bootstrap theme sites) later, as the templates all use the Bootstrap CSS names and conventions.
[+] bdcravens|11 years ago|reply
I use a lot of Bootstrap themes, and while they save a lot of time, they tend to be very similar, and they all seem to be trying to one up each other with a bullet point list of salesmanship. The result is a folder bloated with plug-ins that gets increasingly painful to work with.
[+] protonfish|11 years ago|reply
I think the author hits some of the major generic reasons to not use any framework:

1. Steep learning curve

2. Technical debt from learning curve

3. Technical debt from code bloat

3. Increased difficulty implementing unique features

But there are others that are even more important. One is that frameworks are often used to avoid learning the underlying technology that is more powerful, universal, and portable. It is falsely believed that time can be saved learning a framework instead of core coding skills. I have not seen any evidence that this is true, but like all snake oil, people believe because they want it to be true.

[+] jfc|11 years ago|reply
I use bootstrap when clients request it, otherwise I prefer Foundation. Bootstrap is a good grid framework, but generally I have found that Foundation is more easily customizable (read: you don't have to "undo" as much when developing for custom designs).

Also, bootstrap has minor issues that bug me: parents of dropdown menu items aren't clickable, and there is no block-grid class which is an easy way to organize looping content (e.g., blocks of text, images) into a grid.

[+] adrianlmm|11 years ago|reply
> Why don't you use Bootstrap?

Controls are to big, looks like they are designed for touch screens by default, nothing wrong with that, is just not what I need.

[+] hellodevnull|11 years ago|reply
>Controls are too big >Designed for touch screens by default

It says "mobile first" in the tag line.. but this is a trend in front-end design in general. Today it's all controls, fonts and you have to scroll down several pages to read about a paragraph's worth of information.

[+] hawleyal|11 years ago|reply
Hate to break it to you, but most people are using touch screens.
[+] Someone1234|11 years ago|reply
As a developer I am a big fan of Bootstrap, as a user I am starting to hate it however.

Previously for mobile versions of sites they would simply check the user agent and if you had a mobile browser they would display the terrible/broken/useless mobile site (e.g. m.example.com). Most mobile browsers built in "Display Desktop Site" functionality to fix this problem.

However now with Bootstrap instead of using the user agent they use the screen size. So "Display Desktop Site" is ineffective and you're left using the terrible/broken/useless mobile site (which still has missing content, breaking content, and dead links even using Bootstrap).

This type of thing is the main problem: http://ageekandhisblog.com/css-how-to-easily-hide-content-on...

The main issue with Bootstrap is that escaping the mobile version is almost impossible.

[+] k-mcgrady|11 years ago|reply
That's not the fault of bootstrap, it's the fault of developers. They're taking the easy way out by using bootstrap to easily create a mobile site and they won't even take the time to do a little customisation to make it work correctly with their content. They could easily disable the responsive features. It's lazy development.
[+] soapdog|11 years ago|reply
Not wanting to change the way you work but the whole responsive design movement and the mobile first approach are king for web development these days. User agent sniffing was always a bad practice and thats why Chrome and friends still need to refer to themselves as Mozilla/*

If you code using responsive design, not only your site will work on mobile devices and desktop but it will also work in future aspect ratios. Lots of people were doing pixel perfect design on mobile sites for iPhone but when that iPhone 5 came in with the new resolution all those designs broke. Blackberry Passport device uses an rare 1440x1440 resolution, if you do pixel based alignment or fixed layouts you will be in trouble in all those marginal devices that together amount to a large percentage. Specially when dealing with Android devices.

So if you begin from the start using bootstrap the way it is meant to be used which is by following a responsive design paradigm then you can forgot the clunky hack that is "display desktop site".

Instead com arguing for a agent sniffing solution, we should all be coding for resolution and depth independence.

Your main issue about bootstrap and escaping mobile version is antagonist with the way it should be used. There should not be a mobile web and a desktop web. There is only one web and media queries are your friend.

If you know all this I am talking about and that would be pretty normal since I spoke nothing but common knowledge, then you know that user agent sniffing and mobile version of sites are all legacy stuff. Coding with modern practices is much easier and less trivia filled than it used to be.

[+] ceejayoz|11 years ago|reply
> The main issue with Bootstrap is that escaping the mobile version is almost impossible.

This is why iOS8 added a "Use Desktop Version" feature to Safari.

[+] minimaxir|11 years ago|reply
That's more a failure of QA than a failure of design. Blogs in particular have elements when tend to break responsive layouts.
[+] archildress|11 years ago|reply
The author makes a good point that's worth exploring, but I think his view misses the point that Bootstrap is really targeted at and most beneficial to those who aren't full-time developers.

The cartoon near the bottom of the page [1] illustrates what I don't think is a common reality. In it, we see the developer adapting a designer's mock-up (rather poorly) using Bootstrap. To me, your full-time backend developers are not the target audience for Bootstrap and aren't thinking in those terms. The designer who's creating mockups in Photoshop is going to handoff that design to the developer whose task is to use their languages to make a design web friendly.

Still a nice article and definitely got me thinking about who uses Bootstrap and how they use it.

[1] - http://www.punkchip.com/wp-content/uploads/2014/10/580-boots...

[+] nimblegorilla|11 years ago|reply
> Bootstrap is really targeted at and most beneficial to those who aren't full-time developers.

That statement is false. I'd say Bootstrap is perfect for almost all full-time developers. The only exceptions are the PSD slicing css "developers" trying to implement things like that cartoon.

Most "full-time developers" work on projects where functionality trumps style. Bootstrap's default style is good enough for those projects and it saves us tons of time.

[+] toadkicker|11 years ago|reply
So what exactly is your point?

> Our designers strive to create layouts that best fit the business and shouldn’t be limited by what framework we choose to use on the front-end.

Name any framework that doesn’t have an opinion about how to do something. A good developer is also one that sees a design and knows what tool fits it best.

>To use Bootstrap efficiently and understand it well you need to dedicate time to reading through the documentation, digging into the source code and figuring out how to customise it for your requirements.

Again, name a framework that requires 0 documentation reading time on the part of the user.

>Bootstrap doesn’t follow best practices or good semantics

This is an opinion best served by backing up what you feel good semantics or best practices are, because often times frameworks define what those best practices are.

[+] sensecall|11 years ago|reply
I've got no shame in having used Bootstrap on a number of client-facing projects (enterprise).

We've found it to be a great framework when used in the right way – Bootstrap SASS (personal preference) makes customising a doddle, and by making sure we only include components that actually get used, deployed code doesn't get too bloated. Supplementing with custom CSS can go a long way to getting rid of the "Bootstrap" look.

> https://github.com/twbs/bootstrap-sass

[+] sstarr|11 years ago|reply
> "It is quicker for me, as a front-end specialist to create these custom designs..."

Exactly. This is like me, as a back-end developer, writing a blog post explaining why I don't use Squarespace.

What would be useful is if the author offered some more lightweight and semantic alternatives, such as Neat (http://neat.bourbon.io) or Semantic UI (http://semantic-ui.com).

[+] mark_l_watson|11 years ago|reply
I use Bootstrap for four of my sites.

What I like about Bootstrap is that you can change the look by trying out different themes, but regardless of which theme you use, users will recognize the layout and know how to navigate, etc. For me, having a familiar looking web design that users already know how to use is a big win.

BTW, what is with articles about 'Why I don't like technology X'? I like positive articles about what people like and use.

[+] weavie|11 years ago|reply
I do use bootstrap, but not directly. I download bootstrap-sass and then pull in the mixins as necessary. It gets over css bloat problems and still allows me to use semantic markup, but also means I don't have to waste time dealing with all the fine details of browser idiosyncrasies and other css wierdness.