

Ask HN: Twitter Bootstrap for "everyone else"? - davidw

I'm thinking of using Twitter Bootstrap for a site of mine, but I began to have some doubts while looking at it: it's a fairly small font, and has small icons, and come to think of it, Twitter itself is generally oriented towards the young and more technically savvy (the kind of people who know that it's really easy to increase the browser's font size).  Sure, there are probably counter examples of someone's grandma being an avid twitter user, but I got to wondering if Twitter Bootstrap is a very good choice for a site very much aimed at "normal, non-technical people", who may also be a bit older than average, and not have the eyesight or patience to deal with something so small.<p>Has anyone actually done any research into this that they'd like to share?  I know that it's in theory possible to resize it, but I'm a bit wary of how that would work out in practice.
======
adrianbravo
You can get around these issues with customization. There may be some other
frameworks for setting up a quick design out there that are better suited to
you if that's an issue, but I can't really help you there.

If icon size is an issue, you can try using Font Awesome:
<http://fortawesome.github.com/Font-Awesome/>. It uses a font-face for the
icons rather than sprites, so you can configure further in css by adjusting
size and color, whereas bootstrap's icons are limited to black/white (plus
some opacity). A potential gotcha with this approach is you need to be sure
you can configure your web server to send the right content-type for the font
files you'll send. I had to do some minor nginx configuration to get it right
for certain browsers.

There are also pre-customized resources like bootswatch
(<http://bootswatch.com/>) if you want to get a look at some of the
possibilities.

And if you clone the bootstrap repo, you can fiddle around with the base LESS
stylesheets to make quick changes that affect the full system (lots of stuff
in variables.less:
[https://github.com/twitter/bootstrap/blob/master/less/variab...](https://github.com/twitter/bootstrap/blob/master/less/variables.less))
of course.

I don't think the issues you listed are particularly significant unless you
know that customization is going to be too costly in terms of time.

~~~
davidw
I've never customized it so I have no idea whether it's a scary mess that sort
of works but not really because you're taking it outside its comfort zone, or
whether it's all pretty easy. I guess I'll have to play around with it some
when the time comes.

Thanks!

~~~
eknuth
Customizing it with less is really pretty straightforward.

You can also generate custom css from the website. Just click the customize
tab in the topbar. You can bump up @baseFontSize. 16px works very well. You
might also want to increase the @baseLineHeight a bit as well.

------
jharding
It's pretty easy to customize Bootstrap to your needs. Whenever I start a
project, I usually always use Bootstrap to help increase my development pace.
Once all of the functionality is done, I then try to get away from the default
Bootstrap look and give my project a unique look. I can usually do this just
be playing with the variables in variables.less, although sometimes I have to
add some styling on top of Bootstrap.

For example, I used Bootstrap for my Chrome extension's web page
(<http://thejakeharding.com/philanthropist/>). At first glance, you probably
wouldn't realize Bootstrap was used, but really, Bootstrap is pretty much the
only thing that was used for styling. All I did was tweak some variables.

~~~
joshschreuder
Unrelated to the OP, related to the extension, but doesn't this sort of thing
attract Amazon's wrath, having an Associate ID set without any referrer from
the project site itself?

~~~
jharding
This is actually going to be the topic of my next blog post. Reading through
the Associates Program Operating Agreement ([https://affiliate-
program.amazon.com/gp/associates/agreement...](https://affiliate-
program.amazon.com/gp/associates/agreement?ie=UTF8&pf_rd_t=501&ref_=amb_link_84018271_7&pf_rd_m=ATVPDKIKX0DER&pf_rd_p=&pf_rd_s=assoc-
right-1&pf_rd_r=&pf_rd_i=assoc_join_menu)), it seems like there is a decent
chance Philanthropist would be in violation of something. However, that
agreement is for associates, so I'm not sure if those rules would apply to a
browser extension.

Also, I mostly built the extension for myself so I could easily support one of
my favorite podcasts. There are only about 10 other users and since I don't
really plan on advertising the extension, I doubt the user-base will ever get
big enough to warrant concern from Amazon.

