Bootstrap

Twitter Front-end Summit September 27, 2011

Wednesday, September 28, 2011

Oh hai, Im Otto.
Designer at Twitter since 2010 Love HTML and CSS Been at it for 10+ years
Find me online: twitter.com/mdo github.com/markdotto

Wednesday, September 28, 2011

Lets talk about Bootstrap.

Stats What is it Why we made it Whats awesome about it How to use it Future plans

Wednesday, September 28, 2011

Stats
7,000+ watchers 1,000+ forks 418,500+ page views (since mid August) 250+ issues closed

Wednesday, September 28, 2011

What is it?
Open-source frontend toolkit HTML, CSS, and now JS Super small footprint (CSS is ~7kb) Supported in IE7 and up Designed as a complete styleguide Boatload of design patterns Built on Less CSS

Wednesday, September 28, 2011

Bootstrap was created to solve a real problem. Our tools didnt look or behave consistently and were difcult to develop.
Wednesday, September 28, 2011

What about using those other feature complete toolkits out there?

Wednesday, September 28, 2011

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

Wednesday, September 28, 2011

Wednesday, September 28, 2011

Wednesday, September 28, 2011

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

Wednesday, September 28, 2011

Wednesday, September 28, 2011

Wednesday, September 28, 2011

So Bootstrap was born as a fresh take on an existing idea. Build a toolkit based on a complete styleguide.
Wednesday, September 28, 2011

Wednesday, September 28, 2011

But, thats looking like the other toolkits. Well, lets look again...

Wednesday, September 28, 2011

Wednesday, September 28, 2011

Wednesday, September 28, 2011

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

Wednesday, September 28, 2011

A boatload of design patterns

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

Wednesday, September 28, 2011

Made with variables in Less

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Links @linkColor: @linkColorHover: // Grays @black: @grayDark: @gray: @grayLight: @white: // Baseline grid @basefont: @baseline: #0069d6; darken(@linkColor, 15);

#000; lighten(@black, 25%); lighten(@black, 50%); lighten(@black, 75%); #fff;

13px; 18px;

Wednesday, September 28, 2011

Reusable mixins via Less

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Border Radius .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } // Font stacks .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; }

Wednesday, September 28, 2011

Includes exible grid system

16 column grid (support up to 24)

Customizable variables via LESS

1 2 3 @gridColumns: @gridColumnWidth: @gridGutterWidth: 16; 40px; 20px;

Wednesday, September 28, 2011

Awesome documentation

Wednesday, September 28, 2011

New javascript plugins

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

Wednesday, September 28, 2011

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

Wednesday, September 28, 2011

Hotlink like a boss

1 2 <!-- Le styles --> <link href="http://twitter.github.com/bootstrap/1.3.0/ bootstrap.min.css" rel="stylesheet">

Download and use locally

1 2 3 <!-- Le styles --> <link href="css/bootstrap/1.3.0/bootstrap.min.css" rel="stylesheet"> <link href="css/yours/style.css" rel="stylesheet">

Wednesday, September 28, 2011

Compile Less in the browser

1 2 3 <!-- Le styles --> <link href="path/to/bootstrap.less" rel="stylesheet/less"> <!-- Le javascripts --> <script src="path/to/less.js"/></script>

Compile via Node or Terminal

$ $ npm install less make

lessc ./lib/bootstrap.less > bootstrap.css

Wednesday, September 28, 2011

Sounds great. Whats coming next?

Wednesday, September 28, 2011

On our roadmap
More HTML5 elements Additional table styles Media queries Sidebar nav for uid layout Fullscreen layout Growl style alerts Rounded buttons Module components Additional blockquote styles Anything else? File an issue on GitHub! HTML5 forms Alternate topbar styles for xed or relative display Custom skins Toggle buttons Fluid grid system Font-face mixins

Wednesday, September 28, 2011

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

Wednesday, September 28, 2011