HN Explorer

Ask HN: To Bootstrap or Not to Bootstrap?

10 points by tlong ↗ HN
I have been using bootstrap for years and generally prefer it as the starting point on all of my front end designs. But I'm working on a project right now with another developer who doesn't want to use it because he says it's heavy and doesn't follow best design practices.

I have never had a problem before. What do you think? Why not use bootstrap?

20 comments

[ 4.7 ms ] story [ 62.1 ms ] thread
benologist
I've been considering this a lot lately myself, the biggest pro I've come up with is that with the right project a lot of people can easily dive into customizing / theming the work and if you're careful existing themes might be really easy to integrate.

If nobody else is going to be editing the project then it's really just a tradeoff between your own time vs download size, if you can afford to shave a few hundred kilobytes off your first page load that can be a big improvement for many audiences.

I've been favoring Skeleton as a significantly lighter alternative, although it is very small in comparison to bootstrap - http://getskeleton.com.

sjs382
I use bootstrap. On 90% of my projects, you wouldn't be able to tell without looking at the source. So, I'm not sure what bootstrap has to do with design practices. You can implement any design using bootstrap.

As far as being heavy, just go through and throw out the stuff you don't need. It's reasonably modular.

It seems as if the other developer doesn't like how default bootstrap looks (or is bored by the overuse of default bootstrap), and he's justifying his preference.

Otherwise, ask him what "best practices" are missed.

hmillison
Do you just create a bootstrap-theme to make it look unique?

I'm interested in learning more about how to take advantage of the good parts of bootstrap without having a site that looks too much like vanilla bootstrap.

sjs382
In my day job, I work for an agency.

We get a design proof, in PSD format. I mentally translate it into a wireframe (which admittedly is kind of backward), and lay out that wireframe using the bootstrap classes that most closely match the layout. From there, I iterate, to match the design proofs.

The designers don't use any bootstrap design, so the bootstrap styles never come through in the final product.

The "right way" to do it (which I don't do) would be to use LESS mixins, so as not to have Bootstrap classes polluting the source, but I mostly work on short-turnaround projects so I stick with the Bootstrap classes.

tlong
Yeah. I'm used to doing the same. Thanks
panorama
OP likely means functional design as opposed to aesthetic. For example, I don't particularly like Bootstrap's unsemantic class naming schema. Although admittedly, most CSS frameworks are just as guilty; Bootstrap just happens to be the most popular.
sjs382
If you have a problem like that, you're using bootstrap the wrong way. It's okay—I do, too.

The right way is to use LESS mixins to match bootstrap classes with your semantic classnames.

tacone
Less-mixin wrappers are not the right way, but just one way that somebody once stated to be the best.

I used the semantic mixins method quite a while, and let me say that it does not feel that good. Once you have your html full of nice "article-box" classes, who will ever notice?

If you strip completely your css from your markup to re-use it in another project, you're left with literally nothing, if not a bunch of semantic classes than then may also be semantically wrong in respect of the new project (has the article become a tutorial?).

Using bootstrap classes are a convention you can reuse in other projects, as well as override when you need. If you strip your css then, and replace it with a vanilla bootstrap, you'll get a halfway good looking page you can work on.

It's perfectly ok to pursue semantics, except that semantic class attributes are the most useless form of semantics.

In a time where angular and react challenged the very concepts of markup/behaviour/styling separation, after the utter failure of XHTML (the parsable markup nobody ever parsed) and the mild failure of HTML5 semantic tags (whose cases of use are confusing at most, and overlap dramatically with the arya attributes) I try to avoid to be too strict about semantics.

anonyfox
For most usecases, bootstrap is fine. It delays the "designing" part so you can think about your product and actual features directly. And if you are tired of the "standard look and feel", you can buy nice themes later for a few bucks.

Projects that should not use bootstrap are the ones where every milisecond in performance truly matters, or when you have custom design requirements that would need major "overruling" of bootstrap. In this case, I recommend using a very lightweight CSS framework with a responsive grid instead, like http://purecss.io/grids/ .

paulhauggis
I love bootstrap. I use it for all my projects. I'm not a designer and allows me to have a fully functional site in a short amount of time.
rickr
I've been using bootstrap for a while now too and lately I've been trying out new libraries just to see if anything is better yet. On feel alone I didn't love foundation.

For a project that required pretty heavy customization I ended up using skeleton/react (http://getskeleton.com/) and enjoyed it.

I saw Semantic UI on here the other day and I may end up trying that out on my next project: http://semantic-ui.com

tlong
Nice. Haven't tried Skeleton. Maybe this is a good compromise. Thanks
theaccordance
If you use Bootstrap's source files, you'll have granular control over the framework's weight, since you can simply exclude the components not used in the project.
panorama
If you're nit-picky about your CSS (as I am) and just want to write it the way you want to write it without a framework making guiding decisions for you, I recommend the lightweight library Bourbon by thoughtbot (and the companion library Neat for a grid framework). www.bourbon.io
tlong
Nice. Thanks. Hearing a lot about bourbon lately but haven't tried it.
tacone
My take:

Bootstrap is made of several components, which make it trivial to recompile it without the not-needed parts. You can even do it online (as well as save/reuse configuration files): http://getbootstrap.com/customize/

The full bootstrap css weights 23.5kb gzipped. If you're not using gzip on your servers then that's the problem you should solve.

What makes bootstrap good is not the features per-se. It's the huge amount of cross-compatibility knowledge in it. There are many cool frameworks around, but it's hard to find something so solid and battle-proven as bootstrap. That's the real point of using bootstrap.