These slides have been presented in DrupalCamp Baltics 2014 by Jan Chojnacki

1. USING FOUNDATION
WITH DRUPAL 7
Jan Chojnacki
Developer

2. 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

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. START!

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 is built for professionals. ”
Bryan Zmijewski, founder of ZURB

7. 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

8. 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

9. UI components
 Navigation
 Icon bar, Side navigation, Sub nav, Breadcrumbs, Pagination
 Flex video
 Forms
 Buttons
 Panels
 Typography
 Tables
 Etc…

10. Foundation 5 basics

11. Grid

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
More examples at: http://foundation.zurb.com/docs/components/grid.html

14. Block grid
Splits contents of a list within the grid

15. Media queries
Media Query Ranges:
 Small: 0 - 640px
 Medium: 641px - 1024px
 Large: 1025px - 1440px
 Extra Large: 1441px - 1920px
 Extra Extra: 1921px +
SASS variables:

16. Mobile first
Right Wrong

17. Foundation with Drupal

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
 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

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. Compatibility – Foundation 4

25. Compatibility - Foundation 5

26. THANK YOU!