Refreshing Your UI with HTML5,Bootstrap and CSS3HTML5 Denver April 22, 2013

Matt Raiblehttp://raibledesigns.com Photos by Trish McGinity

About Me

#HTML5Denver

Web Architecture Consultant

Java Community Professional

Father, Speaker, Beer Lover

What Keeps me busy

Contact Information

Skiing, Mountain Biking

The Bus

AppFuse

Raible Designs

www: http://raibledesigns.com

email: matt@raibledesigns.com

twitter: @mraible

2/96

Legacy DesignHave you worked with an outdated design?

My Experience

#HTML5Denver

December 2011

Page Speed Project

UI Refresh Project

Bootstrap

Legacy Browsers

4/96

Best Practices for Speeding Up Your Web Site

35 Total Rules → http://developer.yahoo.com/performance/rules.html

#HTML5Denver

Minimize HTTP Requests

Use a Content Delivery Network

Add an Expires or a Cache-Control Header

Gzip Components

Put Stylesheets at the Top

Put Scripts at the Bottom

Avoid CSS Expressions

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS

No 404s

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make Ajax Cacheable

Flush the Buffer Early

Use GET for AJAX Requests

Post-load Components

Split Components Across Domains

Optimize Images

Choose <link> over @import

Minimize the Number of iframes

5/96

Page Speed Project

#HTML5Denver

YSlow

Server Recommendations

Suggested Code Changes

Staging got a B

Production got an F

Enable Compression

Add Expires Headers

Optimizing Images (25% savings)

Reduce HTTP Requests

JavaScript at Bottom

Combining JavaScript Files

CSS Image Sprites

6/96

Tilt 3D

#HTML5Denver

https://addons.mozilla.org/en-us/firefox/addon/tilt/

7/96

UI Refresh Project

UI Refresh Spike

CSS Image Sprites

http://css-tricks.com/css-sprites/

Themes with LESS

#HTML5Denver

@link: #0087CC;@linkHover: #0087CC;

@border: #608FAF;

@navbarBackground: #D6E7F2;@navbarHover: #333333;@dropdownBackground: #EFF5F9;@dropdownHover: #D6E7F2;

@sidebarBackground: #EFF5F9;@headerDarkBackground: #C3EEB7;@headerMediumBackground: #D6F3CD;@headerLightBackground: #ffffff;

@iconLargeYPosition: -263px;@iconYPosition: -718px;

CSS

11/96

Themes with LESS: theme.less

#HTML5Denver

@import '@colors';

a { color: @link }

a:hover { color: @linkHover }

.navbar div > ul > li { border: 1px solid @border; background-color: @navbarBackground; border-top: 0;}

.navbar-inner { border-top: 1px solid @border;}

CSS

12/96

Themes with LESS: Ant

#HTML5Denver

<macrodef name="create-css"> <attribute name="theme"/> <sequential> <echo message="Compiling LESS files :: Creating '@{theme}' Theme"/> <copy description="Setup themes for processing" todir="${build}/themes"> <fileset dir="${basedir}/web/css/UIv9/themes" includes="@{theme}-colors.less"/> </copy> <concat destfile="${build}/themes/@{theme}.less" eol="dos" force="no"> <fileset dir="${basedir}/web/css/UIv9/themes"> <include name="@{theme}-colors.less"/> <include name="theme.less"/> </fileset> </concat> <replace file="${build}/themes/@{theme}.less" token="@import '@colors';" value=""/> <wro4j processor="lessCss" dir="${build}/themes" todir="${basedir}/web/css/UIv9" target-groups="@{theme}"/> <delete dir="${basedir}/web/css/UIv9" includes="**-colors.css"/> </sequential></macrodef>

XML

13/96

Themes with LESS: Ant

#HTML5Denver

<macrodef name="wro4j"> <attribute name="processor"/> <attribute name="wro-file" default="wro.xml"/> <attribute name="target-groups"/> <attribute name="dir"/> <attribute name="todir"/> <sequential> <exec executable="java" failonerror="true"> <arg value="-jar"/> <arg value="../common/lib-ext/wro4j-runner-1.4.4-jar-with-dependencies.jar"/> <arg value="--wroFile"/> <arg value="@{wro-file}"/> <arg value="--contextFolder"/> <arg value="@{dir}"/> <arg value="--targetGroups"/> <arg value="@{target-groups}"/> <arg value="--destinationFolder"/> <arg value="@{todir}"/> <arg value="-c"/> <arg value="@{processor}"/> </exec> </sequential> </macrodef>

XML

14/96

Themes with LESS: Customizer

#HTML5Denver 15/96

Browser Issues

#HTML5Denver

No rounded corners or gradients in legacy browsers

Used jQuery.IE9Gradius.js for IE9

Had to add class="checkbox" to all checkbox labels

Many, many IE7 Issues: created ie7.css file

Used { zoom: 1; position: relative } for negative top margins

Used table-layout: fixed so td widths would work

Used position: fixed to fix nav width

16/96

Web DevelopmentWe face a lot of challenges

Web Browsers

#HTML5Denver 18/96

#HTML5Denver 19/96

#HTML5Denver 20/96

#HTML5Denver 21/96

Today's Web Developer

#HTML5Denver

HTML5

Canvas / Semantics/ Storage / File Access / Audio / Video

CSS / 3

JavaScript

Server Side Languages

DBMS

NOSQL Databases

LESS / Sass / @font-face / Border Radius / Box Shadow

jQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScript

ColdFusion / Java / Groovy / PHP / Python / .NET / Ruby

Oracle / SQL Server / MySQL / PostgreSQL

Cassandra / MongoDB / CouchDB / Amazon Simple DB

22/96

Mobile Traffic will outnumber desktop by 2014

#HTML5Denver 24/96

Mobile OS

#HTML5Denver 25/96

Mobile Screen Resolutions

#HTML5Denver 26/96

Designing a different interface for every

device is impossible.

“

”

BootstrapThe answer to our problems.

What is Bootstrap?

#HTML5Denver

Components

JavaScript Plugins

Dozens of reusable components

Dropdowns

Navbar

Breadcrumbs

Alerts

Progress Bars

13 plugins

Modal Dialog Windows

Tabs

Typeahead

Carousel

Scaffolding

Base CSS

Layouts

Grid System

Fluid Grid System

Responsive Design

Typography

Tables

Forms

Buttons

Icons

30/96

Reasons To Love Bootstrap

#HTML5Denver

For all skill levels

Documentation

Cross Everything

Lightweight

Responsive Design

13 JavaScript plugins

Open Source

Built on LESS

31/96

History of Bootstrap

#HTML5Denver

Early Days of Twitter

Releases

Popularity

Mark Otto

Jacob Thornton

v 1.0 - 08/19/2011

v 2.0 - 01/31/2012

v 2.1.1 - 09/04/2012

v 2.3.1 - 03/01/2013

@twbootstrap 58.5K Followers

GitHub Stats

48K Watchers

14K Forks

32/96

Getting StartedOverview of the project, its contents, and how to get started with asimple template.

Getting Started

#HTML5Denver

Downloading Bootstrap

Requirements

Starter Templates

Source

Ready To Go

Customize

HTML5 Doctype

Include bootstrap.css

Basic marketing site

Fluid layout

Starter template

More templates...

34/96

ScaffoldingBootstrap is built on responsive 12-column grids, layouts, andcomponents.

Layouts: Fixed Layout

#HTML5Denver

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

HTML

36/96

Layouts: Fluid Layout

#HTML5Denver

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

HTML

37/96

Grid System

#HTML5Denver

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>

HTML

38/96

Fluid Grid System

#HTML5Denver

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

HTML

39/96

Responsive Design

#HTML5Denver

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

40/96

Responsive Design

#HTML5Denver

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

HTML

41/96

Demo Timehttp://localhost:8000/demos/responsive/

Base CSSFundamental HTML elements styled and enhanced with extensibleclasses.

Typography: Headings

#HTML5Denver

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

HTML

44/96

Typography: Body Copy

#HTML5Denver

<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, nisierat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metusauctor fringilla.</p>

HTML

45/96

Typography: Blockquote

#HTML5Denver

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

HTML

46/96

Typography: Emphasis classes

#HTML5Denver

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

HTML

47/96

Typography: Lists

#HTML5Denver

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

HTML

48/96

Tables: Default Style

#HTML5Denver

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

HTML

49/96

Tables: Striped

#HTML5Denver

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

HTML

50/96

Tables: Bordered

#HTML5Denver

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

HTML

51/96

Tables: Hover

#HTML5Denver

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

HTML

52/96

Tables: Condensed

#HTML5Denver

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

HTML

53/96

Tables: Optional Row Classes

#HTML5Denver 54/96

Forms

#HTML5Denver

Four Layouts

Form Controls

Look & Feel

Vertical (default)

Search

Inline

Horizontal

Input

Text Area

Checkboxes & Radio

Select

Relative Sizing (small/med/large/xlarge)

Grid Sizing (span1/span2/span3/etc)

55/96

Forms: Default Styles

#HTML5Denver

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

HTML

56/96

Forms: Horizontal

#HTML5Denver

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

HTML

57/96

Search Form

#HTML5Denver

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

HTML

58/96

Inline Form

#HTML5Denver

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

HTML

59/96

Form Controls: Relative Sizing

#HTML5Denver

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

HTML

60/96

Form Controls: Grid Sizing

#HTML5Denver

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

HTML

61/96

Buttons

#HTML5Denver 62/96

Images

#HTML5Denver

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

HTML

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

Image Placeholders http://placehold.it/

63/96

Icons

#HTML5Denver

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

HTML

Full List of 140 Icons http://twitter.github.com/bootstrap/base-css.html#icons

Compressed using ImageOptim http://imageoptim.com/

64/96

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

Components

#HTML5Denver

Dropdowns

Button groups

Button dropdowns

Navs

Navbar

Breadcrumbs

Pagination

Labels and badges

Typography

Thumbnails

Alerts

Progress bars

Misc

66/96

Components: Button Group

#HTML5Denver

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

HTML

67/96

Components: Button dropdown

#HTML5Denver

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

HTML

68/96

Components: Navbar

#HTML5Denver

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

HTML

69/96

Components: Tabs

#HTML5Denver

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

HTML

70/96

Components: Breadcrumbs

#HTML5Denver

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

HTML

71/96

Components: Pagination

#HTML5Denver

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

HTML

72/96

Components: Alerts

#HTML5Denver

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

HTML

73/96

JavaScript for BootstrapBring Bootstrap's components to life—now with 13 custom jQueryplugins.

JavaScript Plugins: Overview

#HTML5Denver

All plugins require the latest version of jQuery

What Plugins do you need?

Plugins

bootstrap.min.js (all)

https://github.com/twitter/bootstrap/tree/master/js

Transitions

Modal

Button / Dropdown

Tab

Tooltip / Popover

Alert

Collapse

Carousel

Typeahead

Scrollspy / Affix

75/96

You can use all Bootstrap plugins purely

through the markup API without writing

a single line of JavaScript.

“

”

JavaScript Plugins: Modals

#HTML5Denver 77/96

JavaScript Plugins: Modals

#HTML5Denver

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

HTML

78/96

JavaScript Plugins: Carousel

#HTML5Denver 79/96

JavaScript Plugins: Carousel

#HTML5Denver

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

HTML

80/96

JavaScript Plugins: Popover

#HTML5Denver 81/96

JavaScript Plugins: Popover

#HTML5Denver

<a href="#" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title"> Click to toggle popover</a>

HTML

See it in action http://twitter.github.com/bootstrap/javascript.html#popovers

82/96

LESSThe dynamic stylesheet language.

What is LESS?

#HTML5Denver

Maintainable CSS

Dynamic Behavior

Usage

Variables

Mixins

Nested Elements

Operations

Functions

Client Side

Server Side

84/96

LESS: Variables

#HTML5Denver 85/96

LESS: Mixins

#HTML5Denver 86/96

LESS: Nested

#HTML5Denver 87/96

Look & Feel

#HTML5Denver

Bootstrap Expo

Bootswatch

WrapBootstrap

jQuery UI theme

Font Awesome

http://expo.getbootstrap.com

http://bootswatch.com

https://wrapbootstrap.com

http://addyosmani.github.com/jquery-ui-bootstrap

http://fortawesome.github.com/Font-Awesome

88/96

Bootstrap 3

#HTML5Denver

Bootstrap 3 will be mobile-first

Overhaul CSS transitions and

reinforce with JavaScript transitions

as necessary

Dropping IE7 and FF3.6 support

Combining standard and responsive

CSS into a single file

rc.getbootstrap.com →github.com/twitter/bootstrap/pull/6342

89/96

SMACSS

Categorizing CSS rules allows us to see patterns and definebest practices around each pattern.

1. Base2. Layout3. Module4. State5. Theme

#HTML5Denver 90/96

SMACSS: Naming Rules

#HTML5Denver

http://smacss.com

Jonathan Snook @ HTML5 Denver: June 17, 2013!

91/96

UI Refresh Project, 1 Year Later

Mobile Improvements

#HTML5Denver

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width: 320px) and (max-device-width: 854px) { body.mainPage.click-thru { padding: 0; } }

/* iPad (portrait and landscape) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body.mainPage.click-thru { padding-top: 50px; } }

CSS

92/96

UI Refresh Project, 1 Year Later

JavaScript PDF Viewer / Editor

#HTML5Denver 93/96

UI Refresh Project, 1 Year Later

My Dashboard

#HTML5Denver

Charts and Widgets, Very Visual

Built With:

PDF Viewer: 200 lines HTML, 2300 lines of JavaScript

My Dashboard: 300 lines HTML, 466 lines of JavaScript

AngularJS

AngularUI

AngularUI Bootstrap

94/96

Resources

#HTML5Denver

My Presentations

Bootstrap

Similar Frameworks

LESS CSS

Google HTML5 Slides

Dan Vega's Bootstrap 2 Presentation

http://raibledesigns.com/rd/page/publications

GitHub Project and Google Group

Zurb Foundation and Compass

http://lesscss.org

http://code.google.com/p/io-2012-slides

https://github.com/cfaddict/bootstrap2

95/96

<Questions?>

twitter @mraiblewww raibledesigns.comgithub github.com/mraiblelinkedin linkedin.com/in/mraible