Jen Kramer • ConFoo • February 2014
Jan 27, 2015
Jen Kramer • ConFoo • February 2014
Grounding in mobile techniques Background on responsive design Introduce Bootstrap and Foundation Compare Bootstrap and Foundation Declare a winner!!!
www.jenkramer.org • [email protected]
Photo back story
Build a separate mobile-compatible website or mobile app (or both)
Responsive Design A comparison of methods
for building mobile-optimized websites
www.jenkramer.org • [email protected]
Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)
www.alistapart.com/articles/responsive-web-design/
www.jenkramer.org • [email protected]
Images should change size, based on screen resolution o Load a big image and let it
scale (not good) o Server-side (good) o Client-side: Load several
images and display the one right for this resolution (not good)
o Client-side: let JavaScript decide (better)
Browser reports screen resolution
Based on current width, serve a stylesheet with layout for that width
No JavaScript involved
Recently published in Smashing Magazine Responsive Design Frameworks: Just Because You Can, Should You?
While the back-end world has been developing tools and API’s, the front-end world has been custom or off-the-shelf. There has been no middle ground.
www.jenkramer.org • [email protected]
Some of the work is done for you – including debugging!
You can still customize what you get.
It doesn’t have to look like a Bootstrap/Foundation site.
The code may be more than you would create custom… but how much time/money did you save?
getbootstrap.com foundation.zurb.com
20 Exceptional CSS Boilerplates and Frameworks
www.jenkramer.org • [email protected]
I am a lynda.com author, and I have recorded video training titles on both frameworks.
I am currently writing a book on Bootstrap 3. I do not work for or contribute to the coding of either project. I have no insight into either project other than what’s publicly
available for both projects. I think both frameworks are awesome and amazing in their
own right and are appropriate for different situations and different skillsets.
Jen’s spreadsheet comparing Bootstrap and Foundation
Based on documentation sites for Bootstrap and Foundation.
Note: spreadsheet currently out of date; compares BS3 with F4.
Twitter Bootstrap is the most popular responsive design framework for building web sites and web applications.
It is the most popular project in GitHub and is used by NASA and MSNBC among others.
wikipedia.org/wiki/Twitter_Bootstrap
www.jenkramer.org • [email protected]
A fully functional grid system with 4 different sizes. Base CSS includes standardized styling for forms, buttons,
images, headings, navigation systems, etc. CSS customization through LESS CSS or Sass jQuery-driven components include dropdown menus, tooltips,
popovers, alerts, image carousel, accordion panels, etc. Optional icon font for incorporating vector images, distributed
with Bootstrap, 180 icons Distributed under MIT
www.jenkramer.org • [email protected]
ZURB Foundation is an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
It is the 13th most starred project in all of GitHub and is used by National Geographic Education, PBS, and Pixar Projection.
www.jenkramer.org • [email protected]
A fully functional grid system with 3 different sizes plus a block grid.
Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc.
CSS customization via Sass & Compass, or Grunt & Libsass jQuery-driven components include dropdown menus, tooltips,
popovers, image carousel, site tour, etc. Custom icon font for incorporating vector images available as
a separate download Distributed under MIT license
www.jenkramer.org • [email protected]
www.jenkramer.org • [email protected] ‹#›
Bootstrap Foundation
Started by Mark Otto and Jacob Thornton, while working at Twitter, as internal tool
Released Bootstrap in 2011 Otto & Thornton left Twitter in
2012 Otto is now in charge of the open
source project and is adding core team members.
ZURB is a 30-person web development company in Campbell, CA
Created Foundation to build client websites
Mark Otto worked here until 2007
When ZURB saw how well Bootstrap was doing, they released Foundation as an open source project.
www.jenkramer.org • [email protected] ‹#›
Bootstrap Foundation
Strictly open source community, with Otto as benevolent dictator
With a company behind this framework, tech support is available, as well as in-person and online training
www.jenkramer.org • [email protected] ‹#›
Bootstrap 3
Latest versions of:
Chrome (Mac, Windows, iOS, and Android)
Safari (Mac and iOS only, as Windows has more or less been discontinued)
Firefox (Mac, Windows)
Opera (Mac, Windows)
IE 9 and 10. IE 8 supported with respond.js
Foundation 5
Latest versions of Chrome, Firefox, Safari
iOS (iPhone and iPad)
Android 2, 4 (tablet and phone)
Windows Phone 7+
Surface
IE 9 and 10.
www.jenkramer.org • [email protected] ‹#›
Bootstrap
Some effort put into accessibility improvements
Includes the Aria codes, screen reader only styles
Joomla has pushed for accessibility since Bootstrap is incorporated in the version 3 CMS
Foundation
www.jenkramer.org • [email protected] ‹#›
Bootstrap
4 grid system: o Extra small always stays
horizontal o Small, medium, large grids stack
after breakpoint
Foundation
3 grid system: o Small always stays horizontal o Medium, large grids stack after
breakpoint
Can center columns on the page
www.jenkramer.org • [email protected] ‹#›
Bootstrap
There is a TON of stuff that’s styled
No right-to-left support Specific to Bootstrap:
o Jumbotron o Media object o Media List o Well
Foundation
In general there is LESS styling out of the box o But that’s less to override later
Right-to-left support Specific to Foundation:
o Pricing Tables o Keystrokes
www.jenkramer.org • [email protected] ‹#›
Bootstrap
LESS CSS and NEW: Sass alternatives!
Not much LESS/Sass documentation on Bootstrap site
Less of an expectation that you will work with LESS/Sass
No official training available
Foundation
Sass plus Compass (can run without Compass) or Grunt plus Libsass
Extensive Sass documentation Expectation that you will style
with Sass ZURB offers training for working
with Sass (and Foundation)
www.jenkramer.org • [email protected] ‹#›
Bootstrap
Every widget Bootstrap offers, there is an equivalent in Foundation.
Foundation HTML5 form validation library
(Abide) Responsive lightbox (Clearing) Site tour (Joyride) Offcanvas nav bar Responsive image scheme:
Interchange loads correct individual image for screen resolution, including Retina images or HTML content
Equalizer for creating equal height content on page
www.jenkramer.org • [email protected] ‹#›
Bootstrap Carousel <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators --> <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides --> <div class="carousel-inner">
<div class="item active"> <img src="..." alt="..."> </div> <div class="item active"> <img src="..." alt="..."> </div> <div class="item active"> <img src="..." alt="..."> </div>
</div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
Foundation Orbit <ul data-orbit>
<li> <img src= "../img/demos/demo1.jpg" /> </li>
<li> <img src= "../img/demos/demo2.jpg" /> </li>
<li> <img src= "../img/demos/demo3.jpg" /> </li>
</ul>
www.jenkramer.org • [email protected] ‹#›
Bootstrap Carousel Foundation Orbit $(document).foundation('orbit', { animation: 'fade',
timer_speed: 10000,
pause_on_hover: true, resume_on_mouseout: false, animation_speed: 500,
stack_on_small: true, navigation_arrows: true, slide_number: true, container_class: 'orbit-container', stack_on_small_class: 'orbit-stack-on-small',
next_class: 'orbit-next',
prev_class: 'orbit-prev',
timer_container_class: 'orbit-timer', timer_paused_class: 'paused', timer_progress_class: 'orbit-progress', slides_container_class: 'orbit-slides-container', bullets_container_class: 'orbit-bullets', bullets_active_class: 'active', slide_number_class: 'orbit-slide-number', caption_class: 'orbit-caption', active_slide_class: 'active', orbit_transition_class: 'orbit-transitioning', bullets: true, timer: true, next_on_click: false, variable_height: false, before_slide_change: function(){}, after_slide_change: function(){} });
6 methods 2 events 3 data- options
www.jenkramer.org • [email protected] ‹#›
Bootstrap Foundation
CAN THERE BE ONLY ONE?
You need lots of styling out of the box, without lots of changes.
You love LESS CSS. You’re OK with a strictly
open source project. You need one of the unique
JS/CSS characteristics. You hate semicolons in your
JavaScript/you hate JS.
www.jenkramer.org • [email protected]
You don’t want a ton of styling you have to override later.
You love Sass/Compass/NodeJS/Grunt/Libsass.
You need tech support and/or training.
You need one of the unique JS/CSS characteristics.
You love semicolons in your JavaScript/you love JS.
www.jenkramer.org • [email protected]
Jen Kramer Waltham, MA Phone: 802-257-2657 [email protected] www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen
www.jenkramer.org • [email protected]
Slides available at www.slideshare.net/jen4web lynda.com 7 day free pass lynda.com/freepass/jkramer