Bootstrap Twitter Front-end Summit September 27, 2011

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.

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

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?

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

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

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

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

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

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

No content

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

No content

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

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

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

.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

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

Awesome documentation

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

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

1 2 Hotlink like a boss 1 2 3 Download and use locally

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

Sounds great. What’s coming next?

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!

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