Bootstrap tutorial

BootstrapTwitter Front-end SummitSeptember 27, 2011

Wednesday, September 28, 2011

Designer at Twitter since 2010

Love HTML and CSS

Been at it for 10+ years

Find me online:twitter.com/mdogithub.com/markdotto

Oh hai, I’m Otto.


Stats

What is it

Why we made it

What’s awesome about it

How to use it

Future plans

Let’s talk aboutBootstrap.


7,000+ watchers

1,000+ forks

418,500+ page views (since mid August)

250+ issues closed

Stats


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

What is it?


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.



But, that’s looking like the other toolkits.Well, let’s look again...




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


A boatload of design patternsScaffoldingGrid systemFixed-width layoutFluid-width layout

TypographyHeadingsBody textBlockquotesListsCodeInline labels

Misc componentsMedia thumbnailsTablesFormsButtons

NavigationFixed topbarTab navPill navBreadcrumbsPagination

AlertsBasic alert messagesBlock messages

DialogsModalsPopoversTooltips


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

1234567891011121314

Made with variables in Less


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

1234567891011121314

Reusable mixins via Less


16 column grid (support up to 24)

Customizable variables via LESS

@gridColumns: 16;@gridColumnWidth: 40px;@gridGutterWidth: 20px;

123

Includes flexible grid system


Awesome documentation


Included plugins...ModalsPopoversAlert messagesDropdown menusScrollspy for navTabbed contentTwipsy 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?


<link href="http://twitter.github.com/bootstrap/1.3.0/

bootstrap.min.css" rel="stylesheet">

12

Hotlink like a boss

<link href="css/bootstrap/1.3.0/bootstrap.min.css"

rel="stylesheet"><link href="css/yours/style.css" rel="stylesheet">

12

3

Download and use locally


<link href="path/to/bootstrap.less" rel="stylesheet/less"><script src="path/to/less.js"/></script>

12

3

Compile Less in the browser

Compile via Node or Terminalnpm install lessmake

$$

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/TwBootstraptwitter.com/mdotwitter.com/fatgithub.com/twitter/bootstrap

Thanks!

Technology

Bootstrap tutorial