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