Building Twitter Bootstrap
alistapart.com
alistapart.com
The idea is taking hold that a web designer doesn't have to build everything from scratch in order to still be a respectable designer. The advantages of drawing upon a standard collection of reusable constructs are becoming clear to designers and non-designers alike. I've likened Bootstrap to jQuery with its wide adoption and plugin ecosystem. We've already seen the Bootstrap community form around the project in a similar way.
Writing a layout from scratch is sort of like writing a program in assembly language. That's where I feel like we're still at. I imagine that at one point there were people opposed to high-level languages like C because they abstracted you away from the raw nit and grit. Though you still have to write HTML and CSS with Bootstrap (especially if you want to customize the look), you are abstracted away from the tedious boilerplate code.
There are other frameworks in this space but none have inspired so many people to change the way they tackle web design. I look forward to a future where more is accomplished on a shorter timeline, thanks to efforts like this project.
I consider myself to be CSS illiterate; writing Less mixins from scratch was never an option for me.
Then I tried ZURB Foundation . And what I liked about Zurb was its "infrastructure "of SaSS and Compass. I found there is a very vibrant support ecosystem around Sass. There is of-course the Compass, Compass.app , Compass recipes,bourbon-compass, Sassy buttons and more; a lot of useful Sass mixins be found by Google search . I have found Zurb Foundation's SaSS codebase can seamlessly coexist with those other mixins , which allows me to focus on my java /javascript code knowing that the layout will be compatible. I like never having to writ a mixin from scratch; Zurb/sass allows me ti include mixins and merely customize parameters.
Zurb may not ship with as many widgets as Bootstrap but once I learned how to layout and style a panel with Zurb and sass, writing javascript code to add behaviors and methods to the panel is almost easy.
On the downside of Zurb, there does not seem to be any themes marketplace like those for Bootstrap.
Bootstrap's documentation was another big advantage. It's a larger library than pervious grid systems but it's modular structure and excellent documentation lets you get started easily, while adding in deeper features with little friction or confusion. I also think Bootstrap's roadmap looks positive, as it is placing a larger focus on making quality mobile experiences as simple as possible.
I spent a little time looking into other systems such as 960gs and could never figure out what to do with them.
With Bootstrap, it's obvious. The website clearly shows you how to get and use it. For someone who isn't a designer, it's easy to get up and running.
I have no idea who @fat and @mdo are, but their lack of being behind Zurb is certainly not the reason I haven't used it. The reason I don't use Zurb is, that every time I've seen someone mention it on HN, I visit it and see nothing but a grid.
Wells: http://foundation.zurb.com/docs/elements.php#panels
Tables: http://foundation.zurb.com/docs/elements.php#table
Alerts: http://foundation.zurb.com/docs/elements.php#alerts
Form elements: http://foundation.zurb.com/docs/forms.php
Nav: http://foundation.zurb.com/docs/navigation.php
Progress bars: http://foundation.zurb.com/docs/elements.php#progress-bar
Modals: http://foundation.zurb.com/docs/reveal.php
As for where to look, consider that http://foundation.zurb.com is their project site, not their documentation site. For the documentation, look at http://foundation.zurb.com/docs or click the Docs link instead.
If you visit Bootstrap's homepage (http://twitter.github.com/bootstrap/) you see even less features.
I looked at all the first level pages and saw lots and lots of previews of grids, but nothing else. I only saw the other component because of your link here. Having to click in three levels before you see a screenshot if a button is perhaps misleading people into thinking there isn't as much there.
In fact that's more than Bootstrap shows you. If you discount the big download button in the home page, you have to guess it's in 'Base CSS' (not Components) and navigate a few miles down.
Anyway, all this rationalization on why everyone uses bootstrap is also funny. Who could imagine a CSS framework would get people so defensive?
Look at the home page as a casual browser would. The first page has tons of screenshots... of grids. Click on "Features"... more grids. Click on "Add Ons"... more grids. Click on "Docs"... no screenshots! If I'm just casually glancing around, I feel like hitting every 1st level page is fair. All I saw was grids. Why would anybody be confused that a visitor might think this is a CSS layout/grid framework?
Perhaps bootstrap cheats by putting their components onto one long scrolling page, but it does get 1st level nav and I see what it's about pretty quickly.
I think it looks great but I'd also like to have a good reason to suggest to a developer whether to use one or the other.
I suspect this comes out of their respective origins. Twitter was building internal tools, while Zurb is an agency which builds a lot of different externally facing sites.
This also means that Bootstrap is an easier fit for a lot of HN readers.
Bootstrap looked good out of the box, and had decent styling for all major situations (including tables). 960 and other grid systems gave you just one small part, not an entire framework.