Refreshing Your UI with HTML5, Bootstrap and CSS3 HTML5 Denver April 22, 2013 Matt Raible http://raibledesigns.com

Photos by Trish McGinity

About Me Web Architecture Consultant Java Community Professional Father, Speaker, Beer Lover What Keeps me busy Skiing, Mountain Biking The Bus AppFuse Raible Designs Contact Information www: http://raibledesigns.com email: [email protected] twitter: @mraible

#HTML5Denver

2/96

Legacy Design Have you worked with an outdated design?

My Experience

December 2011 Page Speed Project UI Refresh Project Bootstrap Legacy Browsers

#HTML5Denver

4/96

Best Practices for Speeding Up Your Web Site Minimize HTTP Requests

Avoid Redirects

Use a Content Delivery Network

Remove Duplicate Scripts

Add an Expires or a Cache-Control Header

Configure ETags

Gzip Components

Make Ajax Cacheable

Put Stylesheets at the Top

Flush the Buffer Early

Put Scripts at the Bottom

Use GET for AJAX Requests

Avoid CSS Expressions

Post-load Components

Make JavaScript and CSS External

Split Components Across Domains

Reduce DNS Lookups

Optimize Images

Minify JavaScript and CSS

Choose over @import

No 404s

Minimize the Number of iframes

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

#HTML5Denver

5/96

Page Speed Project YSlow Staging got a B Production got an F Server Recommendations Enable Compression Add Expires Headers Suggested Code Changes Optimizing Images (25% savings) Reduce HTTP Requests Combining JavaScript Files CSS Image Sprites JavaScript at Bottom

#HTML5Denver

6/96

Tilt 3D

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

#HTML5Denver

7/96

UI Refresh Project

UI Refresh Spike

CSS Image Sprites

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

Themes with LESS @link: #0087CC; @linkHover: #0087CC;

CSS

@border: #608FAF; @navbarBackground: #D6E7F2; @navbarHover: #333333; @dropdownBackground: #EFF5F9; @dropdownHover: #D6E7F2; @sidebarBackground: #EFF5F9; @headerDarkBackground: #C3EEB7; @headerMediumBackground: #D6F3CD; @headerLightBackground: #ffffff; @iconLargeYPosition: -263px; @iconYPosition: -718px;

#HTML5Denver

11/96

Themes with LESS: theme.less @import '@colors';

CSS

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

#HTML5Denver

12/96

Themes with LESS: Ant XML

#HTML5Denver

13/96

Themes with LESS: Ant XML #HTML5Denver 14/96

Themes with LESS: Customizer

#HTML5Denver

15/96

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

#HTML5Denver

16/96

Web Development We face a lot of challenges

Web Browsers

#HTML5Denver

18/96

#HTML5Denver

19/96

#HTML5Denver

20/96

#HTML5Denver

21/96

Today's Web Developer HTML5 Canvas / Semantics/ Storage / File Access / Audio / Video CSS / 3 LESS / Sass / @font-face / Border Radius / Box Shadow JavaScript jQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScript Server Side Languages ColdFusion / Java / Groovy / PHP / Python / .NET / Ruby DBMS Oracle / SQL Server / MySQL / PostgreSQL NOSQL Databases Cassandra / MongoDB / CouchDB / Amazon Simple DB

#HTML5Denver

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

Bootstrap The answer to our problems.

What is Bootstrap? Scaffolding

Components

Layouts

Dozens of reusable components

Grid System

Dropdowns

Fluid Grid System

Navbar

Responsive Design

Breadcrumbs

Base CSS Typography

Alerts Progress Bars

Tables

JavaScript Plugins

Forms

13 plugins

Buttons

Modal Dialog Windows

Icons

Tabs Typeahead Carousel

#HTML5Denver

30/96

Reasons To Love Bootstrap For all skill levels Documentation Cross Everything Lightweight Responsive Design 13 JavaScript plugins Open Source Built on LESS

#HTML5Denver

31/96

History of Bootstrap Early Days of Twitter Mark Otto Jacob Thornton Releases 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 Popularity @twbootstrap 58.5K Followers GitHub Stats 48K Watchers 14K Forks

#HTML5Denver

32/96

Getting Started Overview of the project, its contents, and how to get started with a simple template.

Getting Started Downloading Bootstrap Source Ready To Go Customize Requirements HTML5 Doctype Include bootstrap.css Starter Templates Basic marketing site Fluid layout Starter template More templates...

#HTML5Denver

34/96

Scaffolding Bootstrap is built on responsive 12-column grids, layouts, and components.

Layouts: Fixed Layout

#HTML5Denver

HTML

36/96

Layouts: Fluid Layout

#HTML5Denver

HTML

37/96

Grid System

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.

#HTML5Denver

HTML

38/96

Fluid Grid System

#HTML5Denver

HTML

39/96

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

#HTML5Denver

40/96

Responsive Design HTML Bootstrap: Getting Started

Responsive Bootstrap

#HTML5Denver

41/96

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

Base CSS Fundamental HTML elements styled and enhanced with extensible classes.

Typography: Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

#HTML5Denver

HTML

44/96

Typography: Body Copy HT M L

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus m u s. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

#HTML5Denver

45/96

Typography: Blockquote

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

#HTML5Denver

46/96

Typography: Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

HTML

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

#HTML5Denver

47/96

Typography: Lists

• Lorem ipsum dolor sit amet
...

#HTML5Denver

HTML

48/96

Tables: Default Style …

#HTML5Denver

HTML

49/96

Tables: Striped …

#HTML5Denver

HTML

50/96

Tables: Bordered …

#HTML5Denver

HTML

51/96

Tables: Hover …

#HTML5Denver

HTML

52/96

Tables: Condensed …

#HTML5Denver

HTML

53/96

Tables: Optional Row Classes

#HTML5Denver

54/96

Forms Four Layouts Vertical (default) Search Inline Horizontal Form Controls Input Text Area Checkboxes & Radio Select Look & Feel Relative Sizing (small/med/large/xlarge) Grid Sizing (span1/span2/span3/etc)

#HTML5Denver

55/96

Forms: Default Styles Legend Label name Example block-level help text here. Check me out Submit

#HTML5Denver

HTML

56/96

Forms: Horizontal ...

#HTML5Denver

HTML

57/96

Search Form Search

#HTML5Denver

HTML

58/96

Inline Form Remember me Sign in

#HTML5Denver

HTML

59/96

Form Controls: Relative Sizing

#HTML5Denver

HTML

60/96

Form Controls: Grid Sizing

#HTML5Denver

HTML

61/96

Buttons

#HTML5Denver

62/96

Images

HTML

.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support. Image Placeholders http://placehold.it/

#HTML5Denver

63/96

Icons

HTML

User

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

#HTML5Denver

64/96

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

Components Dropdowns Button groups Button dropdowns Navs Navbar Breadcrumbs Pagination Labels and badges Typography Thumbnails Alerts Progress bars Misc

#HTML5Denver

66/96

Components: Button Group

#HTML5Denver

HTML

67/96

Components: Button dropdown

#HTML5Denver

HTML

68/96

Components: Navbar

#HTML5Denver

HTML

69/96

Components: Tabs

• Home
• ...
• ...

#HTML5Denver

HTML

70/96

Components: Breadcrumbs

• Home /
• Library /
• Data

#HTML5Denver

HTML

71/96

Components: Pagination

#HTML5Denver

HTML

72/96

Components: Alerts

#HTML5Denver

HTML

73/96

JavaScript for Bootstrap Bring Bootstrap's components to life—now with 13 custom jQuery plugins.

JavaScript Plugins: Overview All plugins require the latest version of jQuery What Plugins do you need? bootstrap.min.js (all) https://github.com/twitter/bootstrap/tree/master/js Plugins Transitions Modal Button / Dropdown Tab Tooltip / Popover Alert Collapse Carousel Typeahead Scrollspy / Affix

#HTML5Denver

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

HTML