Twitter Bootstrap | Hacker News Reader

Twitter Bootstrap

twitter.github.com

1,047 pointsd0vs108 comments

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.

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.

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)

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.

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.

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.

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.

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

It sounds to me like substantial chunks of these projects could be automated, and that there might be a market for an internal-rails-tool-in-a-can type product.

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

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

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.

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.

It's as if you're proposing that your time has value, and that fungible commodities should be sourced based on expediency and price.

Utter crazy talk.

Thanks for the link. I'm working on some new internal functionality at work, and I too suck at design. The admin templates look fabulous, and $20 is WAY than an hour of my time! I thought Themeforest was only for Wordpress...

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.

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

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

that's embarrassing!

They have an open bug about it, it sounds like they'll work on it.

https://github.com/twitter/bootstrap/issues/15 Give some love to IE7-8

Fixed now fwiw! IE7+ supported! :D

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

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.

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

http://css3button.net/

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

I suppose many incompatibilities could be fixed simply with CSS3 PIE [1]. I've been using in a few projects now, and the results are very positive. It rarely happened that the end results was bad.

[1]http://css3pie.com/

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

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

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?

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?

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.

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.

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

This is ballin'. Thanks for the link!

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.

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.

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

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

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

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.

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.

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?

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

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.

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.

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.

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)

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

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.

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

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

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

https://github.com/twitter/bootstrap

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

https://github.com/kkdoo/bootstrap/tree/scss

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?

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

That's AWESOME. Thanks

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.

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

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

http://markdotto.com/bootstrap/

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

That's unfortunate.

Many internal tools use it.

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

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.

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?

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

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.

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.

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.

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

Point taken :)

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

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

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

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

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

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

Awesome, looking forward.

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

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

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.

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.

Would love this if it used SASS

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

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

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

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.

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

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.

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

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.

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.

Why less, why not sass?

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.

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

Cool, I like SASS because it has control structures.

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.

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

Would love a stylus version to use with nodejs

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

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

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

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

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

Thanks, Twitter!

wow, this is interesting. What a contribution.

It's such a bless for programmers.

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

Reply on news.ycombinator.com