Downloaded 24 times
Uploaded byVladimir Roudakov
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
This document provides an overview and comparison of the Bootstrap and Foundation frontend frameworks for responsive design in Drupal. It discusses their installation and implementation in Drupal, various modules that integrate each framework, and differences in their coding styles, grids, and other features. The document concludes that while Bootstrap has more elements and examples currently, Foundation 5 was just recently released and may require some updating of modules.
More Related Content
Similar to Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
![Bootstrap. December 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8update-151208141143-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![Drupal 8 update. February 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8update-150210093155-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Drupal LMS. February 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupallms-150210093334-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Drupal 8 update. May 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8update-150512135354-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![Drupal 8 update. November 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8update-151110233540-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![Drupal 8 update. March 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8update-150310074527-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Drupal 8 update. June 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8update-150609151716-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![Drupal 8 update. November 2015 [Brisbane Drupal meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8update-150211055816-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
- 1. Deathmatch: Foundation vs. Bootstrap in Drupal DrupalSouth2014, Wellington
- 2. ● Drupal consultantat Technocrat ● Drupal educator ● Mobile developer: iOS and Android ● Twitter: @VladimirAus @TESDev About me
- 3.
- 4. I MEAN: Let’sinstall Drupal! ...and show it’s to potential client
- 5.
- 6.
- 8. ● Fluid grid ●Images that resize ● CSS3 media queries Responsive design
- 9.
- 10. Images that resize ●client side? server side? JS decides! CSS3 media queries ● No JS, pure CSS Responsive design
- 11. ● DIY ● Packagedtheme ● Responsive Framework Frontend approaches
- 12. HTML and CSS-baseddesign templates for ● typography ● forms ● buttons ● navigation ● other interface components ● optional JavaScript extensions Responsive framework
- 13. ● This isfrontend intermediate session! ● Not an endorsement ● I think both Frameworks are great ● Goal: no coding and inspiration! Disclaimer
- 14. ● 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
- 15. ● License: MITLicense ○ Apache License 2.0 prior to 3.0.1 ● Community! ● Website: http://getbootstrap.com ● Bootstrap Expo ● Components In the red corner: Bootstrap
- 16. In the redcorner: Bootstrap
- 17. In the redcorner: Bootstrap
- 18. In the redcorner: Bootstrap
- 19. ● 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
- 20. ● License: MITLicense ● Help ● Website: foundation.zurb.com ● Kitchen Sink ● Showcase In the blue corner: Foundation
- 21. In the leftcorner: Foundation
- 22. In the leftcorner: Foundation
- 23. In the leftcorner: Foundation
- 24.
- 25.
- 26.
- 27. ● Theme orlibrary? ● Bootstrap library ○ https://drupal.org/project/bootstrap_library ● Themes! Installation
- 28. ● https://drupal.org/project/bootstrap ● Bootstrap3 ● CDN or Local ○ Library is not bundled with theme ● Requires jQuery 1.7+ ○ jQuery_update module Bootstrap on Drupal
- 29.
- 30. ● Subtheme ○ Copystarterkit ○ Rename info file ○ Update info file ● IE Compatibility ● Respond.js Bootstrap on Drupal
- 31.
- 32. ● https://drupal.org/project/zurb-foundation ● Foundation4!!! ● CDN or Local ○ Library is bundled ● Requires jQuery 1.7+ ○ jQuery_update Drupal module Foundation on Drupal
- 33.
- 34. ● Does notsupport IE7 ○ downgrade to Foundation 2 ● Build subtheme ○ with drush ○ manually Foundation on Drupal
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. ● 2 columns ○Desktop: 8-4 ○ Tablet: 6-6 ○ Mobile: 12-12 (stacked) Grid: creating one
- 41.
- 42. ● Depends onlibraries, 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
- 43. ● https://drupal. org/project/bootstrap_carousel ● Dependson library and juery_update Bootstrap Carousel
- 44.
- 45. ● Supports Foundation3 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
- 46. ● Supports Bootstrap3 ● https://drupal. org/project/bootstrap_fieldgro up ● requires field_group Bootstrap fieldgroup
- 47. ● 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
- 48. ● Need tohighlight 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
- 49. ● Loads onlyone 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
- 50.
- 51.
- 52. ● Supports Bootstrap2 and 3 ● https://drupal. org/project/views_bootstrap ● Supports ○ Grid ○ Tables (dev) ○ Thumbnail ○ Media object (dev) ○ Accordion ○ Carousel ○ Tabs Bootstrap: Views Bootstrap
- 53.
- 54. ● https://drupal. org/project/panels_bootstrap_layouts ● SupportsBootstrap 1,2 & 3!!! Bootstrap: Panels Bootstrap Layout
- 55. ● https://drupal. org/project/panels_bootstrap_layout_ builder ● SupportsBootstrap 2 & 3 Bootstrap: Panels Bootstrap Layout Builder
- 56. ● https://drupal. org/project/panels_bootstrap_styles ● SupportsBootstrap 3 ● Currently Supported styles: ○ Panel ○ Jumbotron ○ Well ○ Alert (Pane only) Bootstrap: Panels Bootstrap Styles
- 57.
- 58. ● https://drupal. org/project/twitter_bootstrap_modal ● SupportsBootstrap 3 ● Depends on jQuery AJAX Load ● https://drupal. org/project/jquery_ajax_load Bootstrap: Twitter Bootstrap Modal
- 59.
- 60.
- 61. Separate module forBootstrap ● https://drupal.org/project/ds_bootstrap_layouts Foundation: Bootstrap
- 62. ● Built ininto Foundation Foundation: Display suite
- 63.
- 64. ● LESS isbased 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
- 65. ● Requires Ruby ●Can use https://drupal.org/project/sass Foundation: SASS
- 66.
- 67. And the winneris... Results
- 68. ● Bootstrap lookssolid ○ 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...
- 69. What about Drupal8? Dessert
- 70. ● Standalone framework+ web services? Drupal 8
- 71.
- 72. ● Bootstrap hasway more elements than Foundation ● Bootstrap UI elements looks cooler UI elements
- 73. ● Bootstrap doesn’thave semicolons in JavaScript ● Coding standards Coding style
- 74. ● Bootstrap usespixels, 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
- 75. ● Bootstrap wasdesigned mobile first for 4 platforms: mobile, tablet, desktop & large desktop ● Foundation was designed for any 4 screens Mobile first VS mobile also
- 76. ● Foundation: gridsize depends on browser width ○ Adapts flexibly ● Bootstrap grids are predefined for main devices and sizes ○ Changes it's grid on breakpoint Grids
- 77. ● Bootstrap canbe used without JS ● Fondation needs JS to start Start me up!
- 78. Questions? Twitter: @VladimirAus @TESDev LINKS Scripts andtools ● 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!