Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs
-
Upload
vuonghuong -
Category
Documents
-
view
235 -
download
4
Transcript of Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs
![Page 1: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/1.jpg)
Refreshing Your UI with HTML5,Bootstrap and CSS3HTML5 Denver April 22, 2013
Matt Raiblehttp://raibledesigns.com Photos by Trish McGinity
![Page 2: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/2.jpg)
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: [email protected]
twitter: @mraible
2/96
![Page 3: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/3.jpg)
Legacy DesignHave you worked with an outdated design?
![Page 4: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/4.jpg)
My Experience
#HTML5Denver
December 2011
Page Speed Project
UI Refresh Project
Bootstrap
Legacy Browsers
4/96
![Page 5: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/5.jpg)
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 6: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/6.jpg)
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
![Page 7: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/7.jpg)
Tilt 3D
#HTML5Denver
https://addons.mozilla.org/en-us/firefox/addon/tilt/
7/96
![Page 8: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/8.jpg)
UI Refresh Project
![Page 9: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/9.jpg)
UI Refresh Spike
![Page 10: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/10.jpg)
CSS Image Sprites
http://css-tricks.com/css-sprites/
![Page 11: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/11.jpg)
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
![Page 12: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/12.jpg)
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
![Page 13: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/13.jpg)
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
![Page 14: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/14.jpg)
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
![Page 15: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/15.jpg)
Themes with LESS: Customizer
#HTML5Denver 15/96
![Page 16: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/16.jpg)
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
![Page 17: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/17.jpg)
Web DevelopmentWe face a lot of challenges
![Page 18: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/18.jpg)
Web Browsers
#HTML5Denver 18/96
![Page 22: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/22.jpg)
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
![Page 23: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/23.jpg)
![Page 24: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/24.jpg)
Mobile Traffic will outnumber desktop by 2014
#HTML5Denver 24/96
![Page 25: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/25.jpg)
Mobile OS
#HTML5Denver 25/96
![Page 26: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/26.jpg)
Mobile Screen Resolutions
#HTML5Denver 26/96
![Page 27: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/27.jpg)
Designing a different interface for every
device is impossible.
“
”
![Page 28: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/28.jpg)
BootstrapThe answer to our problems.
![Page 29: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/29.jpg)
![Page 30: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/30.jpg)
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
![Page 31: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/31.jpg)
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
![Page 32: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/32.jpg)
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
![Page 33: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/33.jpg)
Getting StartedOverview of the project, its contents, and how to get started with asimple template.
![Page 34: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/34.jpg)
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
![Page 35: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/35.jpg)
ScaffoldingBootstrap is built on responsive 12-column grids, layouts, andcomponents.
![Page 36: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/36.jpg)
Layouts: Fixed Layout
#HTML5Denver
<body> <div class="container"> ... </div></body>
HTML
36/96
![Page 37: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/37.jpg)
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
![Page 38: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/38.jpg)
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
![Page 39: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/39.jpg)
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
![Page 40: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/40.jpg)
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
![Page 41: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/41.jpg)
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
![Page 43: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/43.jpg)
Base CSSFundamental HTML elements styled and enhanced with extensibleclasses.
![Page 44: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/44.jpg)
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
![Page 45: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/45.jpg)
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
![Page 46: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/46.jpg)
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
![Page 47: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/47.jpg)
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
![Page 48: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/48.jpg)
Typography: Lists
#HTML5Denver
<ul><li>Lorem ipsum dolor sit amet</li>...</ul>
HTML
48/96
![Page 49: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/49.jpg)
Tables: Default Style
#HTML5Denver
<table class="table">…</table>
HTML
49/96
![Page 50: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/50.jpg)
Tables: Striped
#HTML5Denver
<table class="table table-striped">…</table>
HTML
50/96
![Page 51: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/51.jpg)
Tables: Bordered
#HTML5Denver
<table class="table table-bordered">…</table>
HTML
51/96
![Page 52: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/52.jpg)
Tables: Hover
#HTML5Denver
<table class="table table-hover">…</table>
HTML
52/96
![Page 53: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/53.jpg)
Tables: Condensed
#HTML5Denver
<table class="table table-condensed">…</table>
HTML
53/96
![Page 54: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/54.jpg)
Tables: Optional Row Classes
#HTML5Denver 54/96
![Page 55: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/55.jpg)
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
![Page 56: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/56.jpg)
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
![Page 57: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/57.jpg)
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
![Page 58: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/58.jpg)
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
![Page 59: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/59.jpg)
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
![Page 60: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/60.jpg)
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
![Page 61: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/61.jpg)
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
![Page 62: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/62.jpg)
Buttons
#HTML5Denver 62/96
![Page 63: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/63.jpg)
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
![Page 64: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/64.jpg)
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
![Page 65: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/65.jpg)
ComponentsDozens of reusable components built to provide navigation, alerts,popovers, and more.
![Page 66: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/66.jpg)
Components
#HTML5Denver
Dropdowns
Button groups
Button dropdowns
Navs
Navbar
Breadcrumbs
Pagination
Labels and badges
Typography
Thumbnails
Alerts
Progress bars
Misc
66/96
![Page 67: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/67.jpg)
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
![Page 68: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/68.jpg)
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
![Page 69: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/69.jpg)
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
![Page 70: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/70.jpg)
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
![Page 71: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/71.jpg)
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
![Page 72: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/72.jpg)
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
![Page 73: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/73.jpg)
Components: Alerts
#HTML5Denver
<div class="alert alert-success"></div>
HTML
73/96
![Page 74: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/74.jpg)
JavaScript for BootstrapBring Bootstrap's components to life—now with 13 custom jQueryplugins.
![Page 75: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/75.jpg)
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
![Page 76: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/76.jpg)
You can use all Bootstrap plugins purely
through the markup API without writing
a single line of JavaScript.
“
”
![Page 77: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/77.jpg)
JavaScript Plugins: Modals
#HTML5Denver 77/96
![Page 78: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/78.jpg)
JavaScript Plugins: Modals
#HTML5Denver
<div class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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
![Page 79: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/79.jpg)
JavaScript Plugins: Carousel
#HTML5Denver 79/96
![Page 80: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/80.jpg)
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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div>
HTML
80/96
![Page 81: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/81.jpg)
JavaScript Plugins: Popover
#HTML5Denver 81/96
![Page 82: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/82.jpg)
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
![Page 83: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/83.jpg)
LESSThe dynamic stylesheet language.
![Page 84: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/84.jpg)
What is LESS?
#HTML5Denver
Maintainable CSS
Dynamic Behavior
Usage
Variables
Mixins
Nested Elements
Operations
Functions
Client Side
Server Side
84/96
![Page 85: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/85.jpg)
LESS: Variables
#HTML5Denver 85/96
![Page 86: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/86.jpg)
LESS: Mixins
#HTML5Denver 86/96
![Page 87: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/87.jpg)
LESS: Nested
#HTML5Denver 87/96
![Page 88: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/88.jpg)
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
![Page 89: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/89.jpg)
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
![Page 90: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/90.jpg)
SMACSS
Categorizing CSS rules allows us to see patterns and definebest practices around each pattern.
1. Base2. Layout3. Module4. State5. Theme
#HTML5Denver 90/96
![Page 91: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/91.jpg)
SMACSS: Naming Rules
#HTML5Denver
http://smacss.com
Jonathan Snook @ HTML5 Denver: June 17, 2013!
91/96
![Page 92: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/92.jpg)
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
![Page 93: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/93.jpg)
UI Refresh Project, 1 Year Later
JavaScript PDF Viewer / Editor
#HTML5Denver 93/96
![Page 94: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/94.jpg)
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
![Page 95: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/95.jpg)
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
![Page 96: Refreshing Your UI with HTML5, Bootstrap and CSS3 - Raible Designs](https://reader033.fdocuments.net/reader033/viewer/2022051102/586e321b1a28abdd018b9c36/html5/thumbnails/96.jpg)
<Questions?>
twitter @mraiblewww raibledesigns.comgithub github.com/mraiblelinkedin linkedin.com/in/mraible