
Twitter Bootstrap - d0vs
http://twitter.github.com/bootstrap/
======
tptacek
Not to take anything away from a really nice contribution by Twitter's team,
but know that stuff like this in tens of different variations are available
for tens of dollars at sites like ThemeForest.

A typical "admin" theme has some variant of the 960 grid, nice forms and
buttons, drop-down navs, tabs, and accordions, and multiple layouts.

The templates won't be as well documented as this one, and they'll be more
brittle and probably more poorly coded... but they'll only take an hour or two
of additional work to (say) Hamlize and bring into your Rails project. They'll
look more distinctive than Bootstrap. They'll have better browser
compatibility.

Unless you're crazy enough to be selling web apps to web developers, no
customer of yours is ever going to know or care which of these things you
started out with.

Or, use Bootstrap; it's really nice. I'm just saying you have lots of good
options.

~~~
DavidMcLaughlin
You're comparing Apples to Oranges here. Bootstrap is not a template, it's a
framework for people who know what they're doing to quickly build fully
customized but aesthetically pleasing websites with a lot of the pain removed
from cross-browser CSS.

It is similar to something like Blueprint (<http://www.blueprintcss.org/>),
which I have used for my prototypes with a lot of success, but just taken much
further.

~~~
tptacek
No, Blueprint (which I am a fan of, especially with Compass/Sass --- we
shipped a product built on Blueprint) is a CSS grid that happens to have some
nice typographic defaults.

Admin themes --- which, again, cost _tens_ of dollars --- are uncannily
similar to Twitter Bootstrap: they include full page layouts with dummy navs
and a series of demo pages with styled markup for... well, more than is in
Twitter Bootstrap! (They get to cheat and use jQuery). They are basically what
you'd get if you gave a designer the brief "build the layout for my app, Lorem
Ipsum 3.2 Pro".

You _really_ ought to take a look at them. I know it's hard to take things
from Themeforest too seriously. It was hard for me too. Now I feel dumb about
that.

~~~
patio11
_You really ought to take a look at them. I know it's hard to take things from
Themeforest too seriously. It was hard for me too. Now I feel dumb about
that._

To elaborate on what Thomas is saying: they revolutionized rapid application
development at both our companies, for like $15 each.

In consulting projects I often have call to create little one-off internal
tools in Rails, either as a prototype for a tool the client will create or to
support their marketing team. These generally have development budgets
measured in days, and I have the HTML/CSS skills of roadkilled turtles, so
they came out totally unstyled. I'm now embarrassed by them: now when I start
a Rails project I drop in one of my prepared admin theme layouts and blammo it
magically looks professional.

Given that my clients end up paying thousands for those mini-projects, the
level of polish is clearly worth it. It's like a Tiffany box versus delivering
the ring in a small paper bag: if you think it doesn't matter, your mental
model of human cognition is broken.

~~~
div
Did you just buy and convert a few admin themes that you now have shelved for
future projects or is there some sort of workflow / tool you use to integrate
these themes into your rails app ?

I just found out about install_theme
(<https://github.com/drnic/install_theme>) which looks usefull.

Personally I've been using active_admin for simple apps, which has a pretty
good theme, but there's not really much variation, if any.

~~~
patio11
I considered doing something more elaborate, but honestly, "Buy, download,
SASS, HAML" only takes a morning.

------
akavlie
Any clue what the browser compatibility is like, and how well it holds
together in older browsers?

All they say is "only modern browsers in mind" -- but I see no details about
that.

If it holds together sans pretty effects that's fine.

~~~
garbowza
Not so good in IE8. All the message gradients are royal blue and functionality
like the drop down doesn't work at all.

~~~
pragmagic
Such a shame. That will rule it out for a lot of developers.

For all your designers and front-end developers: there is a real need for
something like this. Have a look through the weekendhacker archives and look
at how many developers ask for design help. Templates on sites like
themeforest are often only suitable for basic crud/admin apps or require so
much customisation it's easier to start from scratch. At the other end of the
scale you have a variety of frameworks and boilerplates which are great from a
technical perspective but do little to help aesthetically challenged
developers like me.

What we need is something in between. A library of pre-styled css 'components'
that look good and support the most significant browsers. Similar in principle
to Nicole Sullivan's OOCSS but with a greater range of visual styles. I'd pay
significantly more than the cost of a themeforest template for a component
library that managed all the cross browser issues for me and I'm sure others
would too.

~~~
padobson
This won't fix all of your problems, but I've found it pretty useful. It seems
to degrade gracefully too.

<http://css3button.net/>

~~~
cincinnatus
Actually from IE it just puts a big IE logo with a red X through it up on the
screen. Arrogant and useless.

------
joeshaw
What is the relationship between this and Bootstrap.less
(<http://www.markdotto.com/bootstrap/>), other than it appears to be by the
same person? What about Skeleton (<http://www.getskeleton.com/>)? Are they
just 3 different visual approaches to the same problem, or is there an
evolutionary progression among them?

~~~
cmelbye
Bootstrap.less seems like it's just a bunch of LESS preprocessors for things
like rounded corners, color transparency, grid layout, etc. Bootstrap goes
further and includes navigation bars, table styles, alert message styles, and
a lot more. It's conceivable that Bootstrap.less is used in Bootstrap, because
I know that Bootstrap has similar LESS preprocessors, although I don't know
for certain.

Skeleton is very similar to Bootstrap, and Skeleton was designed by a designer
at Twitter as well. Bootstrap seems to contain more styles for things like
tables, alert messages, modal dialogs, etc.

------
Pewpewarrows
All it needs is for that grid to be responsive using CSS media queries, and
that will probably be the last CSS toolkit I'll ever need. I have my own
internal boilerplate one that I use, but it's nowhere near as refined.

Bravo to the Twitter dev(s) responsible for this. You probably just saved me
hundreds of hours of future work and frustration.

~~~
uptown
Take a look at Skeleton. It's created by a guy that works at Twitter and is
responsive:

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

The HN discussion about it is here:
<http://news.ycombinator.com/item?id=2772316>

~~~
getsat
This is ballin'. Thanks for the link!

------
bdesimone
Gorgeous as it is -- I just can't use something that utterly breaks IE7,8. I
wish the realities of browser support were different.

Nice contribution in any case.

~~~
mdo
We will definitely be looking into the IE support ASAP. More to follow on
that.

------
wildmXranat
For a developer like me, that doesn't have a lot of time to sharpen UI skills,
this is amazing.

~~~
nikcub
developers have long had tons of libraries that we could access and use almost
as a jigsaw puzzle, whereas the equivalent for design never really existed
until recently.

~~~
dmix
Blueprint CSS framework has been around since at least 2004.

The newer libraries are basically the same thing (grid/typography/resets)
except that they include things that modern browsers support.

So this isn't entirely a new thing.

------
seunghomattyang
I only recently started learning HTML and CSS so I was wondering if there is a
good resource for learning how to use grids.

I don't exactly understand how to use grids (or even why). Is it for visual
consistency or is there an underlying usability/maintainability benefit to
using grids?

~~~
blauwbilgorgel
The two main designers that started the grid-craze were Mark Boulton and Khoi
Vinh. Some resources from them:

[http://www.markboulton.co.uk/journal/comments/five-simple-
st...](http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-
designing-grid-systems-part-1)

<http://www.subtraction.com/2004/12/31/grid-computi>

How to use grids? It is usually as simple as adding some css, divs and
classes. At its most basic, you can use a gridpaper background or this
javascript gridder: <http://gridder.andreehansson.se/> that works well with
the <http://960.gs> grid framework.

Why I use grids?

\- maintainability and cooperation

\- visual consistency across browsers

\- less development time spent with display bugs

Why I don't use grids?

\- Can become a bit boring/holding you back

\- Not all designs work with even columns (for example those based on the
golden ratio)

\- Code bloat (you are using divs like columns and rows, in almost the same
way one would layout a page with tables, also devs sometimes forget to remove
the unused classes from the production CSS)

~~~
lean
I think Josef Müller-Brockmann predates those two by just a bit :)

------
Adkron
Classes and ids should describe the data that you are marking up, and not the
structure of the view. It is really hard to continue to work with something
like this. It increases the number of classes on each element and causes the
developer and designer to fight over which classes go where. Now we have
separate classes for style and functionality.

If we describe the data then it is easy to describe the view of that data in
different ways, and with the same html.

~~~
jacobr
Yes. An interesting approach would be to use mixins instead, like an expanded
version of Compass.

------
leek
This is great, but I'm afraid I will be forking and adding SASS/SCSS support.

~~~
mhartl
I want that, too. Let me know when you've forked it:

<https://github.com/twitter/bootstrap>

~~~
adam_albrecht
Yeah and post the new repo, because I'd be happy to contribute.

~~~
kkdoo
<https://github.com/kkdoo/bootstrap/tree/scss>

------
pbreit
I've been looking at Blueprint and Skeleton but this looks like a better
option.

If I'm not a LESS user am I going to feel second class?

~~~
mdo
No, sir! It comes with compiled (and optionally minified) CSS, so you should
be all set.

~~~
ahmicro
That's AWESOME. Thanks

------
liedra
It's a bit of a shame that the "just hotlink the css" thing doesn't actually
work very well - it actually means that some parts won't function (such as the
Dropdown menu). My partner and I have just spent the better part of half an
hour trying to work out why this didn't work (the documentation didn't mention
any javascript necessity).

Docs could use some serious clarification - which parts are CSS-only and which
require what js files.

------
akavlie
Looks pretty nice. But how did this come out of twitter? I haven't seen half
of these elements on twitter.com.

~~~
bretthopper
Main dev is Mark Dotto who previously released Bootstrap.less:
<https://github.com/markdotto/Bootstrap.less>

<http://markdotto.com/bootstrap/>

~~~
gcampbell
Tiny correction: His name is Mark Otto; "D" is the middle initial.

~~~
windsurfer
That's unfortunate.

------
katieben
Just used it today with my new 1x52 project: <http://jambx.com/> \- Twitter
for song lyrics.

I'm doing some sort of new web project once a week, for hopefully a year.
Writeup on my blog about it: [http://kguac.com/2011/08/1-x-52-week-4-jambx-
twitter-for-lyr...](http://kguac.com/2011/08/1-x-52-week-4-jambx-twitter-for-
lyrics/)

~~~
rokhayakebe
1x52 is interesting, although you may be forced to build really really simple
MVPs. I have been struggling with, to use your namification, 1x12months.
Following your progress to see.

~~~
katieben
Well, the downside of doing these so quickly (so far) does seem to be less
time marketing them.

~~~
rokhayakebe
I agree. Building is probably the easiest part. I do not have a blog, but I'll
start to post links of projects in my HN profile.

------
jhuckestein
This seem like a perfect addition to a hackathon toolkit :) I'll definitely
use it.

Random rant: Why do they call it "Twitter bootstrap"? IMO that kind of
association is a little vain. Rails isn't called 'Ruby on 37Signals'. Besides,
it's slightly confusing because it seems to have little to do with Twitter.

~~~
mdo
Actually, it came from our internal apps and is used across the board for all
of those (and believe me, there are a lot of them) :).

~~~
trungonnews
I am guessing that the internal apps users don't run IE. :)

------
SudarshanP
It would be awesome if there was a forked Django/Rails/Sproutcore framework
with tight integration with something like Twitter Bootstrap.

That way you would have a super awesome looking app right from the start.

The pros can work on the lean frameworks while the lazy ones like me can hop
onto the shoulders of the giants ;-)!

------
dfischer
This is absolutely interesting and amazing to see. There's a lot of good
elements and style in here. I think this is a great effort and movement
forward to help bring a "standard UI" library to the web. I think there's a
good use case of websites starting to have a more "locked in" UI/Look & Feel.
I'm not convinced by this notion but it's something I've been thinking about
lately.

Either way, this is a great library for bootstrapping your web-app.

I do have some qualms though, but this is due to the limitation of CSS. You
really should start practicing separation of content from presentation. It's
great to see them leverage LESS but I'd like to see this integrated with
SASS/Compass.

I'll probably convert it over and release the link on hacker news when ready.

* the stuff that's really cool is forms/modal/navbar/tips

~~~
subpixel
> I'll probably convert it over and release the link on hacker news when
> ready.

Awesome, looking forward.

------
artursapek
Wow nice, great to see them writing off outdated browsers.

~~~
zcrar70
not quite - twitter.com works fine in IE8 and IE7 (and even in IE6 - using the
mobile version), whereas this doesn't work in at all in any of those...

Twitter itself isn't giving up on old browsers; which makes me wonder how
interesting this would be to anyone else who wants to create a real-world site
for the general public (the general public still uses those browsers quite
widely)...

~~~
zcrar70
I didn't mean to denigrate the effort - it's a fantastic idea. I just meant to
say that anyone wanting to use this for a wider-public app will need to put
the extra effort in to make it work with the older IEs.

------
southpolesteve
Would love this if it used SASS

~~~
voidfiles
I think the biggested difference is just that variables are prefaced with @ in
sass, and & less. Also the mixin call syntax is different.

~~~
chriseppstein
Sass uses $ for variables, less uses @. For more differences:
<https://gist.github.com/674726>

------
ricardobeat
Looks very well made, I'm using it next week already for a small project :)

The IE incompatibility is a shame, this could be a nice poster for progressive
enhancement.

~~~
spiralganglion
It's so well made, you can already be using it in the future, in the present.

Forget making it work with IE8 and older. I want to see it working in IE11.
(Insert your own Spinal Tap jokes here).

------
jemeshsu
Is the site <http://twitter.github.com/bootstrap/> using Bootstrap? When view
on iPhone, there is a thin white margin for the right border. This white
border stays even if you double tap on the screen, which normally means the
site will expand to fill.

------
kbj
I tried integrating this with the html5-boilerplate project as that might
improve the cross-browser compatibility. It seems doable. Most tweaks seems to
be related to the css reset part as they differ a lot. (Newest h5bp uses
normalize.css vs Eric Meyer CSS reset.)

------
mvts
Thank you so much for that framework. I just started implementing it in my
latest app. Looks great! I'm struggling a bit with the modals implementation,
but I'll get it to work.

------
mark242
This is fantastic. Google created a stylesheet like this once, a while ago,
that was extremely lacking when it came to real-world actions and layout. This
is incredible.

------
voidfiles
Why less, why not sass?

~~~
mdo
We preferred Less over Sass because of it's ability to compile via JS, Mac
app, or node. At the time, I believe Sass was not able to via JS.

Other than that, personal preference.

~~~
jemeshsu
I too preferred Less over Sass. Thanks for open sourcing this great kit.

------
ubi
As a solid developer who lacks real design skill I thank you guys for building
this. Having a clean looking app is key when showing off new ideas.

------
alexis-d
I'm always happy when I see a big company releasing really nice stuff as free
software, and that's the case. Congrats Twitter!

------
dmmalam
Would love a stylus version to use with nodejs

------
krsgoss
Nice work and thanks for contributing. Look forward to trying this out on a
future project I'm working on.

------
Tichy
What I don't get is why browsers don't come with good looking typography
settings by default.

------
tcderek
I really like Bootstrap as a tool to create a MVP. Will definitely be using it
soon!

------
brackin
I love this, good on Twitter for realising this. Making the web more
beautiful.

------
schiptsov
Why and how it is better than YUI? Because it is from Twitter? ^_^

------
jdelsman
Thanks, Twitter!

------
ChrisArchitect
wow, this is interesting. What a contribution.

------
methane
It's such a bless for programmers.

------
harrisreynolds
This looks very cool... we need richer frameworks to standardized web dev!

