6 ms·

Building Twitter Bootstrap

83 points by pawannitj 14y ago

ricardobeat 14y ago
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
- ssharp 14y ago
  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.
  - lelandbatey 14y ago
    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_w 14y ago
  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.
  - Kerrick 14y ago
    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/ http://foundation.zurb.com/
    - pc86 14y ago
      Personally I think Foundation looks nicer than Bootstrap, but maybe that's because it's not as ubiquitous.
      - websitescenes 14y ago
        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
    - euroclydon 14y ago
      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.
      - ricardobeat 14y ago
        You didn't try too hard, did you? http://foundation.zurb.com/docs/ http://foundation.zurb.com/docs/ If you visit Bootstrap's homepage (http://twitter.github.com/bootstrap/ http://twitter.github.com/bootstrap/) you see even less features.
        jakejake 14y ago
        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.
- joshuacc 14y ago
  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.
- Father 14y ago
  Bootstrap was actually build on code from ZURB http://news.ycombinator.com/item?id=4590315 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.
- phinnaeus 14y ago
  Incidentally, weren't the button gradients originally background-image based?
- mgkimsal 14y ago
  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.
nicholassmith 14y ago
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.
coderdude 14y ago
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.
pc86 14y ago
It should be noted that this article is over a year old and is referring to Bootstrap 1.0
- ChrisArchitect 14y ago
  goddamn, thanks. +1
manishsharan 14y ago
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.
desireco42 14y ago
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.

83 points by pawannitj 14y ago

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

ssharp 14y ago
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.
- lelandbatey 14y ago
  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_w 14y ago
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.
- Kerrick 14y ago
  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/ http://foundation.zurb.com/
  - pc86 14y ago
    Personally I think Foundation looks nicer than Bootstrap, but maybe that's because it's not as ubiquitous.
    - websitescenes 14y ago
      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
  - euroclydon 14y ago
    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.
    - ricardobeat 14y ago
      You didn't try too hard, did you? http://foundation.zurb.com/docs/ http://foundation.zurb.com/docs/ If you visit Bootstrap's homepage (http://twitter.github.com/bootstrap/ http://twitter.github.com/bootstrap/) you see even less features.
      - jakejake 14y ago
        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.
joshuacc 14y ago
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.
Father 14y ago
Bootstrap was actually build on code from ZURB http://news.ycombinator.com/item?id=4590315 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.
phinnaeus 14y ago
Incidentally, weren't the button gradients originally background-image based?
mgkimsal 14y ago
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.

nicholassmith 14y ago

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.

coderdude 14y ago

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.

pc86 14y ago

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

ChrisArchitect 14y ago
goddamn, thanks. +1

manishsharan 14y ago

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.

desireco42 14y ago

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.