 Jen Kramer JS Summit November 19, 2013

 Grounding in mobile techniques  Background on responsive design  Introduce Bootstrap and Foundation  Compare Bootstrap and Foundation  Declare a winner!!!

 Build a separate mobile-compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobile-optimized websites A comparison of methods for building mobile-optimized websites

 Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)  design/ design/

 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



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

 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 15 More Responsive CSS Frameworks Worth Considering

 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 Jen’s spreadsheet comparing Bootstrap and Foundation  Based on documentation sites for Bootstrap and Foundation.

 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.GitHubNASA MSNBC wikipedia.org/wiki/Twitter_Bootstrap

 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 Optional icon font  Distributed under Apache 2, copyright 2013 Twitter (moving to MIT)

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

 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 Custom icon font  Distributed under MIT license

23 BootstrapFoundation  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.

24 BootstrapFoundation  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

25 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)

27 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

28 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

29 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

30 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)

31 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

32 Bootstrap Carousel Foundation Orbit

33 Bootstrap CarouselFoundation 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

34 BootstrapFoundation

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.

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

Jen Kramer Waltham, MA Phone: Twitter: Facebook: facebook.com/webdesignjenfacebook.com/webdesignjen Slides available at 4web