Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
-
Upload
vladimir-roudakov -
Category
Software
-
view
112 -
download
3
description
Transcript of Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
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!