
Can you build beautiful sites with Twitter Bootstrap? Hell yes - simonhamp
http://builtwithbootstrap.tumblr.com/post/12613100391/weirdo-cards-great-work-by-mezzoblue-this-is-a
======
nikcub
The key to getting the most out of Bootstrap is to use the less modules.

I created a fork of bootstrap where I setup the following:

* boostrap files are in a subdir called 'boostrap'

* in the 'css' directory create a less file for each style sheet, for eg. site.less, admin.less

* in that site file, place all your variables and then include all the bootstrap files

* under that, put in all your custom CSS

* here is an example: <https://gist.github.com/1356716>

* the top of the file is the contents of variables.less, then the includes, then custom CSS

* copy the Makefile into your 'css' folder, and edit it to change the right paths

* put your color theme (3, 4 o4 5 colors) at the top of the file and define them as variables. declare everything else (links, topbar etc.) as one of these colors or a lighter(), darker() etc. variation

* there are tons of online color matchin sites, including the excellent Adobe Kuler - pick a color theme and plug it into less

* learn how to use less: <http://lesscss.org/>

* instead of using span8, span14 etc. learn how to inherit in less. for eg. a sidebar 4 spans wide would be:
    
    
        #sidebar {
          ..makeColumn(4)
        }
    

* use macro's to create your own custom gradients, for eg.
    
    
        .lightblue {
          .gradientBar(#5bc0de, #339bb9);
        }
    

* use those mixins to create custom button styles. for eg. to create a custom topbar fill using the lightblue:
    
    
        .topbar.fill {
           .box-shadow();
           .lightBlue();
        }
    

* also, I wrote another script that will autorefresh your browser in OSX when you save your less. so the combination of this makefile and this applescript will build the css file from less and refresh your browser whenever you save:

<https://gist.github.com/1326820>

~~~
ammmir
great tips! auto reloading css is perhaps my most favorite timesaver. i add
this snippet to a page when in development:

    
    
      <script>
        if(location.href.indexOf('file://') == 0 || location.href.indexOf('http://localhost') == 0) {
          var s = document.createElement('script'); s.async = true;
          s.src = 'js/css_auto-reload.js'; s.onload = function() {
            document.styleSheets.start_autoreload(1000);
          };
          document.getElementsByTagName('head')[0].appendChild(s);
        }
      </script>
    

it uses <http://nv.github.com/css_auto-reload/> and updates the page (in
place) nearly instantly after i save css in my editor. i use sassy/scss, so i
also run "compass watch" in a terminal. it's css tweaking heaven for me :)

~~~
tomvo
check out LiveReload, does that plus auto compile.

------
pamelafox
As a single founder/developer, I'm a huge fan of bootstrap. I can handle
making the frontend and backend of my site, but I can't necessarily make it
pretty - especially because I honestly have kind of tacky taste. With
bootstrap, I can get my site to atleast a passable level of prettiness, and
not spend all my time tweaking CSS (which can take so damn long).

The main issue I'm seeing with bootstrap use now is lack of customization -
everyone using the default colors and styles - so that when you load one of
those sites, we think, "a-ha! bootstrap". It probably takes some of the magic
out of a site's novelty for developers with that reaction. I'm not sure it
affects non-techie consumers -- maybe it's bad if they can't visually
distinguish your site, but otherwise, I wonder if they actually notice.

I spent a bit of time customizing the Bootstrap look & feel for my own site -
turning that somber black bar into a bright and sunny bar:
<http://www.everyday.io/> (Screenshot of logged in screen here:
[http://dl.dropbox.com/u/10998095/Screenshots/bootstraplogged...](http://dl.dropbox.com/u/10998095/Screenshots/bootstraploggedin.png))
I also use bootstrap for the mobile (Phonegap) version of my site, and it
works surprisingly well ([http://www.everyday.im/learning/switching-jquerymob-
bootstra...](http://www.everyday.im/learning/switching-jquerymob-
bootstrap.html)).

Thanks, bootstrap team!

~~~
ra
_> I can handle making the frontend and backend of my site, but I can't
necessarily make it pretty - especially because I honestly have kind of tacky
taste._

That's exactly what I'm like... and for the same reason I think bootstrap is a
science-send. It raises the lowest common denominator to something almost
respectable.

As someone pointed out above, making use of 'less' allows you to rapidly test
different color schemes... thereby controlling potential tackiness.

~~~
pamelafox
So, unfortunately, I made the decision to use Sass/Compass for my CSS before I
started using Bootstrap, and when I saw that they used Less I considered
switching over, but it doesn't have as many features as Compass - like icon
spriting. I could complement Less with other tools but I decided to stick with
Compass for now. It's actually still pretty straightforward to customize the
color schemes without the Less variables.

(Pro tip: I often look at Bootstrap's uncompressed Less CSS to figure out how
to customize in the simplest way.)

~~~
defk
so use scss version <https://github.com/jlong/sass-twitter-bootstrap>

------
wushupork
Not to knock Twitter Bootstrap off the pedestal, but Zurb Foundation is also
pretty good. <http://foundation.zurb.com/>

It looks a lot like Bootstrap because it's based off it I believe but it's
also responsive and has stuff to handle different device types which is pretty
cool.

BTW, I don't have any connections to Zurb whatsoever

~~~
hackernews
When I looked at Zurb vs Bootstrap, I wanted to use Zurb but the default form
styling turned me off. When I am looking for a style guide the first thing I
do is find the forms cause that is IMO the most difficult part of styling a
web app.

~~~
firefoxman1
Really? All you have to do is add the class "nice" to the form element and it
becomes very pretty.

<http://foundation.zurb.com/docs/forms.php> ...scroll down to "Nice Forms"

~~~
hackernews
It just doesn't work for me. Compare that to:

<http://twitter.github.com/bootstrap/#forms>

there is a big difference.

~~~
kellishaver
To each their own. It's largely a matter of opinion and getting forms right is
tricky, but from an accessibility standpoint, I much prefer Zurb's forms...
much better contrast and easier to read.

------
cschmidt
Bootstrap has saved me so much time. After using it, I'm wondering why
everyone is so interested in having a custom look. Web design at the moment
feels like desktop computers before GUI's became standardized. Why does a menu
look different on every site? Is that good for users?

I feel a little relief when I hit a "standard" bootstrap site, as I know how
it will work. In some ways Bootstrap is that first standard look and feel for
the web.

With most sites, the GUI is not the value added part. If it isn't, then why
work on customizing it? Make it easy for your users and use a standard.

(I'm certainly not the first to have these ideas. Dave Winer has been talking
about it as well.)

~~~
highpixels
You wouldn't go into a restaurant which had the same generic "look". How dull
would life be if all buildings have the same generic style; all shop fronts
had their name printed in the same size, font and colour; all menus looked
alike and everyone drove the same car?

A standardised GUI is not the same as standardised branding.

~~~
TylerE
Every american chain "grill" would disagree with you.

------
firefoxman1
Is anyone else starting to get annoyed by the fixed-to-top navigation trend? I
think, just like most web trends, it's appropriate or beneficial in some
cases, but it seems like everyone is jumping on the bandwagon now.

The main issues are that they take up screen space and they don't work on
mobile browsers like iPhone and they only partially work on devices like
tablets.

~~~
danneu
I find myself only bothering me when the top bar is taller than the navigation
link. For example, the featured website in the OP blog:
<http://www.weirdocards.com/>. The top padding strikes me as an unnecessary
aesthetic.

But I otherwise appreciate the functionality of the default, thin bar where
I've encountered it. Even on my netbook. The small expense of screen real
estate is compensated by not having to scroll all the way up to navigate and
search.

~~~
icebraining
Well, that's what the Home button - or in my case, the Fn+Left combo - is for.

------
tonycoco
We build <http://obaz.com> with it. It makes patterns for buttons and pop-
overs just dead-simple and easily customizable. Not to mention, Rails
integration with <http://github.com/anjlab/bootstrap-rails>

~~~
gcaplan
<http://obaz.com> looks awesome, who did your design TonyCoco?

~~~
tonycoco
Well, I did. <http://forr.st/-tonycoco>

------
_frog
Just thought I'd share my WIP port of Bootstrap to Sass, it's probably going
to change a bit as I plan to make the styles for forms and such work with
Rails' default generated HTML, but it's worth a look.

<http://frogbot.github.com/sassy-bootstrap/>

~~~
matsimitsu
Just a heads up: I you use simple_form, they already have a way to adapt the
forms to bootstrap and the results are great! (simple_form master)

------
tmcdonald
Bootstrap has enabled me to work on many more hobby projects than I would have
ever done before.

As a student developer with a lack of any sort of design talent, being able to
whack out a site with the styling Bootstrap provides means I have to spend
less time playing around with CSS, for a much better result.

I guess this would also be the time to plug my SASS conversion of Bootstrap
which is ready to drop right into the Rails asset pipeline with no additional
dependencies, while retaining the mixins and variables from Bootstrap. It's
also a dependency of rails_admin, so you might be using it without realising:
<https://github.com/thomas-mcdonald/bootstrap-sass>

------
jaequery
I'm creating an open-source CMS w/ the Twitter Bootstrap for anyone
interested: <https://github.com/jaequery/jien>

------
alexwolfe
Why wouldn't you be able to, it's a good framework with plenty of options. Not
to mention the designer/developer can always add/customize on top of it.

Nice collection.

------
xyzzyb
Bootstrap is awesome. I've built my "about me" site <http://sdball.github.com>
and <http://movieterminals.com> using it.

With Bootstrap I can think more about the app and defer the styling until I
really care about it; but not run a bad looking coder design.

------
ssharp
I used Bootstrap to apply a new UI to a relatively simple internal webapp we
use. It was ridiculously easy to get a really clean UI thrown together in an
afternoon.

I'm sure it would be a lot more work to use Bootstrap for a public front-end
interface and avoid looking generic, but for the back-end, it's fantastic.

------
wushupork
Somebody should build a Bootstrap version of Jquery UI

------
chrisconley
For a new project, I spent 1.5 hours in Balsamiq and 6 more implementing the
mockup with bootstrap in rails 3.1.

The end result is quite nice looking functional prototype that's already in a
good place to start building the actual app upon. Couldn't be happier.

------
venturebros
Is there anything similar to bootstrap? Just wondering what else is out there.

------
travisfischer
Twitter Bootstrap is great tool for solo devs to do rapid development.

I have built <http://smacktweets.com> totally on my own in a few weekends. I'm
someone who is pretty terrible at design and while smacktweets.com shows it,
Bootstrap has definitely helped me maintain some level of "slickness" in my
initial design.

I will probably eventually get a designer involved and wouldn't be surprised
if I bailed on bootstrap at that point in favor of an entirely custom front-
end but for rapid weekend development it's serving me very well.

------
joe-mccann
<http://dillinger.io>

A 6 hour project I put together including porting bootstrap to Stylus.

It's a web based markdown editor for proper WebKits at the moment.

~~~
marekmroz
Is there a place I can get your Stylus port? You may consider adding it here
[https://github.com/twitter/bootstrap/wiki/Forks%2C-Plugins%2...](https://github.com/twitter/bootstrap/wiki/Forks%2C-Plugins%2C-and-
Packages)

~~~
joe-mccann
I'll be open sourcing all of Dillinger soon so the port will be in there.

------
spencerelliott
I've just started playing with Bootstrap and I'm loving it. I have a pragmatic
mind and less of an artistic mind - a.k.a I have no art skills. It makes it
really easy to get a nice looking interface quickly so I can test an idea and
actually see what it'll look like with minimal effort.

Plus, I can focus more on the implementation of the backend code and less time
worrying about making all of the stylesheets, etc.

------
mhansen
I built <http://markhansen.co.nz/scatter.fm> and
<http://wirelessmap.markhansen.co.nz/> using Twitter Bootstrap.

The experience was awesome, it made it so easy to experiment and get a
prototype out the door quickly. It was great for these little visualisation
projects.

------
phzbOx
I've released a functional python library and I've written the doc with
bootstrap (www.phzbox.com/moka/) Was amazed by its simplicity.

------
tathagatadg
I started using bootstrap for my a homework assignment and my only regret is
that why didn't I adopt it before! I've used blueprint before but bootstrap is
just so idealistic - earlier I've struggled for hours to vertically align
image and multiline text. Bootstrap just takes care of the OCDs when non-
designers feel frustrated with the lack of design skills!

------
thegyppo
We're working on something that allows merchants to build customised coupon
pages for their business imagine coupons.walmart.com.

We've mostly used Bootstrap, however it'll be interesting when businesses ask
the pages to look like their current stylesheet.

Example: <http://istockphoto.couponzor.com/>

------
rmason
I recently built a prototype with Bootstrap. I will never be a designer, but
you can turn something out quickly that looks quite professional with very
little effort.

What I also like about Bootstrap is that it is continuing to be developed and
is the core of one of the most successful products on the web.

------
MattBearman
I like to think my latest little project (<http://dashpoll.com>) is fairly
easy on the eyes, and that's just default Twitter Bootstrap with a custom
header.

Best of all it allowed me to focus on the programming and finish the entire
site in 10 hours.

------
bcn
Bootstrap on drupal: <http://thestreethub.com/>

~~~
Ecio78
how is it done? I've read that there are problems with licensing:
<http://drupal.org/node/1284152> mainly for posting a twitter bootstrap
derived theme on drupal.org

thanks

~~~
bcn
We did our own implementation, but as you've seen, it's not possible to
distribute on drupal.org. More details can be found at
<http://drupal.org/node/1255934>.

~~~
nikcub
crazy, this is all supposed to be 'free' and 'open' software. politics getting
in the way

------
simonhamp
For those of you posting links to your sites that are built on Bootstrap, be
sure to submit them to Built With Bootstrap to get some free promotion of your
own!

<http://builtwithbootstrap.tumblr.com/submit>

------
ianstormtaylor
Maybe. They have covered several design decisions that trump the average
person, mainly in the typography department. So yes, it ups the baseline for
people who don't know anything.

But understand that "beautiful" is a very small part of what makes a site
good.

------
grantjgordon
I've been using BootStrap in my Clients' web apps for a few months now and
been _very_ pleased with the results. Thanks to the two that built it!

------
mike25x
we used bootstrap in our site, we really like this implementation i think is
quick and nice enough to build a website ,we are now cleaning the css and
inline styles for addittional stuff and in my case i learned a lot of css.

the only disadvantage i see is compatibility with older and not so older
browsers.

<http://www.lacomanda.com/>

------
jamesbressi
Any open source ecomm sites being built?

~~~
lukeholder
with twitter bootstrap?

~~~
jamesbressi
Yes, I am aware of the alternatives though I haven't looked in a long time. I
have always found customization a real pain without advanced PHP knowledge
when installing features.

------
HankMcCoy
No doubt about it, but why SHOULD you use twitter bootstrap?

These sites could have been created using 960gs-templates as well. Am I
missing something here?

~~~
danneu
The grid is only one of its features. I get the most utility out of
Bootstrap's prebaked design features that I have to custom code every time I
start new projects. From warning/error/success messages to popovers to simple
form aesthetics.

When the most primitive iteration of my application already looks great during
development when it's just a simple CRUD prototype, I no longer waste mental
energy by being distracted by things not lining up, lacking padding, and
generally being no-css-yet ugly off the bat.

~~~
crag
Even the typography in the framework is damn good. I only add a few fonts
(like pictos for symbols) and I'm off. By adding a data-grid, additional
alert/button colors I got 80% of my work done. It's pretty amazing for me.

But I only work on internal apps. I can see needing to do some serious
customization for any public website. But the foundation to build all that is
there.

------
leouznw
such cool idea, it will save me a lot of time

------
aneth
Of course I understand the sentiment that everyone wants their site to look
fully custom and not like it came from any particular framework, but it's hard
to resist the irony that the first thing they have to say is "Hardly looks
like a ‘Bootstrap site’ at all."

------
Kevindish
Looks really cool! I could see myself using it!

------
jaequery
"if it's good enough for twitter, it's good enough for me" - some dude.

