THE FOUNDATIONS OF BEING “SASSY” IN DRUPAL

Utilizing the Foundation framework and Sass

together in Drupal harmony

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

What is Foundation?

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

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

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

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

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.