Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bootstrap, from Twitter

Mark Otto
September 28, 2011

Bootstrap, from Twitter

An introduction to and overview of Bootstrap from Twitter, the open-source front-end toolkit built and designed as a styleguide. Originally shown during the Twitter Front-end Summit on September 27, 2011.

Mark Otto

September 28, 2011

More Decks by Mark Otto

Other Decks in Design


  1. Designer at Twitter since 2010 Love HTML and CSS Been

    at it for 10+ years Find me online: twitter.com/mdo github.com/markdotto Oh hai, I’m Otto.
  2. What is it Stats Why we made it What’s awesome

    about it How to use it Future plans Let’s talk about Bootstrap.
  3. Open-source frontend toolkit HTML, CSS, and now JS Tons of

    design components Supported in IE7 and up Super small footprint (CSS is ~7kb) Designed as a styleguide first Built on Less CSS What is it?
  4. 7,100+ watchers 5th most-watched GitHub repo 1,000+ forks 418,000+ page

    views (since mid August) 250+ issues closed Stats
  5. Bootstrap was created to solve a real problem. Our tools

    didn’t look or behave consistently and were difficult to develop.
  6. Turns out many toolkits are built to provide value at

    only the base level: scaffolding.
  7. So Bootstrap was born as a fresh take on an

    existing idea. Build a toolkit based on a complete styleguide.
  8. Tons of design components Scaffolding Grid system Fixed-width layout Fluid-width

    layout Typography Headings Body text Blockquotes Lists Code Inline labels Misc components Media thumbnails Tables Forms Buttons Navigation Fixed topbar Tab nav Pill nav Breadcrumbs Pagination Alerts Basic alert messages Block messages Dialogs Modals Popovers Tooltips
  9. // Links @linkColor: #0069d6; @linkColorHover: darken(@linkColor, 15); // Grays @black:

    #000; @grayDark: lighten(@black, 25%); @gray: lighten(@black, 50%); @grayLight: lighten(@black, 75%); @white: #fff; // Baseline grid @basefont: 13px; @baseline: 18px; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Customizable variables with Less
  10. .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }

    .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: @size; font-weight: @weight; line-height: @lineHeight; } .module { .border-radius(); .sans-serif(bold, 18px, 24px); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Reusable mixins with Less
  11. 16 column grid (support up to 24) Customizable variables via

    LESS @gridColumns: 16; @gridColumnWidth: 40px; @gridGutterWidth: 20px; 1 2 3 Includes flexible grid system
  12. Included plugins... Modals Popovers Alert messages Dropdown menus Scrollspy for

    nav Tabbed content Twipsy tooltips Compatible with jQuery and Ender Comes with extensive docs and examples New javascript plugins
  13. <!-- Le styles --> <link href="http://twitter.github.com/bootstrap/1.3.0/ bootstrap.min.css" rel="stylesheet"> 1 2

    Hotlink like a boss <!-- Le styles --> <link href="css/bootstrap/1.3.0/bootstrap.min.css" rel="stylesheet"> <link href="css/yours/style.css" rel="stylesheet"> 1 2 3 Download and use locally
  14. <!-- Le styles --> <link href="path/to/bootstrap.less" rel="stylesheet/less"> <!-- Le javascripts

    --> <script src="path/to/less.js"/></script> 1 2 3 Compile Less in the browser Compile via Node or Terminal npm install less make $ $ lessc ./lib/bootstrap.less > bootstrap.css $
  15. More HTML5 elements Additional table styles Media queries Sidebar nav

    for fluid layout Fullscreen layout Growl style alerts Rounded buttons Module components Additional blockquote styles HTML5 forms Alternate topbar styles for fixed or relative display Custom skins Toggle buttons Fluid grid system Font-face mixins On our roadmap Anything else? File an issue on GitHub!