38
Comparing Twitter Bootstrap vs. ZURB Foundation Jen Kramer • JS Summit • November 19, 2013
| Date post: | 23-Dec-2015 |
| Category: |
Documents |
| Upload: | cornelia-wilson |
| View: | 215 times |
| Download: | 0 times |
Comparing Twitter Bootstrap vs. ZURB
FoundationJen Kramer • JS Summit • November 19, 2013
Agenda Grounding in mobile techniques Background on responsive design Introduce Bootstrap and Foundation Compare Bootstrap and Foundation Declare a winner!!!
Two (big) approaches to mobile
Build a separate mobile-compatible website or mobile app (or both)
Responsive Design A comparison of m
ethods for building mobile-optimized websites
www.jenkramer.org • [email protected]
Responsive Design Defined by three characteristics
o Flexible grid-based layouto Images that resizeo Media queries (CSS3)
www.alistapart.com/articles/responsive-web-design/
www.jenkramer.org • [email protected]
Grid-based layout
Images that resize Images should change
size, based on screen resolutiono 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)
CSS3 Media Queries Browser reports
screen resolution Based on current
width, serve a stylesheet with layout for that width
No JavaScript involved
Should I use a responsive design framework?
Two approaches to front-end design
No middle ground! 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]
Frameworks as middle ground 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?
Should you use a framework?
Today’s “competitors”
getbootstrap.com foundation.zurb.com
15 More Responsive CSS Frameworks Worth Considering
www.jenkramer.org • [email protected]
Disclaimer 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.
The Spreadsheet Says It All Jen’s spreadsheet c
omparing Bootstrap and Foundation
Based on documentation sites for Bootstrap and Foundation.
What is Bootstrap? 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]
What is Bootstrap 3? 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 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 Apache 2, copyright 2013 Twitter (moving to MIT)
www.jenkramer.org • [email protected]
What is Foundation? 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]
What is Foundation 4? 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 and Compass 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]
23
Creation Stories
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]
24
About the projects
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]
25
Browser support
Bootstrap
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
Latest versions of Chrome, Firefox, Safari
iOS (iPhone and iPad)
Android 2, 4 (tablet and phone)
Windows Phone 7+
Surface
IE 9 and 10. IE 8 supported with additional grid code (provided on site as a gist)
www.jenkramer.org • [email protected]
27
Accessibility
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]
28
Grid system
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]
29
Styling
Bootstrap There is a TON of stuff
that’s styled No right-to-left
support Specific to Bootstrap:
o Jumbotrono Media objecto Media Listo Well
Foundation In general there is
LESS styling out of the boxo But that’s less to
override later Right-to-left support Specific to Foundation:
o Pricing Tableso Keystrokes
www.jenkramer.org • [email protected]
30
CSS Preprocessors
Bootstrap LESS CSS Not much LESS
documentation on Bootstrap site
Less of an expectation that you will work with LESS
No official training available
Foundation Sass plus Compass
(can run without Compass)
Extensive Sass documentation
Expectation that you will style with Sass
ZURB offers training for working with Sass (and Foundation)
www.jenkramer.org • [email protected]
31
Unique JavaScripty Widgets
Bootstrap Affix: fixes element in
place while page scrolls
ScrollSpy: Updates nav bar with current position on page
Foundation HTML5 form validation
library (Abide) Responsive lightbox
(Clearing) Site tour (Joyride) Responsive image
scheme: Interchange loads correct individual image for screen resolution, including Retina images
www.jenkramer.org • [email protected]
32
Carousel HTML Code Compared
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]
33
Carousel JS Code Compared
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
CAN THERE BE ONLY ONE?
Use Bootstrap if… 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]
Use Foundation if… You don’t want a ton of
styling you have to override later.
You love Sass/Compass. 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]
Questions?Jen KramerWaltham, MAPhone: [email protected]
Twitter: @jen4webFacebook: facebook.com/webdesignjen
www.jenkramer.org • [email protected]
Slides available atwww.slideshare.net/jen4web
