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
Tweet

More Decks by Mark Otto

Other Decks in Design

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