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