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.

Transcript

1. Bootstrap
   Twitter Front-end Summit
   September 27, 2011
   

   View Slide

2. 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.
   

   View Slide

3. What is it
   Stats
   Why we made it
   What’s awesome about it
   How to use it
   Future plans
   Let’s talk about
   Bootstrap.
   

   View Slide

4. 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?
   

   View Slide

5. 7,100+ watchers
   5th most-watched GitHub repo
   1,000+ forks
   418,000+ page views (since mid August)
   250+ issues closed
   Stats
   

   View Slide

6. Bootstrap was created
   to solve a real problem.
   Our tools didn’t look or
   behave consistently and
   were difficult to develop.
   

   View Slide

7. What about using those
   other feature-complete
   toolkits out there?
   

   View Slide

8. Turns out many toolkits
   are built to provide value
   at only the base level:
   scaffolding.
   

   View Slide

9. Others have a different
   problem: no visibility
   into exactly what the
   toolkit provides.
   

   View Slide

10. So Bootstrap was born
    as a fresh take on an
    existing idea.
    Build a toolkit based on
    a complete styleguide.
    

    View Slide

11. View Slide

12. But, doesn’t that look
    like those other toolkits?
    Well, let’s look again...
    

    View Slide

13. View Slide

14. So, in what ways does
    Bootstrap stand out?
    Well, to name a few...
    

    View Slide

15. 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
    

    View Slide

16. // 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
    

    View Slide

17. .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
    

    View Slide

18. 16 column grid (support up to 24)
    Customizable variables via LESS
    @gridColumns: 16;
    @gridColumnWidth: 40px;
    @gridGutterWidth: 20px;
    1
    2
    3
    Includes flexible grid system
    

    View Slide

19. Awesome documentation
    

    View Slide

20. 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
    

    View Slide

21. But what's a great
    framework without ease
    of use in the real world?
    

    View Slide

22. 
    
    1
    2
    Hotlink like a boss
    
    rel="stylesheet">
    
    1
    2
    3
    Download and use locally
    

    View Slide

23. 
    
    
    
    1
    2
    3
    Compile Less in the browser
    Compile via Node or Terminal
    npm install less
    make
    $
    $
    lessc ./lib/bootstrap.less > bootstrap.css
    $
    

    View Slide

24. Sounds great.
    What’s coming next?
    

    View Slide

25. 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!
    

    View Slide

26. twitter.github.com/bootstrap
    Find us online:
    twitter.com/mdo
    twitter.com/fat
    twitter.com/TwBootstrap
    github.com/twitter/bootstrap
    Thanks!
    

    View Slide