Why don't you use Bootstrap? | Hacker News Reader

Why don't you use Bootstrap?

punkchip.com

69 pointsporker69 comments

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.

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.

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.

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

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

Tapbots has a certain aethetic. But take Tweetbot for example. It uses a navigation bar. It uses a tab bar. It uses a vertically scrolling table view. Tapping a table cell brings you to the next view with same animation every other iOS app uses and the back button is in the top left of the navigation bar like every other iOS app. Design is more than looks. They have made it look great and unique whilst making things work in a way users are familiar with.

> Tapbots has a certain aethetic. But take Tweetbot for example.

Tweetbot 3 has dialed back the custom behavior and aesthetic to match iOS7, but Convertbot and Calcbot have not, neither has Tweetbot/Mac.

> Tapping a table cell brings you to the next view

Tapping a message cell opens an action drawer under the cell.

Note that Tapbots still hasn't been able to produce a Tweetbot 3 version for iPad, presumably because of the work required to switch the visuals when iOS8 made their aesthetic feel more out of date.

> iOS8 made their aesthetic feel more out of date.

iOS7, iOS8 didn't change the aesthetics much.

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.

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

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.

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.

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.

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

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

You don't have to download the whole thing, though. If what you need is a custom build, you can tweak it here: http://getbootstrap.com/customize/

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)

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.

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.

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.

> 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 the key point: it's all about your users. Most people out there in the real world just want something that looks decent and works reasonably well. They don't know and don't care whether your site was made with Bootstrap or uses Erlang or whatever.

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

You can control all the code in Bootstrap. Download it, edit the hell out of it. That's not really an advantage of rolling your own.

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.

You can modify your own code faster to start with, but really that's just because you haven't learned Bootstrap. Once you know it well it's no harder than changing your own code.

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.

Digging through Bootstrap's documentation is pretty much always going to be faster than writing your own code.

Building something in-house is very, very rarely a better option than spending time learning something that tens of thousands of people use every day. You simply can't test your own code to the breadth and depth that the community goes to with Bootstrap. This is the same reason why we don't all roll our own jQuery equivalent or SASS compiler. Open source's big advantage is that it's a collective effort that we can all freely build upon.

Lastly, one massive advantage of Bootstrap is that other people know it. Once you get to the point where you're working on projects that need more than one front end developer that is a huge advantage over an in-house library because all the advantages you see for your own code the other developers will see for theirs.

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

Excellent! The article manages to make two opposing arguments simultaneously (same problem can be seen in Firefox too).

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.

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.

Configuring the settings doesn't help with the problem of it being too opinionated. Changing the settings wasn't the problem. The fact that there were settings was. For instance, there really shouldn't be border-radius or box-shadow on .panel at all. That should be up to the designer/front-end person/whoever to add. That's a very subjective property and has nothing to do with the basics of its layout or how it functions. Having a bunch of declarations of box-shadow: 0; all over the place is just clutter. That's just one example of many. I should clarify, I am not anti-Bootstrap. I use bits and pieces of it all the time. It's just not very good for building a large, scale websites that serves many purposes. And I can't design every page and app that comes my teams way, so I'm glad that there's something my coworkers can use that won't look like an unthawed caveman (from 2002) built it.

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.

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.

"If you've got a great designer spending 100 hours on a theme, the result will be much better."

That is why the OP mentioned "Bootstrap is good if you don't have a lot of time or budget to spend on design."

Maybe you should have posted in the root of the thread, instead?

I think I must have not been clear.

I meant that you can spend a lot of time working with bootstrap and get good results too. This is actually pretty common.

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.

Why I do use it:

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

Also, cut-rate UI work often looks much worse than Bootstrap.

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.

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.

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.

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.

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

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

Hate to break it to you, but most people are using touch screens.

Chances are the demographics of adrianlmm's site is not an unbiased sample of the general population, tough. For example, I work on a web-based ERP, and I can assure you our clients don't use touch screens, except for the POS module.

That's a generalization. Looking at analytics for my site, about 1-2% of people out of 50k daily unique visitors are on mobile. The site is geared towards young, tech savy males.

Almost all of them are browsing on traditional resolutions and displays. In my case, it's mobile last.

It is an intranet web application, they can use the native Android version when using mobile devises.

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.

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.

I agree with you and minimaxir, but it doesn't change the fact that the websites are still unusable. As a user, I'd like to still have a way around the developer's mistakes. I wish it were easier for mobile clients to fool the site into thinking it's on a different screen size or aspect ratio.

It's bizarre because the path of least resistance is really to "let Bootstrap do it" and just have it reflow the content for different screen sizes.

That's more a failure of QA than a failure of design. Blogs in particular have elements when tend to break responsive layouts.

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.

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

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

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

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.

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

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

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.

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.

I use Bootstrap because I found this gem:

  https://kristopolous.github.io/BOOTSTRA.386/

Now the spots where I use it look almost exactly like old-school MS-DOS! Which, for what I use it for, is exactly the look I wanted.

Bootstrap is fine, but I've moved to PureCSS because it's smaller and is a lot closer to doing just what I need and nothing more.

Neither option is completely perfect, but I skew towards wanting smaller frameworks that do just what I need.

It's straightforward to customize Bootstrap with LESS, i.e., changing the column layout, break points, buttons, typography, and UI components.

I use Bootstrap on small apps that I need to get up and running quickly. I don't use Bootstrap on existing apps or deeply responsive apps.

Long time fan of https://github.com/inuitcss

> Innovative designs which defy conventions

Some of these "innovative design" ideas are: video as background, overriding/breaking the back button, weird scroll animations, overriding/breaking scroll etc.

I'd rather use pure HTML site than to use something like the above. And I'm speaking as a web developer, people who are not technical are frustrated even more by these "innovations".

I think putting words into the author's mouth in order to criticize is not constructive. I believe he meant simple things more like deviating from 12 columns/4 breakpoints.

That's a straw man argument. Nobody proposed using video as background or overriding established defaults.

what's remarkable for me is that this post got 50+ points for something that clearly misinterprets BS ;)

LOL. I stopped reading when he said it takes "too much time."

Reply on news.ycombinator.com