Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Deathmatch:
Foundation
vs. Bootstrap
in Drupal
DrupalSouth 2014, Wellington
● Drupal consultant at Technocrat
● Drupal educator
● Mobile developer: iOS and Android
● Twitter: @VladimirAus @TESDev
Ab...
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
● optiona...
● This is frontend intermediate session!
● Not an endorsement
● I think both Frameworks are great
● Goal: no coding and in...
● Company behind: Twitter
● No.1 of Github
● Current Version 3:
○ 3.0: 19-Aug-2013
○ 3.1: 30-Jan-2014
In the red corner: B...
● License: MIT License
○ Apache License 2.0 prior to 3.0.1
● Community!
● Website: http://getbootstrap.com
● Bootstrap Exp...
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-2013
5.1: 05-Feb-2014
In the blue corner: ...
● 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
Components
Foundation Bootstrap
Installation
Round 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 ...
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+
...
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
Carousel
Round 3
● Depends on libraries, dev
branch of media,
file_entity
● https://drupal.org/project/field_orbit
● http://foundation.d7ds...
● https://drupal.
org/project/bootstrap_carousel
● Depends on library and
juery_update
Bootstrap Carousel
Field Formatters
Round 4
● Supports Foundation 3 and 4
● https://drupal.
org/project/foundation_group
● http://foundation.zurb.
com/docs/v/4.3.2
/c...
● Supports Bootstrap 3
● https://drupal.
org/project/bootstrap_fieldgro
up
● requires field_group
Bootstrap fieldgroup
● Responsive lightboxes
● https://drupal.
org/project/zurb_clearing
● http://foundation.zurb.
com/docs/components/clearing...
● Need to highlight the differences
between two images?
● https://drupal.
org/project/zurb_twentytwenty
● http://zurb.
com...
● Loads only one image for
resolution
● https://drupal.
org/project/zurb_interchange
● http://foundation.zurb.
com/docs/co...
Foundation: ZURB Interchange
Views
Round 5
● Supports Bootstrap 2 and 3
● https://drupal.
org/project/views_bootstrap
● Supports
○ Grid
○ Tables (dev)
○ Thumbnail
○ ...
Panels
Round 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 Layo...
● https://drupal.
org/project/panels_bootstrap_styles
● Supports Bootstrap 3
● Currently Supported styles:
○ Panel
○ Jumbo...
JavaScript effects
Round 7
● https://drupal.
org/project/twitter_bootstrap_modal
● Supports Bootstrap 3
● Depends on jQuery AJAX Load
● https://drupa...
● https://drupal.
org/project/bootstrap_tour
Bootstrap: Bootstrap Tour
Display Suite
Round 8
Separate module for Bootstrap
● https://drupal.org/project/ds_bootstrap_layouts
Foundation: Bootstrap
● Built in into Foundation
Foundation: Display suite
Preprocessors
Round 9
● LESS is based on JavaScript
● You must use either a local LESS preprocessor or install
and enable the LESS module - 7.x-...
● 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...
What about Drupal 8?
Dessert
● Standalone framework + web services?
Drupal 8
Additional notes
Differences
● 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 f...
● Bootstrap was designed mobile first for 4
platforms: mobile, tablet, desktop &
large desktop
● Foundation was designed f...
● Foundation: grid size depends on browser
width
○ Adapts flexibly
● Bootstrap grids are predefined for main
devices and s...
● Bootstrap can be used without JS
● Fondation needs JS to start
Start me up!
Questions?
Twitter:
@VladimirAus @TESDev
LINKS
Scripts and tools
● https://gist.github.
com/VladimirAus/8900681
Slides
● h...
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Upcoming SlideShare
Loading in …5
×

Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1

3,070 views

Published on

Slides from Drupal South 2014 (15-Feb-2014) talk: bootstrap vs foundation death match.

Published in: Software

Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1

  1. 1. Deathmatch: Foundation vs. Bootstrap in Drupal DrupalSouth 2014, Wellington
  2. 2. ● Drupal consultant at Technocrat ● Drupal educator ● Mobile developer: iOS and Android ● Twitter: @VladimirAus @TESDev About me
  3. 3. Let’s install Drupal!
  4. 4. I MEAN: Let’s install Drupal! ...and show it’s to potential client
  5. 5. Let’s install Drupal! Insert Bartik
  6. 6. Let’s install Drupal! Insert Bartik
  7. 7. ● Fluid grid ● Images that resize ● CSS3 media queries Responsive design
  8. 8. Responsive design: fluid grid
  9. 9. Images that resize ● client side? server side? JS decides! CSS3 media queries ● No JS, pure CSS Responsive design
  10. 10. ● DIY ● Packaged theme ● Responsive Framework Frontend approaches
  11. 11. HTML and CSS-based design templates for ● typography ● forms ● buttons ● navigation ● other interface components ● optional JavaScript extensions Responsive framework
  12. 12. ● This is frontend intermediate session! ● Not an endorsement ● I think both Frameworks are great ● Goal: no coding and inspiration! Disclaimer
  13. 13. ● 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
  14. 14. ● 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
  15. 15. In the red corner: Bootstrap
  16. 16. In the red corner: Bootstrap
  17. 17. In the red corner: Bootstrap
  18. 18. ● Company behind: Zurb ● No 10+ project on GitHub ● Current Version 5: 5.0: Nov-2013 5.1: 05-Feb-2014 In the blue corner: Foundation
  19. 19. ● License: MIT License ● Help ● Website: foundation.zurb.com ● Kitchen Sink ● Showcase In the blue corner: Foundation
  20. 20. In the left corner: Foundation
  21. 21. In the left corner: Foundation
  22. 22. In the left corner: Foundation
  23. 23. Components
  24. 24. Components Foundation Bootstrap
  25. 25. Installation Round 1
  26. 26. ● Theme or library? ● Bootstrap library ○ https://drupal.org/project/bootstrap_library ● Themes! Installation
  27. 27. ● 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
  28. 28. Bootstrap on Drupal
  29. 29. ● Subtheme ○ Copy starterkit ○ Rename info file ○ Update info file ● IE Compatibility ● Respond.js Bootstrap on Drupal
  30. 30. Bootstrap on Drupal
  31. 31. ● 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
  32. 32. Foundation on Drupal
  33. 33. ● Does not support IE7 ○ downgrade to Foundation 2 ● Build subtheme ○ with drush ○ manually Foundation on Drupal
  34. 34. Foundation on Drupal
  35. 35. Foundation on Drupal
  36. 36. Visually?
  37. 37. Grid Responsive design Round 2
  38. 38. Grid
  39. 39. ● 2 columns ○ Desktop: 8-4 ○ Tablet: 6-6 ○ Mobile: 12-12 (stacked) Grid: creating one
  40. 40. Carousel Round 3
  41. 41. ● Depends on libraries, dev branch of media, file_entity ● https://drupal.org/project/field_orbit ● http://foundation.d7ds. loc/admin/structure/types/manage/car ousel/display ● Foundation: ZURB Orbit
  42. 42. ● https://drupal. org/project/bootstrap_carousel ● Depends on library and juery_update Bootstrap Carousel
  43. 43. Field Formatters Round 4
  44. 44. ● 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
  45. 45. ● Supports Bootstrap 3 ● https://drupal. org/project/bootstrap_fieldgro up ● requires field_group Bootstrap fieldgroup
  46. 46. ● 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
  47. 47. ● Need to highlight the differences between two images? ● https://drupal. org/project/zurb_twentytwenty ● http://zurb. com/playground/twentytwenty ● Foundation 4 Download pligin to sites/all/libraries/twentytwenty Foundation: Twenty-Twenty
  48. 48. ● 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_setting Foundation: ZURB Interchange
  49. 49. Foundation: ZURB Interchange
  50. 50. Views Round 5
  51. 51. ● 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
  52. 52. Panels Round 6
  53. 53. ● https://drupal. org/project/panels_bootstrap_layouts ● Supports Bootstrap 1,2 & 3!!! Bootstrap: Panels Bootstrap Layout
  54. 54. ● https://drupal. org/project/panels_bootstrap_layout_ builder ● Supports Bootstrap 2 & 3 Bootstrap: Panels Bootstrap Layout Builder
  55. 55. ● https://drupal. org/project/panels_bootstrap_styles ● Supports Bootstrap 3 ● Currently Supported styles: ○ Panel ○ Jumbotron ○ Well ○ Alert (Pane only) Bootstrap: Panels Bootstrap Styles
  56. 56. JavaScript effects Round 7
  57. 57. ● 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
  58. 58. ● https://drupal. org/project/bootstrap_tour Bootstrap: Bootstrap Tour
  59. 59. Display Suite Round 8
  60. 60. Separate module for Bootstrap ● https://drupal.org/project/ds_bootstrap_layouts Foundation: Bootstrap
  61. 61. ● Built in into Foundation Foundation: Display suite
  62. 62. Preprocessors Round 9
  63. 63. ● 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
  64. 64. ● Requires Ruby ● Can use https://drupal.org/project/sass Foundation: SASS
  65. 65. Example
  66. 66. And the winner is... Results
  67. 67. ● 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...
  68. 68. What about Drupal 8? Dessert
  69. 69. ● Standalone framework + web services? Drupal 8
  70. 70. Additional notes Differences
  71. 71. ● Bootstrap has way more elements than Foundation ● Bootstrap UI elements looks cooler UI elements
  72. 72. ● Bootstrap doesn’t have semicolons in JavaScript ● Coding standards Coding style
  73. 73. ● 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
  74. 74. ● 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
  75. 75. ● 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
  76. 76. ● Bootstrap can be used without JS ● Fondation needs JS to start Start me up!
  77. 77. Questions? Twitter: @VladimirAus @TESDev LINKS Scripts 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!

×