Twitter Bootstrap

http://twitter.github.com/bootstrap/

by d0vs • 15 years ago

1047 108 15 years ago

twitter.github.com

akavlie2• 15 years ago

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

bretthopper• 15 years ago

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

http://markdotto.com/bootstrap/

gcampbell• 15 years ago

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

cachemoney• 15 years ago

Many internal tools use it.

ChrisArchitect• 15 years ago

wow, this is interesting. What a contribution.

seunghomattyang• 15 years ago

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?

frisco• 15 years ago

It's just a convention to make it easier to be consistent, simplify your markup, and make development easier. Having a grid with a few defined classes for fitting into that grid is much simpler than building each page from the ground up. They also act as a shortcut for screen resolution compatibility. See http://lessframework.com/ for an example (there are other frameworks, but Less is just the one I remember right now).

artursapek2• 15 years ago

Once you get into HTML and CSS you'll probably find that modular layouts are inescabaple, and with those naturally come grids. They allow you to swap out certain parts of your site and keep others consistent based on the content being displayed, and that just results in visual consistency.

SingAlong• 15 years ago

You might find this SmashingMagazine article useful http://www.smashingmagazine.com/2007/04/14/designing-with-gr...

I prefer using the semantic approach to writing CSS using mixins (both Compass and LessCSS have mixin support). That keeps the html markup clean and maintainable.

Also to note, LessCSS (used in Bootstrap) is different from Less Framework (http://lessframework.com/), which is a CSS grid framework.

ulisesroche• 15 years ago

The best resource on why and how to use grids is: http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

It's primarily used as an aid for visual layouts, but it took on the other useful qualities everyone else has listed as the grid frameworks got popular in the web.

blauwbilgorgel• 15 years ago

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.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• 15 years ago

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

artursapek2• 15 years ago

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

zcrar702• 15 years ago

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

zcrar702• 15 years ago

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.

mdo6• 15 years ago

We plan on supporting at least back to IE7. Some of the code was written to do so already, and we'll get there with the rest of it, hopefully with negligible code bloat.

wildmXranat• 15 years ago

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

nikcub• 15 years ago

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• 15 years ago

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.

Pewpewarrows• 15 years ago

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• 15 years ago

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• 15 years ago

This is ballin'. Thanks for the link!

kreek• 15 years ago

Very nice. I was just thinking the Twitter Bootstrap is great but I'd like something a little lower level. The grey palette is great for mocks too, thanks for the link.

krsgoss• 15 years ago

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

jhuckestein2• 15 years ago

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.

phillmv• 15 years ago

I don't know about that. It clearly borrows/follows their house style. Besides, what else would you call it? Bootstrap Boilerplate? Twitter Boilerplate? Eh.

mdo6• 15 years ago

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

jhuckestein2• 15 years ago

Point taken :)

trungonnews• 15 years ago

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

chengyinliu• 15 years ago

I'm actually curious about the hackathon toolkit, could you share what's in it?

benregn• 15 years ago

Also curious about the hackathon toolkit, what's in it?

alexis-d• 15 years ago

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

brackin• 15 years ago

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

akavlie2• 15 years ago

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• 15 years ago

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

paulirish2• 15 years ago

Screenshot in IE8 by @jdalton: http://cl.ly/3S1S1V3X282T0w3K3q1z

travisfischer• 15 years ago

That's disappointing. Someone needs to fork this and make it at least look reasonable in IE8 and preferably at least visible in IE7.

pragmagic• 15 years ago

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.

mrpollo• 15 years ago

IE6 isn't very good either, http://yfrog.com/h28bmvp but i get the feeling its better than IE7 and IE8 from the screenshots people post in here

mdo6• 15 years ago

Yup, we know we need to make that clearer, and fix the issues of IE8 and IE7. We'll get to that ASAP!

pbreit3• 15 years ago

Yes, please. And thank you. The reality is that IE8 (and probably IE7) are widely used and lack of support is a non-starter. And from what I've seen, some of the gaps looks reasonably fillable.

And to nit-pick, can you make the drop-downs a bit less fancy?

mark242• 15 years ago

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.

harrisreynolds• 15 years ago

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

pbreit3• 15 years ago

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?

mdo6• 15 years ago

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

ahmicro• 15 years ago

That's AWESOME. Thanks

southpolesteve• 15 years ago

Would love this if it used SASS

kidh0• 15 years ago

For sure, and doesn't seems to be that hard to convert into SASS... It's a great project to the weekend :)

voidfiles3• 15 years ago

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

chriseppstein• 15 years ago

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

bdesimone2• 15 years ago

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.

bdesimone2• 15 years ago

http://browsershots.org/http://twitter.github.com/bootstrap/

mdo6• 15 years ago

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

dfischer• 15 years ago

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• 15 years ago

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

Awesome, looking forward.

methane• 15 years ago

It's such a bless for programmers.

joeshaw• 15 years ago

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• 15 years ago

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.

voidfiles3• 15 years ago

Why less, why not sass?

mdo6• 15 years ago

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.

jemeshsu2• 15 years ago

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

voidfiles3• 15 years ago

Cool, I like SASS because it has control structures.

leek• 15 years ago

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

mhartl• 15 years ago

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

https://github.com/twitter/bootstrap

adam_albrecht• 15 years ago

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

tptacek3• 15 years ago

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• 15 years ago

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.

taylorbuley• 15 years ago

Blueprint has always been very good to me.

Here the I think the pain "removed from cross-browser CSS" is removed here, at least in part, because this doesn't work across browsers (check the IE8 screenshot @paulirish posted)

dangrossman• 15 years ago

I don't think that's true. Maybe you didn't see the reference to "admin themes". They're not normal website templates, they really are essentially the same as Bootstrap, collections of styles/images for menus, typography, forms, warnings/errors, tables and dialogs for use in applications.

tptacek3• 15 years ago

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.

ianthiel• 15 years ago

http://www.leandesigns.com/ is also a great tool, but this is a great gift to the larger community from Twitter, and for that we thank you.

Disclosure: I'm an adviser of sorts for Lean Designs

teyc• 15 years ago

Any Admin themes you'd recommend? Did you have to customize them?

pbreit3• 15 years ago

I'm gonna have to disagree here. First, something provided as free open source is significantly different than something non-free without a permissive license. For starters, there's an implication of improvement either by the original author or a forker. Second, something coming from Twitter developers includes a not insignificant amount of social validation. Third, I go to Themeforest and I can barely figure out where to begin. Finally, the themes I actually am able to find there mostly seem quite a bit "thicker" than what I would want to use to start a project.

tptacek3• 15 years ago

1. The only thing you can't do with the extended license, which costs a tiny fraction of what a comparable amount of webdev costs, is resell the theme on Themeforest.

2. Unless your customers are themselves webdevs (in which case, AAAAAAAAAARGH!), none of them care where you got your pixels.

3. Search for "admin" themes. I'm sure most of what's on Themeforest is terrible. Just look at the highly-rated admin themes. And use the parts you care about.

Or, you know, rebuild your own admin theme using Twitter Bootstrap as a starting point. Sure. I'd rather just spend, what is it, $25?, to get a fully fleshed out app as a starting point, but that's me.

jemeshsu2• 15 years ago

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.

Adkron• 15 years ago

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• 15 years ago

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

ricardobeat• 15 years ago

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• 15 years ago

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

jdelsman• 15 years ago

Thanks, Twitter!

katieben3• 15 years ago

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

rokhayakebe2• 15 years ago

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.

katieben3• 15 years ago

Yeah, I definitely am, though right now I'm thinking that's a good thing. I tend to take forever building/planning things and never launch.. the 1 x 52 project will get me in the mindset to actually launch, test concepts before spending too much time on anything, really make it an "M"VP. Are you posting your projects in a blog or somewhere I can follow?

katieben3• 15 years ago

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

SudarshanP• 15 years ago

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 ;-)!

Tichy• 15 years ago

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

mvts• 15 years ago

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.

tcderek• 15 years ago

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

dmmalam• 15 years ago

Would love a stylus version to use with nodejs

kbj• 15 years ago

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

schiptsov• 15 years ago

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

ubi• 15 years ago

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.

liedra• 15 years ago

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.

Twitter Bootstrap

Related Stories