The Foundations of Being Sassy in Drupal
Upcoming SlideShare
Loading in...5

The Foundations of Being Sassy in Drupal



"The Foundations of Being Sassy with Drupal" is a talk about utilizing the Foundation framework and Sass together in Drupal harmony. ...

"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

This presentation was last updated on April 9, 2014 to reflect updates in Foundation.



Total Views
Views on SlideShare
Embed Views



4 Embeds 107 62 36 8 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Talk about what browser versions it supports, too.
  • Add slides after here as a walkthrough for getting Foundation 4 into Drupal as a theme.
  • Show code for this. (Foundation 4 base theme)
  • Mention v3 compatibility with IE 7 and 8 due to the fact that mobile first was introduced in v4.

The Foundations of Being Sassy in Drupal The Foundations of Being Sassy in Drupal Presentation Transcript

  • THE FOUNDATIONS OF BEING “SASSY” IN DRUPAL Utilizing the Foundation framework and Sass together in Drupal harmony
  • 2 NorthPoint Digital @northps Ellie Roepken Senior Consultant @ellieroepken Shawn Mealey Consultant @mealeyst
  • 3 What is Foundation?
  • 4 What is Foundation? §  Responsive Grid-based CSS Framework §  Developed using Sass §  Compass/Gem Instructions: § §  Customizable: § §  Standalone Sass version: § §  Latest Version: 5.2.1
  • 5 Why Use Foundation? §  Strong baseline for building pages and prototypes § Example templates: §  Easy-to-understand CSS class naming conventions §  Useful Javascript libraries §  Includes customizable UI components § Buttons, forms, typography, menus, alert boxes, etc.
  • 6 Foundation Basics
  • 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 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 Using Foundation: Block Grid Classes §  Responsive block grid for lists.
  • 10 Using Foundation: Visibility Classes §  Screen Resolution §  Screen Orientation §  Touch
  • 11 Using Foundation: Utility Classes §  Block alignment §  Border radius §  Text alignment
  • 12 Foundation + Drupal
  • 13 Using Sass in Drupal 1.  Download Sassy, Prepro and Libraries from § § § 2.  Download PHPSass library to sites/all/libraries § 3.  Configure at /admin/config/media/prepro 4.  List SCSS/Sass files in theme .info file § Compiled by PHPSass library, cached by Drupal.
  • 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 Using Foundation in Drupal: Custom Theme §  Use jQuery Update § §  Include a newer version of jQuery § §  Optional: jQuery Migrate §
  • 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 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 Foundation 4 Browser Support
  • 19 Foundation 5 Browser Support
  • 20 Demo
  • 21 We lead with experience.