THE FOUNDATIONS OF
BEING “SASSY” IN DRUPAL
Utilizing the Foundation framework and Sass
together in Drupal harmony
Ellie Roepken
Senior Consultant
[email protected]
@ellieroepken
Shawn Mealey
Consultant
[email protected]
@mealeyst
NorthPoint Digital
www.northps.com
@northps
2
What is
Foundation?
3
What is Foundation?
 Responsive Grid-based CSS Framework
 Developed in Sass
 Recommended Instructions (Gem):
 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
4
Why Use Foundation?
 Strong baseline for building pages
 Example templates: http://foundation.zurb.com/templates.php
 Easy-to-understand naming conventions with classes
and IDs
 Variables, functions and mixins
 Useful Javascript libraries
 Includes customizable UI components
 Buttons, forms, typography, menus, alert boxes, etc.
5
Installing
Foundation
6
Using Foundation
7
Using Foundation: Default Settings
 Breakpoints:
 Small: Up to 768px
 Medium: Up to 1280px
 Large: Up to 1440px
 Extra Large: 1440px and up
 Grid:
 Columns: 12
 Gutter: 20px
 Em base: 16px
8
Using Foundation: Browser Support
9
Using Foundation: Grid Classes
 Rows
 <div class=“row”></div>
 Columns
 Identifies how many columns an element should span
 <section class=“large-8 columns”></section>
 <aside class=“large-4 columns”></aside>
 Large/Small
 <section class=“large-8 small-12 columns”></section>
 <aside class=“large-4 small-12 columns”></aside>
 Pushing/Pulling
 <section class=“large-8 small-12 push-4 columns”></section>
 <aside class=“large-4 small-12 pull-8 columns”></aside>
10
Using Foundation: Visibility Classes
 Screen Resolution
 <div class=“hide-for-large-up”></div>
 <div class=“show-for-medium-down”></div>
 Screen Orientation
 <div class=“hide-for-portrait”></div>
 <div class=“show-for-landscape”></div>
 Touch
 <div class=“show-for-touch”></div>
 <div class=“hide-for-touch”></div>
11
Using Foundation: Media Queries
 @media #{$screen}
 @media #{$small}
 @media #{$medium}
 @media #{$large}
 @media #{$landscape}
 @media #{$portrait}
12
UI Components
13
UI Components: Navigation
14
UI Components: Buttons
15
UI Components: Forms
16
UI Components: Type
17
UI Components: Miscellaneous
18
Javascript Plugins
19
Javascript Plugins: Joyride
20
Javascript Plugins: Magellan
21
Javascript Plugins: Orbit
22
Where’s the
Drupal?
23
Using Sassy
 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
 Download PHPSass library to sites/all/libraries
 https://github.com/richthegeek/phpsass
 Configure at /admin/config/media/prepro
 List SCSS files in .info file
24
Using Foundation in Drupal
 Base themes available:
 ZURB Foundation
 7.x-1.0-alpha1 – Foundation 3
 7.x-4.0-dev – Foundation 4
 Others currently in development:
 Cogito
 Zoundation
 Build your own theme!
25
We lead
with experience.
26