Deathmatch: Foundation

vs. Bootstrapin Drupal

DrupalSouth 2014, Wellington

● Drupal consultant at Technocrat

● Drupal educator

● Mobile developer: iOS and Android

● Twitter: @VladimirAus @TESDev

About me

Let’s install Drupal!

I MEAN: Let’s install Drupal!...and show it’s to potential client

Let’s install Drupal!

Insert Bartik

Let’s install Drupal!

Insert Bartik

● Fluid grid

● Images that resize

● CSS3 media queries

Responsive design

Responsive design: fluid grid

Images that resize

● client side? server side? JS decides!

CSS3 media queries

● No JS, pure CSS

Responsive design

● DIY

● Packaged theme

● Responsive Framework

Frontend approaches

HTML and CSS-based design templates for ● typography● forms● buttons● navigation● other interface components● optional JavaScript extensions

Responsive framework

● This is frontend intermediate session!

● Not an endorsement

● I think both Frameworks are great

● Goal: no coding and inspiration!

Disclaimer

● Company behind: Twitter

● No.1 of Github

● Current Version 3: ○ 3.0: 19-Aug-2013○ 3.1: 30-Jan-2014

In the red corner: Bootstrap

● License: MIT License○ Apache License 2.0 prior to 3.0.1

● Community!● Website: http://getbootstrap.com● Bootstrap Expo● Components

In the red corner: Bootstrap

In the red corner: Bootstrap

In the red corner: Bootstrap

In the red corner: Bootstrap

● Company behind: Zurb

● No 10+ project on GitHub

● Current Version 5: 5.0: Nov-20135.1: 05-Feb-2014

In the blue corner: Foundation

● License: MIT License

● Help

● Website: foundation.zurb.com

● Kitchen Sink

● Showcase

In the blue corner: Foundation

In the left corner: Foundation

In the left corner: Foundation

In the left corner: Foundation

Components

ComponentsFoundation Bootstrap

InstallationRound 1

● Theme or library?

● Bootstrap library

○ https://drupal.org/project/bootstrap_library

● Themes!

Installation

● https://drupal.org/project/bootstrap

● Bootstrap 3

● CDN or Local

○ Library is not bundled with theme

● Requires jQuery 1.7+

○ jQuery_update module

Bootstrap on Drupal

Bootstrap on Drupal

● Subtheme

○ Copy starterkit○ Rename info file○ Update info file

● IE Compatibility● Respond.js

Bootstrap on Drupal

Bootstrap on Drupal

● https://drupal.org/project/zurb-foundation

● Foundation 4!!!

● CDN or Local

○ Library is bundled

● Requires jQuery 1.7+

○ jQuery_update Drupal module

Foundation on Drupal

Foundation on Drupal

● Does not support IE7

○ downgrade to Foundation 2

● Build subtheme ○ with drush○ manually

Foundation on Drupal

Foundation on Drupal

Foundation on Drupal

Visually?

Grid Responsive design

Round 2

Grid

● 2 columns○ Desktop: 8-4○ Tablet: 6-6○ Mobile: 12-12 (stacked)

Grid: creating one

CarouselRound 3

● Depends on libraries, dev branch of media, file_entity

● https://drupal.org/project/field_orbit● http://foundation.d7ds.

loc/admin/structure/types/manage/carousel/display

●

Foundation: ZURB Orbit

● https://drupal.org/project/bootstrap_carousel

● Depends on library and juery_update

Bootstrap Carousel

Field FormattersRound 4

● Supports Foundation 3 and 4● https://drupal.

org/project/foundation_group● http://foundation.zurb.

com/docs/v/4.3.2/components/section.html#panel3

● requires field_group

Foundation: ZURB Section

● Supports Bootstrap 3● https://drupal.

org/project/bootstrap_fieldgroup

● requires field_group

Bootstrap fieldgroup

● Responsive lightboxes● https://drupal.

org/project/zurb_clearing● http://foundation.zurb.

com/docs/components/clearing.html● Depends on media 2.x-dev &

File Entity● Foundation 4

Foundation: ZURB Clearing

● Need to highlight the differences between two images?

● https://drupal.org/project/zurb_twentytwenty

● http://zurb.com/playground/twentytwenty

● Foundation 4Download pligin to

sites/all/libraries/twentytwenty

Foundation: Twenty-Twenty

● Loads only one image for resolution

● https://drupal.org/project/zurb_interchange

● http://foundation.zurb.com/docs/components/interchange.html

● Uses media queries ● Foundation 4● Requires

field_formatter_settings

Foundation: ZURB Interchange

Foundation: ZURB Interchange

ViewsRound 5

● Supports Bootstrap 2 and 3● https://drupal.

org/project/views_bootstrap● Supports

○ Grid○ Tables (dev)○ Thumbnail○ Media object (dev)○ Accordion○ Carousel○ Tabs

Bootstrap: Views Bootstrap

PanelsRound 6

● https://drupal.org/project/panels_bootstrap_layouts

● Supports Bootstrap 1,2 & 3!!!

Bootstrap: Panels Bootstrap Layout

● https://drupal.org/project/panels_bootstrap_layout_builder

● Supports Bootstrap 2 & 3

Bootstrap: Panels Bootstrap Layout Builder

● https://drupal.org/project/panels_bootstrap_styles

● Supports Bootstrap 3● Currently Supported styles:

○ Panel○ Jumbotron○ Well○ Alert (Pane only)

Bootstrap: Panels Bootstrap Styles

JavaScript effectsRound 7

● https://drupal.org/project/twitter_bootstrap_modal

● Supports Bootstrap 3● Depends on jQuery AJAX Load

● https://drupal.org/project/jquery_ajax_load

Bootstrap: Twitter Bootstrap Modal

● https://drupal.org/project/bootstrap_tour

Bootstrap: Bootstrap Tour

Display SuiteRound 8

Separate module for Bootstrap● https://drupal.org/project/ds_bootstrap_layouts

Foundation: Bootstrap

● Built in into Foundation

Foundation: Display suite

PreprocessorsRound 9

● LESS is based on JavaScript

● You must use either a local LESS preprocessor or install

and enable the LESS module - 7.x-3.0-rc1 or higher

● https://drupal.org/project/less

Bootstrap: LESS

● Requires Ruby

● Can use https://drupal.org/project/sass

Foundation: SASS

Example

And the winner is...Results

● Bootstrap looks solid

○ updated regularly

○ extra modules more stable

○ more examples than Foundation

● Foundation 5 was just released

○ 5 days ago

○ requires jQuery 1.10 (jQuery_update)

Right now in Drupal...

What about Drupal 8?Dessert

● Standalone framework + web services?

Drupal 8

Additional notesDifferences

● Bootstrap has way more elements

than Foundation

● Bootstrap UI elements looks cooler

UI elements

● Bootstrap doesn’t have semicolons in JavaScript

● Coding standards

Coding style

● Bootstrap uses pixels, Foundation: em (4), rem (5)

● REM affects whole component, no cascading issues

● Use SASS mixin for conversion

.element { width: rem-calc(10px); // will be converted to REMs}

Measuring: px VS em

● Bootstrap was designed mobile first for 4 platforms: mobile, tablet, desktop & large desktop

● Foundation was designed for any 4 screens

Mobile first VS mobile also

● Foundation: grid size depends on browser width ○ Adapts flexibly

● Bootstrap grids are predefined for main devices and sizes○ Changes it's grid on breakpoint

Grids

● Bootstrap can be used without JS

● Fondation needs JS to start

Start me up!

Questions?Twitter: @VladimirAus @TESDev

LINKSScripts and tools● https://gist.github.

com/VladimirAus/8900681

Slides● https://drupalsouth2014.drupal.org.

nz/sessions/frontend/foundation-vs-bootstrap-death-match-responsive-frameworks-drupal

Thanks for attending!