"The Foundations of Being Sassy with Drupal" is a talk about utilizing the Foundation framework and Sass together in Drupal harmony. Foundation is a responsive front-end grid-based framework created by Zurb that is built on Sass and provides a sound baseline for themers to create clean and efficient markup without having to do the heavy lifting. We will go through installing and configuring the latest version of Foundation, some basic concepts with Sass, and provide some real-world examples of how it helps to streamline development in a fast-paced environment. By showing how versatile Foundation is and the slew of features it provides out-of-the-box, this framework will quickly become a valuable asset in your development toolbox. C'mon, get Sassy! For more information about Foundation framework, go to http://foundation.zurb.com. This presentation was last updated on April 9, 2014 to reflect updates in Foundation.

1. THE FOUNDATIONS OF BEING
“SASSY” IN DRUPAL
Utilizing the Foundation framework and Sass
together in Drupal harmony

2. 2
NorthPoint Digital
www.northps.com
@northps
Ellie Roepken
Senior Consultant
elizabeth_roepken@northps.com
@ellieroepken
Shawn Mealey
Consultant
shawn_mealey@northps.com
@mealeyst

3. 3
What is Foundation?

4. 4
What is Foundation?
§ Responsive Grid-based CSS Framework
§ Developed using Sass
§ Compass/Gem Instructions:
§ http://foundation.zurb.com/docs/sass.html
§ Customizable:
§ http://foundation.zurb.com/download.php
§ Standalone Sass version:
§ https://github.com/zurb/foundation/tree/scss-standalone
§ Latest Version: 5.2.1

5. 5
Why Use Foundation?
§ Strong baseline for building pages and prototypes
§ Example templates: http://foundation.zurb.com/templates.php
§ Easy-to-understand CSS class naming conventions
§ Useful Javascript libraries
§ Includes customizable UI components
§ Buttons, forms, typography, menus, alert boxes, etc.

6. 6
Foundation Basics

7. 7
Using Foundation: Default Settings
§ Breakpoints:
§ Small: 0px – 640px
§ Medium: 641px – 1024px
§ Large: 1025px – 1440px
§ Extra Large: 1441px – 1920px
§ Extra Extra Large: 1921+
§ Grid:
§ Rem/Em base: 16px
§ Gutter: 30px
§ Columns: 12

8. 8
Using Foundation: Grid Classes
§ Row
§ Clears all columns and default side margins in columns.
§ Columns
§ Identifies how many columns an element should span
§ Layout can differ based on screen size
§ Pushing/Pulling

9. 9
Using Foundation: Block Grid Classes
§ Responsive block grid for lists.

10. 10
Using Foundation: Visibility Classes
§ Screen Resolution
§ Screen Orientation
§ Touch

11. 11
Using Foundation: Utility Classes
§ Block alignment
§ Border radius
§ Text alignment

12. 12
Foundation + Drupal

13. 13
Using Sass in Drupal
1. Download Sassy, Prepro and Libraries from Drupal.org
§ http://www.drupal.org/project/prepro
§ http://www.drupal.org/project/sassy
§ http://www.drupal.org/project/libraries
2. Download PHPSass library to sites/all/libraries
§ https://github.com/richthegeek/phpsass
3. Configure at /admin/config/media/prepro
4. List SCSS/Sass files in theme .info file
§ Compiled by PHPSass library, cached by Drupal.

14. 14
Using Foundation in Drupal - Themes
§ Base themes available:
§ ZURB Foundation
§ 7.x-5.0-alpha3 – Foundation 5
§ 7.x-4.0 – Foundation 4
§ Others currently in development:
§ Cogito
§ Zoundation
§ Build your own theme!

15. 15
Using Foundation in Drupal: Custom Theme
§ Use jQuery Update
§ http://drupal.org/project/jquery_update
§ Include a newer version of jQuery
§ http://drupal.org/node/1058168
§ Optional: jQuery Migrate
§ https://github.com/jquery/jquery-migrate

16. 16
Using Foundation in Drupal: Modules
§ Views Foundation
§ Adds Views output for Clearing, Orbit, Top Bar and pricing tables.
§ Zurb Orbit
§ Leverages the Media (7.x-2.x-dev) module to add images or videos to
a slideshow.
§ Zurb Clearing
§ Leverages the Media (7.x-2.x-dev) module to provide a gallery-type
layout with a responsive lightbox.
§ Zurb Section
§ Extends the Field Group module to include output for Foundation
Sections.

17. 17
Using Foundation in Drupal: Modules
§ Zurb Interchange
§ Adds Interchange functionality to image fields in content type display
management.
§ Zurb Twenty Twenty
§ A sliding comparison tool for image fields.
§ Not included with Foundation by default, but can be added.

18. 18
Foundation 4 Browser Support

19. 19
Foundation 5 Browser Support

20. 20
Demo

21. 21
We lead
with experience.