About Me

  • Senior Developer at FirstComp
  • Manager Cleveland Adobe User Group
  • Adobe Community Professional
  • Technology Geek
  • What Keeps me busy
    • CrossFit / Running
    • Poker
    • Sports
  • Toys For Shots
  • Contact Information
    • www: http://www.danvega.org
    • email: danvega@gmail.com
    • twitter: @cfaddict






Web Development

We face a lot of challenges

Web Browsers



Today's Web Developer

  • HTML5
    • Canvas / Semantics/ Storage / File Access / Audio / Video
  • CSS / 3
    • LESS / Sass / @font-face / Border Radius / Box Shadow
  • JavaScript
    • jQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScript
  • Server Side Languages
    • ColdFusion / Java / Groovy / PHP / Python / .NET / Ruby
  • DBMS
    • Oracle / SQL Server / MySQL / Postgre SQL
  • NOSQL Databases
    • Cassandra / MongoDB / CouchDB / Amazon Simple DB

Mobile Traffic will outnumber desktop by 2014

Mobile OS

Mobile Screen Resolutions

Designing a different interface for every device is impossible.

Bootstrap 2.0

The answer to our problems.

What is Bootstrap

  • Scaffolding
    • Layouts
    • Grid System
    • Fluid Grid System
    • Responsive Design
  • Base CSS
    • Typography
    • Tables
    • Forms
    • Buttons
    • Icons


  • Components
    • Dozens of reusable components
    • Dropdowns
    • Navbar
    • Breadcrumbs
    • Alerts
    • Progress Bars
  • JavaScript Plugins
    • 13 plugins
    • Modal Dialog Windows
    • Tabs
    • Typeahead
    • Carousel

Reasons To Love Bootstrap

  • For all skill levels
  • Documentation
  • Cross Everything
  • Lightweight
  • Responsive Design
  • Custom jQuery plugins
  • Open Source
  • Built on LESS

History of Bootstrap

  • Early Days of Twitter
    • Mark Otto
    • Jacob Thornton
  • Releases
    • v 1.0 - 08/19/2011
    • v 2.0 - 01/31/2012
    • v 2.1.1 - 09/04/2012
  • Popularity
    • @twbootstrap 38.6K Followers
    • github Stats
      • 39K Watchers
      • 9K Forks

Getting Started

Overview of the project, its contents, and how to get started with a simple template.

Getting Started

  • Downloading Bootstrap
    • Source
    • Ready To Go
    • Customize
  • Requirements
    • HTML5 Doctype
    • Include Boostrap.css
  • Starter Templates
    • Basic marketing site
    • Fluid layout
    • Starter template

Demo Time

http://twitter.github.com/bootstrap/index.html

Scaffolding

Bootstrap is built on responsive 12-column grids, layouts, and components.

Layouts: Fixed Layout

<body>
  <div class="container">
    ...
  </div>
</body>

Layouts: Fluid Layout

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
    </div>
    <div class="span10">
    </div>
  </div>
</div>

Grid System



  • Bootstrap grid system is 12 columns / 940px
  • Grid adapts to be 724px and 1170px wide depending on your viewport.
  • Below 767px viewports, the columns become fluid and stack vertically.
<div class="row">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>

Fluid Grid System

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>
<div class="row-fluid">
    <div class="span6">...</div>
    <div class="span6">...</div>
</div>
<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>

Responsive Design

  • Media Queries
  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Responsive Design

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap: Getting Started</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" >
</head>
<body>

<h1>Responsive Bootstrap</h1>

</body>
</html>

Demo Time

http://localhost/bootstrap2/demos/responsive/

Base CSS

Fundamental HTML elements styled and enhanced with extensible classes.

Typography: Headings

<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

Typography: Body Copy

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus
auctor fringilla.</p>

Typography: Blockquote

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Typography: Emphasis classes

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Typography: Lists

<ul>
<li>Lorem ipsum dolor sit amet</li>
...
</ul>

Tables: Default Style

<table class="table">
…
</table>

Tables: Striped

<table class="table table-striped">
…
</table>

Tables: Bordered

<table class="table table-bordered">
…
</table>

Tables: Hover

<table class="table table-hover">
…
</table>

Tables: Condensed

<table class="table table-condensed">
…
</table>

Tables: Optional Row Classes

Forms

  • Four Layouts
    • Vertical (default)
    • Search
    • Inline
    • Horizontal
  • Form Controls
    • Input
    • Text Area
    • Checkboxes & Radio
    • Select
  • Look & Feel
    • Relative Sizing (small/med/large/xlarge)
    • Grid Sizing (span1/span2/span3/etc)
 

Forms: Default Styles

<form>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
        <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
</form>

Forms: Horizontal

<form class="form-horizontal">
    <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
    </div>
    ...
</form>

Search Form

<form class="form-search">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
</form>

Inline Form

<form class="form-inline">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
    <label class="checkbox">
        <input type="checkbox"> Remember me
    </label>
    <button type="submit" class="btn">Sign in</button>
</form>

Form Controls: Relative Sizing

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Form Controls: Grid Sizing

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1"></select>
<select class="span2"></select>
<select class="span3"></select>

Buttons

Images

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">


.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Image Placeholders http://placehold.it/

Icons

<i class="icon-search"></i>
<i class="icon-search icon-white"></i>

<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">

Components

Dozens of reusable components built to provide navigation, alerts, popovers, and more.

Components

  • Dropdowns
  • Button groups
  • Button dropdowns
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Labels and badges
  • Typography
  • Thumbnails
  • Alerts
  • Progress bars
  • Misc

Components: Button Group

<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
</div>

Components: Button dropdown

<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
</a>
<ul class="dropdown-menu">
    <!-- dropdown menu links -->
</ul>
</div>

Components: Navbar

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>     

Components: Tabs

<ul class="nav nav-tabs">
<li class="active">
    <a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>

Components: Breadcrumbs

<ul class="breadcrumb">
    <li><a href="#">Home</a> <span class="divider">/</span></li>
    <li><a href="#">Library</a> <span class="divider">/</span></li>
    <li class="active">Data</li>
</ul>

Components: Pagination

<div class="pagination">
    <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</div>

Components: Alerts

<div class="alert alert-success">
</div>

JavaScript for Bootstrap

Bring Bootstrap's components to life—now with 13 custom jQuery plugins.

JavaScript Plugins: Overview

  • All plugins require the latest version of jQuery
  • What Plugins do you need?
  • Plugins
    • Transitions
    • Modal
    • Button / Dropdown
    • Tab
    • Tooltip / Popover
    • Alert
    • Collapse
    • Carousel
    • Typeahead
    • Scrollspy / Affix
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript.

JavaScript Plugins: Modals

JavaScript Plugins: Modals

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

JavaScript Plugins: Carousel

JavaScript Plugins: Carousel

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">…</div>
        <div class="item">…</div>
        <div class="item">…</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

JavaScript Plugins: Popover

JavaScript Plugins: Popover

LESS

The dynamic stylesheet language.

What is LESS?

  • Maintainable CSS
  • Dynamic Behavior
    • Variables
    • Mixins
    • Nested Elements
    • Operations
    • Functions
  • Usage
    • Client Side
    • Server Side

LESS: Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

LESS: Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.

LESS: Nested

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

Look & Feel

Resources

<Thank You!>

Please feel free to ask any questions.