Building Twitter Bootstrap(alistapart.com)

83 pointsby pawannitjvor 13 Jahren25 comments

http://alistapart.com/article/building-twitter-bootstrap

26 comments

Bootstrap attaining its current level of traction is quite remarkable and a blessing to the web.

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.

manishsharanvor 13 Jahren

I like Bootstrap but I found it hard to do customized layouts with Bootstrap. This was an issue when I tried to create custom widgets.

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.

pc86vor 13 Jahren

It should be noted that this article is over a year old and is referring to Bootstrap 1.0

ChrisArchitectvor 13 Jahren

goddamn, thanks. +1

ricardobeatvor 13 Jahren

It's funny how the frameworks that came before (skeleton, ZURB, 960gs, etc) are always forgotten. IMO two things made bootstrap successful: 1) the Twitter brand 2) colorful CSS3 buttons

ssharpvor 13 Jahren

I was fairly "loyal" to 960gs, but when Bootstrapped was released, I switched right away. Bootstrap was responsive, which was a huge selling point, and contained a few components and javascript features, which were nice to have all bundled up in one package.

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.

lelandbateyvor 13 Jahren

I think the excellent documentation is one of the biggest things that's contributed to the success of bootstrap. As someone who started using bootstrap after literally having no experience with CSS/HTML/JS, the absolutely fantastic documentation means I have used bootstrap over everything else. It's very comprehensive, very approachable, and excellently designed :).

scott_wvor 13 Jahren

The reason Bootstrap became popular is because it's easy for a developer to see the value proposition.

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.

Kerrickvor 13 Jahren

Zurb Foundation has always had amazing documentation and near feature parity with Twitter Bootstrap, but continues to be largely ignored because @mdo and @fat aren't behind it.

http://foundation.zurb.com/

pc86vor 13 Jahren

Personally I think Foundation looks nicer than Bootstrap, but maybe that's because it's not as ubiquitous.

websitescenesvor 13 Jahren

Plus one for foundation. Bootstrap is a restrictive nightmare. I could see using bootstrap for a backend cms or something, but for front end development... Have fun

euroclydonvor 13 Jahren

Feature parity? When I visit that website, I don't see: buttons, wells, tables, alerts, form elements, nav, progress bars or modals. Those are all things I use from Bootstrap, and that I cannot find on Zurb's website. Maybe they are all there and I just don't know where to look.

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.

Kerrickvor 13 Jahren

ricardobeatvor 13 Jahren

You didn't try too hard, did you? http://foundation.zurb.com/docs/

If you visit Bootstrap's homepage (http://twitter.github.com/bootstrap/) you see even less features.

jakejakevor 13 Jahren

Perhaps neither he nor I tried hard, but I thought the exact same thing - that it was a grid layout system.

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.

ricardobeatvor 13 Jahren

The Foundation page is built using itself. There are four buttons above the fold (download, watch on gw, follow, navbar download).

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?

jakejakevor 13 Jahren

I'm glad somebody here posted the link to the docs page because the framework looks good. But calling people lazy - that's the type of attitude when you ask for user feedback and then argue with them that they're wrong.

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.

Kerrickvor 13 Jahren

You don't have to click three levels in before you learn about buttons, it's on the front page of the Documentation, one click away from the homepage. Seeing every single button available is only one more click.

[deleted]vor 13 Jahren

homosaurvor 13 Jahren

Out of curiosity, in what ways is Zurb superior to Bootstrap? I immediately see that they use Sass rather than Less. That's a smart move I appreciate. Anything else? Better licensing, browser support, toolset?

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.

joshuaccvor 13 Jahren

I'm a Zurb Foundation user, as well as a Bootstrap user and they both have their sweet spots. Bootstrap is great for internal tools and applications that don't need a ton of customization. Foundation on the other hand is extremely customizable based on tweaking some Sass variables.

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.

mgkimsalvor 13 Jahren

can't speak to zurb, but 960 and other 'grid' systems were just that - grid systems. I'd see "look at all the cool examples built on library X (960/whatever)", and then look and realize that it was a huge amount of customization on top of whatever base library was there to make anything look half decent.

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.

Fathervor 13 Jahren

Bootstrap was actually build on code from ZURB http://news.ycombinator.com/item?id=4590315 The competition between the two frameworks just benefits the end user as they compete to out do one another.

phinnaeusvor 13 Jahren

Incidentally, weren't the button gradients originally background-image based?

desireco42vor 13 Jahren

Bootstrap is awesome and popular but let's not forget other two frameworks Zurb Foundation and Skeleton, I've used all three, mostly Zurb lately and can say that you can't go wrong with any of them.

nicholassmithvor 13 Jahren

It should probably be noted this article is a year old, especially given the current discussion inside Bootstrap is about removing dropdowns as a core component.