Refreshing Your UI with HTML5, Bootstrap and CSS3

Refreshing Your UI with HTML5,
Bootstrap and CSS3
HTML5Denver April 22,2013
Matt Raible
http://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 Design
Haveyou 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

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}
.navbardiv>ul>li{
border:1pxsolid@border;
background-color:@navbarBackground;
border-top:0;
}
.navbar-inner{
border-top:1pxsolid@border;
}
CSS
12/96

Themes with LESS: Ant
#HTML5Denver
<macrodefname="create-css">
<attributename="theme"/>
<sequential>
<echomessage="CompilingLESSfiles::Creating'@{theme}'Theme"/>
<copydescription="Setupthemesforprocessing"todir="${build}/themes">
<filesetdir="${basedir}/web/css/UIv9/themes"includes="@{theme}-colors.less"/>
</copy>
<concatdestfile="${build}/themes/@{theme}.less"eol="dos"force="no">
<filesetdir="${basedir}/web/css/UIv9/themes">
<includename="@{theme}-colors.less"/>
<includename="theme.less"/>
</fileset>
</concat>
<replacefile="${build}/themes/@{theme}.less"token="@import'@colors';"value=""/>
<wro4jprocessor="lessCss"dir="${build}/themes"todir="${basedir}/web/css/UIv9"
target-groups="@{theme}"/>
<deletedir="${basedir}/web/css/UIv9"includes="**-colors.css"/>
</sequential>
</macrodef>
XML
13/96

Themes with LESS: Ant
#HTML5Denver
<macrodefname="wro4j">
<attributename="processor"/>
<attributename="wro-file"default="wro.xml"/>
<attributename="target-groups"/>
<attributename="dir"/>
<attributename="todir"/>
<sequential>
<execexecutable="java"failonerror="true">
<argvalue="-jar"/>
<argvalue="../common/lib-ext/wro4j-runner-1.4.4-jar-with-dependencies.jar"/>
<argvalue="--wroFile"/>
<argvalue="@{wro-file}"/>
<argvalue="--contextFolder"/>
<argvalue="@{dir}"/>
<argvalue="--targetGroups"/>
<argvalue="@{target-groups}"/>
<argvalue="--destinationFolder"/>
<argvalue="@{todir}"/>
<argvalue="-c"/>
<argvalue="@{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: fixedso td widths would work
Used position: fixedto fix nav width
16/96

Web Development
Wefacealotof challenges

Web Browsers
#HTML5Denver 18/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

Refreshing Your UI with HTML5, Bootstrap and CSS3

Mobile Traffic will outnumber desktop by 2014
#HTML5Denver 24/96

Mobile Screen Resolutions
#HTML5Denver 26/96

Designing a different interface for every
device is impossible.
“
”

Bootstrap
Theanswer 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 Started
Overviewof theproject,itscontents,and howto getstarted with a
simpletemplate.

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

Scaffolding
Bootstrap isbuilton responsive12-column grids,layouts,and
components.

Layouts: Fixed Layout
#HTML5Denver
<body>
<divclass="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>
HTML
38/96

Fluid Grid System
#HTML5Denver
<divclass="row-fluid">
<divclass="span4">...</div>
</div>
</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
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Bootstrap:GettingStarted</title>
<linkrel="stylesheet"type="text/css"href="bootstrap/css/bootstrap.min.css">
<linkrel="stylesheet"type="text/css"href="assets/css/bootstrap-responsive.css">
</head>
<body>
<h1>ResponsiveBootstrap</h1>
</body>
</html>
HTML
41/96

Demo Time
http://localhost:8000/demos/responsive/

Base CSS
Fundamental HTML elementsstyled and enhanced with extensible
classes.

Typography: Headings
#HTML5Denver
<h1>h1.Heading1</h1>
HTML
44/96

Typography: Body Copy
#HTML5Denver
<p>Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.
Donecullamcorpernullanonmetusauctorfringilla.Duismollis,estnoncommodoluctus,nisi
eratporttitorligula,egetlaciniaodiosemnecelit.Donecullamcorpernullanonmetus
auctorfringilla.</p>
HTML
45/96

Typography: Blockquote
#HTML5Denver
<blockquote>
<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.</p>
<small>Someonefamous<citetitle="SourceTitle">SourceTitle</cite></small>
</blockquote>
HTML
46/96

Typography: Emphasis classes
#HTML5Denver
<pclass="muted">Fuscedapibus,tellusaccursuscommodo,tortormaurisnibh.</p>
<pclass="text-warning">Etiamportasemmalesuadamagnamolliseuismod.</p>
<pclass="text-error">Donecullamcorpernullanonmetusauctorfringilla.</p>
<pclass="text-info">Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatis.</p>
<pclass="text-success">Duismollis,estnoncommodoluctus,nisieratporttitorligula.</p>
HTML
47/96

Typography: Lists
#HTML5Denver
<ul>
<li>Loremipsumdolorsitamet</li>
...
</ul>
HTML
48/96

Tables: Default Style
#HTML5Denver
<tableclass="table">
…
</table>
HTML
49/96

Tables: Striped
#HTML5Denver
<tableclass="tabletable-striped">
…
</table>
HTML
50/96

Tables: Bordered
#HTML5Denver
<tableclass="tabletable-bordered">
…
</table>
HTML
51/96

Tables: Hover
#HTML5Denver
<tableclass="tabletable-hover">
…
</table>
HTML
52/96

Tables: Condensed
#HTML5Denver
<tableclass="tabletable-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
<formclass="form-search">
<inputtype="text"class="input-mediumsearch-query">
<buttontype="submit"class="btn">Search</button>
</form>
HTML
58/96

Inline Form
#HTML5Denver
<formclass="form-inline">
<inputtype="text"class="input-small"placeholder="Email">
<inputtype="password"class="input-small"placeholder="Password">
<labelclass="checkbox">
<inputtype="checkbox">Rememberme
</label>
<buttontype="submit"class="btn">Signin</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">
<select class="span1"></select>
HTML
61/96

Images
#HTML5Denver
<imgsrc="..."class="img-rounded">
<imgsrc="..."class="img-circle">
<imgsrc="..."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
<iclass="icon-search"></i>
<iclass="icon-searchicon-white"></i>
<aclass="btnbtn-primary"href="#"><iclass="icon-usericon-white"></i>User</a>
<aclass="btnbtn-small"href="#"><iclass="icon-star"></i></a>
<spanclass="add-on"><iclass="icon-envelope"></i></span>
<inputclass="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

Components
Dozensof reusablecomponentsbuiltto providenavigation,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
<divclass="btn-group">
<buttonclass="btn">1</button>
</div>
HTML
67/96

Components: Button dropdown
#HTML5Denver
<divclass="btn-group">
<aclass="btndropdown-toggle"data-toggle="dropdown"href="#">
Action
<spanclass="caret"></span>
</a>
<ulclass="dropdown-menu">

</ul>
</div>
HTML
68/96

Components: Navbar
#HTML5Denver
<divclass="navbar">
<divclass="navbar-inner">
<aclass="brand"href="#">Title</a>
<ulclass="nav">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Link</a></li>
<li><ahref="#">Link</a></li>
</ul>
</div>
</div>
HTML
69/96

Components: Tabs
#HTML5Denver
<ulclass="navnav-tabs">
<liclass="active">
<ahref="#">Home</a>
</li>
<li><ahref="#">...</a></li>
<li><ahref="#">...</a></li>
</ul>
HTML
70/96

Components: Breadcrumbs
#HTML5Denver
<ulclass="breadcrumb">
<li><ahref="#">Home</a><spanclass="divider">/</span></li>
<li><ahref="#">Library</a><spanclass="divider">/</span></li>
<liclass="active">Data</li>
</ul>
HTML
71/96

Components: Pagination
#HTML5Denver
<divclass="pagination">
<ul>
<li><ahref="#">Prev</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">Next</a></li>
</ul>
</div>
HTML
72/96

Components: Alerts
#HTML5Denver
<divclass="alertalert-success">
</div>
HTML
73/96

JavaScript for Bootstrap
Bring Bootstrap'scomponentsto life—nowwith 13custom jQuery
plugins.

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
<divclass="modalhidefade">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</bu
<h3>Modalheader</h3>
</div>
<divclass="modal-body">
<p>Onefinebody…</p>
</div>
<divclass="modal-footer">
<ahref="#"class="btn">Close</a>
<ahref="#"class="btnbtn-primary">Savechanges</a>
</div>
</div>
HTML
78/96

JavaScript Plugins: Carousel
#HTML5Denver 79/96

JavaScript Plugins: Carousel
#HTML5Denver
<divid="myCarousel"class="carouselslide">

<divclass="carousel-inner">
<divclass="activeitem">…</div>
<divclass="item">…</div>
<divclass="item">…</div>
</div>

<aclass="carousel-controlleft"href="#myCarousel"data-slide="prev">&lsaquo;</a>
<aclass="carousel-controlright"href="#myCarousel"data-slide="next">&rsaquo;</a>
</div>
HTML
80/96

JavaScript Plugins: Popover
#HTML5Denver 81/96

JavaScript Plugins: Popover
#HTML5Denver
<ahref="#"
class="btnbtn-largebtn-danger"
rel="popover"
data-content="Andhere'ssomeamazingcontent.It'sveryengaging.right?"
data-original-title="ATitle">
Clicktotogglepopover
</a>
HTML
See it in action http://twitter.github.com/bootstrap/javascript.html#popovers
82/96

LESS
Thedynamicstylesheetlanguage.

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 define
best practices around each pattern.
1. Base
2. Layout
3. Module
4. State
5. 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(portraitandlandscape)-----------*/
@mediaonlyscreenand(min-device-width:320px)and(max-device-width:854px){
body.mainPage.click-thru{
padding:0;
}
}
/*iPad(portraitandlandscape)-----------*/
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){
body.mainPage.click-thru{
padding-top:50px;
}
}
CSS
92/96

JavaScript PDF Viewer / Editor
#HTML5Denver 93/96

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 @mraible
www raibledesigns.com
github github.com/mraible
linkedin linkedin.com/in/mraible

Refreshing Your UI with HTML5, Bootstrap and CSS3

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Refreshing Your UI with HTML5, Bootstrap and CSS3 (20)

More from Matt Raible (20)

Recently uploaded (20)

Refreshing Your UI with HTML5, Bootstrap and CSS3