USING FOUNDATION 
WITH DRUPAL 7 
Jan Chojnacki 
Developer
Outline 
 Exove in brief 
 What is Foundation? 
 Foundation 5 basics 
 Using Foundation 5 base theme in Drupal 7 
 Comparison with some other base themes 
 Discussion
Exove in brief 
Exove is a leading Northern European company specializing in 
open source web services design and development. 
We help companies conduct better business on the Internet 
through best-of-breed personnel and solutions 
Quick facts: 
 Founded 2006 
 Over 70 people 
 Served more than 170 clients 
 Offices in Finland, Estonia, and the UK 
 Solid financial status
START!
What is Foundation? 
 Free Responsive front-end framework 
 By ZURB Inc. 
 Using SASS 
 Mobile First approach 
 Customizable 
 http://foundation.zurb.com/develop/download.html 
 Latest stable version: 5.4.6
“ Foundation is built for professionals. ” 
Bryan Zmijewski, founder of ZURB
Why to choose Foundation? 
 Fast in all aspects: 
 Building web sites 
 Page load speed 
 Solid documentation with examples of usage 
 http://foundation.zurb.com/docs/ 
 Growing community and support on forum 
 Customizable UI elements 
 Javascript plugins
Foundation 5 Javascript plugins 
 Interchange 
 Navigation 
 Offcanvas 
 Top bar 
 Magelan 
 Orbit slider 
 Clearing lightbox 
 Range Sliders 
 AbideValidation 
 Dropdown buttons 
 Modalwindows 
 Alert boxes 
 Tooltips 
 Joyride 
 Accordion 
 Tabs 
 Equalizer
UI components 
 Navigation 
 Icon bar, Side navigation, Sub nav, Breadcrumbs, Pagination 
 Flex video 
 Forms 
 Buttons 
 Panels 
 Typography 
 Tables 
 Etc…
Foundation 5 basics
Grid
Grid defaults 
 Rem base: 16 px 
 default html and body front-size for the rem value 
 Rem checker: https://offroadcode.com/prototypes/rem-calculator/ 
 Row width: 1000px = 62.5rem 
 Columns: 12 
 Gutter width: 30px = 1.875rem 
 15px padding from each column side
Grid examples 
More examples at: http://foundation.zurb.com/docs/components/grid.html
Block grid 
Splits contents of a list within the grid
Media queries 
Media Query Ranges: 
 Small: 0 - 640px 
 Medium: 641px - 1024px 
 Large: 1025px - 1440px 
 Extra Large: 1441px - 1920px 
 Extra Extra: 1921px + 
SASS variables:
Mobile first 
Right Wrong
Foundation with Drupal
Base theme 
 ZURB Foundation 
 https://www.drupal.org/project/zurb_foundation
Building sub-theme 
 System requirements: 
 Homebrew(OSX) 
 Node.js 
 Grunt 
 Manually build a theme 
 Using drush (recommended)
Building sub-theme 
 drush dl zurb_foundation-5.0-alpha8 
 drush cc all 
 drush fst [THEMENAME] 
 npm install 
 In sub-theme folder 
 Install dependencies 
 Update jQuery version to 1.10 
 jQueryUpdate module 
 hook_js_alter
SASS 
 Change sub-theme’s .info file settings to use 
CSS preprocessed by SASS 
 In terminal execute “grunt”. 
 Grunt is now running and watching your theme for 
changes (including CSS/SCSS) 
 Change default Foundation settings 
 [subtheme-name]/scss/_variables.scss
Foundation 4 support 
modules 
 Views Foundation 
 help you convert any view into ZurbFoundation features (orbit slider, tabs, accordion, etc.) 
 ZurbOrbit 
 Uses the Media (7.x-2.x-dev) module to add media files to Foundation Orbit slideshow 
 ZurbClearing 
 Uses the Media (7.x-2.x-dev) module to provide a gallery-type layout with a responsive 
lightbox 
 ZurbSection 
 extends the Field Group module to provide output for Foundation tabs of accordion 
groups 
 ZurbInterchange 
 Uses media queries to load the images that are appropriate for a user's browsers
Starter theme comparison 
Feature Foundation 5 Omega 4 Omega 3 Zen 
HTML 5 Yes Yes Yes Yes 
SASS Yes Yes No Yes 
SMACSS Yes Yes No Yes 
Grid Foundation Susy 960 Zen 
Drush support Yes Yes With Omega 
Tools 
Yes 
Mobile First Yes Yes Yes Yes 
Panels layouts Yes Yes Yes Yes 
UI elements Yes No No No
Compatibility – Foundation 4
Compatibility - Foundation 5
THANK YOU!

Using Foundation with Drupal

  • 1.
    USING FOUNDATION WITHDRUPAL 7 Jan Chojnacki Developer
  • 2.
    Outline  Exovein brief  What is Foundation?  Foundation 5 basics  Using Foundation 5 base theme in Drupal 7  Comparison with some other base themes  Discussion
  • 3.
    Exove in brief Exove is a leading Northern European company specializing in open source web services design and development. We help companies conduct better business on the Internet through best-of-breed personnel and solutions Quick facts:  Founded 2006  Over 70 people  Served more than 170 clients  Offices in Finland, Estonia, and the UK  Solid financial status
  • 4.
  • 5.
    What is Foundation?  Free Responsive front-end framework  By ZURB Inc.  Using SASS  Mobile First approach  Customizable  http://foundation.zurb.com/develop/download.html  Latest stable version: 5.4.6
  • 6.
    “ Foundation isbuilt for professionals. ” Bryan Zmijewski, founder of ZURB
  • 7.
    Why to chooseFoundation?  Fast in all aspects:  Building web sites  Page load speed  Solid documentation with examples of usage  http://foundation.zurb.com/docs/  Growing community and support on forum  Customizable UI elements  Javascript plugins
  • 8.
    Foundation 5 Javascriptplugins  Interchange  Navigation  Offcanvas  Top bar  Magelan  Orbit slider  Clearing lightbox  Range Sliders  AbideValidation  Dropdown buttons  Modalwindows  Alert boxes  Tooltips  Joyride  Accordion  Tabs  Equalizer
  • 9.
    UI components Navigation  Icon bar, Side navigation, Sub nav, Breadcrumbs, Pagination  Flex video  Forms  Buttons  Panels  Typography  Tables  Etc…
  • 10.
  • 11.
  • 12.
    Grid defaults Rem base: 16 px  default html and body front-size for the rem value  Rem checker: https://offroadcode.com/prototypes/rem-calculator/  Row width: 1000px = 62.5rem  Columns: 12  Gutter width: 30px = 1.875rem  15px padding from each column side
  • 13.
    Grid examples Moreexamples at: http://foundation.zurb.com/docs/components/grid.html
  • 14.
    Block grid Splitscontents of a list within the grid
  • 15.
    Media queries MediaQuery Ranges:  Small: 0 - 640px  Medium: 641px - 1024px  Large: 1025px - 1440px  Extra Large: 1441px - 1920px  Extra Extra: 1921px + SASS variables:
  • 16.
  • 17.
  • 18.
    Base theme ZURB Foundation  https://www.drupal.org/project/zurb_foundation
  • 19.
    Building sub-theme System requirements:  Homebrew(OSX)  Node.js  Grunt  Manually build a theme  Using drush (recommended)
  • 20.
    Building sub-theme drush dl zurb_foundation-5.0-alpha8  drush cc all  drush fst [THEMENAME]  npm install  In sub-theme folder  Install dependencies  Update jQuery version to 1.10  jQueryUpdate module  hook_js_alter
  • 21.
    SASS  Changesub-theme’s .info file settings to use CSS preprocessed by SASS  In terminal execute “grunt”.  Grunt is now running and watching your theme for changes (including CSS/SCSS)  Change default Foundation settings  [subtheme-name]/scss/_variables.scss
  • 22.
    Foundation 4 support modules  Views Foundation  help you convert any view into ZurbFoundation features (orbit slider, tabs, accordion, etc.)  ZurbOrbit  Uses the Media (7.x-2.x-dev) module to add media files to Foundation Orbit slideshow  ZurbClearing  Uses the Media (7.x-2.x-dev) module to provide a gallery-type layout with a responsive lightbox  ZurbSection  extends the Field Group module to provide output for Foundation tabs of accordion groups  ZurbInterchange  Uses media queries to load the images that are appropriate for a user's browsers
  • 23.
    Starter theme comparison Feature Foundation 5 Omega 4 Omega 3 Zen HTML 5 Yes Yes Yes Yes SASS Yes Yes No Yes SMACSS Yes Yes No Yes Grid Foundation Susy 960 Zen Drush support Yes Yes With Omega Tools Yes Mobile First Yes Yes Yes Yes Panels layouts Yes Yes Yes Yes UI elements Yes No No No
  • 24.
  • 25.
  • 26.

Editor's Notes

  • #22 In sub-theme’s .info file you can choose if to use CSS or CSS preprocessed by SASS If you choose SASS – then execute “grunt” and it will watch your theme for changes. Just like compass watch
  • #23 There are some support modules available for Foundation 4 base theme