DIY Sous-Vide Controller

MAKE magazine

Typical Web Developer Cycle...

$sites = array( 'work', 'freelance', 'friend', 'personal', 'demo' );
foreach( $sites as $site ) {
	build('header');
	build('pages');
	build('footer');
	build('content');
	build('tables');
	build('nav');
	build('pages');
	// It goes on and on...
}

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

source: http://twitter.github.com/bootstrap/
Description
source: http://twitter.github.com/bootstrap/
That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I'm working on. And it shows through in the templating language I'm developing, so everyone who uses it will find it's "just there" and works, any time you want to do a Bootstrap technique. Nothing to do, no libraries to include. It's as if it were part of the hardware. Same approach that Apple took with the Mac OS in 1984.
Dave Winer
Developer of RSS

Getting Started

<!DOCTYPE html>
<html>
	<head>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="/css/bootstrap-responsive.css" rel="stylesheet">
		<title>Bootstrap 101 Template</title>
	</head>
	<body>
		<h1>Hello, world!</h1>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Since this is WordPress...


function make_enqueue_scriptsnstyles() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'make-bootstrap', 
			get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
	wp_enqueue_style( 'make-bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css' );
	wp_enqueue_style( 'make', get_stylesheet_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'make_enqueue_scriptsnstyles' );

Grid Layout

Description

Twelve Columns

source: http://twitter.github.com/bootstrap/

The Basic Layout

Let's imagine that we are building a normal page layout, content area on the left, sidebar on the right. The goal of Bootstrap is that you place spans that add up to twelve inside a <div class="row">


<div class="row">
  <div class="span8">...</div>
  <div class="span4">...</div>
</div>

Responsive Width

Let's get jiggy wit it...

Label Layout width Column width Gutter width
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths

CSS Media Queries

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Helper Classes

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Typography

It just looks real nice, right outta the box...

Block Quote Styling

Tables

It just looks real nice, right outta the box...

Block Quote Styling
Supported classes: .table-striped, .table-bordered, .table-condensed, .table-hover, .success, .error, .warning, .info

Forms

With ease, horizontal forms without tables...

Horizontal Form
Also all kinds of cools stuff like prepended content, like an @ sign like you might use for a Twitter username...

Buttons

Use the .btn class on an <a>, <button>, or <input> elements.

Horizontal Form

Icons by Glyphicons

Horizontal Form Horizontal Form

This is great Jake, but what does it all mean...

Components

Ford Focus Dual Clutch Transmission

Split-Button Dropdown Menus

Two all beef patties special sauce lettuce cheese pickles onions in a sesame seed bun...

Block Quote Styling

Tabbable Tabs

Two all beef patties special sauce lettuce cheese pickles onions in a sesame seed bun...

Block Quote Styling

Tabbable Tabs Example

<div class="tabbable">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#program" data-toggle="tab">Programmer Ryan Gosling</a></li>
		<li><a href="#xml" data-toggle="tab">XML Ryan Gosling</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="program">
			<img src="images/programmer.jpg">
		</div>
		<div class="tab-pane" id="xml">
			<img src="images/Goslingxml.jpeg">
		</div>
	</div>
</div>

Tabbable Tabs

Top, right, bottom, or left...

Block Quote Styling

Badges

Block Quote Styling

Pager

Block Quote Styling

Pager - WordPressified

<ul class="pager">
	<li class="previous">
		<?php previous_post_link('&larr; %link'); ?>
	</li>
	<li class="next">
		<?php next_post_link('&rarr; %link'); ?>
	</li>
</ul>

Modal Windows

Block Quote Styling

Modal Code


<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal" id="myModal">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Modal header</h3>
	</div>
	<div class="modal-body">
		<p>One fine body…</p>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn btn-primary">Save changes</a>
		<a href="#" class="btn" data-dismiss="modal">Close</a>
	</div>
</div>

Carousel

Block Quote Styling

Carousel Code


<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">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Carousels...

Bootstrap Carousel Slideshow

Who is using Bootstrap?

How To Get Started

<Thank You!>