Post on 27-Jan-2015
description
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
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
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">×</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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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