Many startups and open source projects have the luxury of starting greenfield projects. Unfortunately, the corporate world rarely works this way. It's more maintenance coding and a few new features every now and then. This session covers how you can use three of the hottest technologies (HTML5, CSS3 and Bootstrap) to spruce up a legacy application. It describes a real-world situation where a redesign was implemented in a few short weeks, making an old site look brand new. It also does a deep dive into Bootstrap, explains LESS, and shows pitfalls with older browsers. After this session, you'll be motivated to integrate Bootstrap into your applications and turn that legacy UI into something sexy!
See blog post about this presentation at http://raibledesigns.com/rd/entry/my_bootstrap_presentation_from_html5.
Designing IA for AI - Information Architecture Conference 2024
Refreshing Your UI with HTML5, Bootstrap and CSS3
1. Refreshing Your UI with HTML5,
Bootstrap and CSS3
HTML5Denver April 22,2013
Matt Raible
http://raibledesigns.com Photos by Trish McGinity
2. 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
5. 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
6. 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
16. 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
30. 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
31. 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
32. 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
38. 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
55. 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
56. 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
89. 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
90. 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
92. 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
93. UI Refresh Project, 1 Year Later
JavaScript PDF Viewer / Editor
#HTML5Denver 93/96
94. 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
95. 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