Your SlideShare is downloading. ×
0
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...
3
What is Foundation?
4
What is Foundation?
§  Responsive Grid-based CSS Framework
§  Developed using Sass
§  Compass/Gem Instructions:
§ ht...
5
Why Use Foundation?
§  Strong baseline for building pages and prototypes
§ Example templates: http://foundation.zurb.c...
6
Foundation Basics
7
Using Foundation: Default Settings
§  Breakpoints:
§ Small: 0px – 640px
§ Medium: 641px – 1024px
§ Large: 1025px – 1...
8
Using Foundation: Grid Classes
§  Row
§ Clears all columns and default side margins in columns.
§  Columns
§ Identif...
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
§...
14
Using Foundation in Drupal - Themes
§  Base themes available:
§ ZURB Foundation
§  7.x-5.0-alpha3 – Foundation 5
§ ...
15
Using Foundation in Drupal: Custom Theme
§  Use jQuery Update
§  http://drupal.org/project/jquery_update
§  Include ...
16
Using Foundation in Drupal: Modules
§  Views Foundation
§  Adds Views output for Clearing, Orbit, Top Bar and pricing...
17
Using Foundation in Drupal: Modules
§  Zurb Interchange
§  Adds Interchange functionality to image fields in content ...
18
Foundation 4 Browser Support
19
Foundation 5 Browser Support
20
Demo
21
We lead
with experience.
Upcoming SlideShare
Loading in...5
×

The Foundations of Being Sassy in Drupal

4,917

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,917
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • Transcript of "The Foundations of Being Sassy in Drupal"

    1. 1. THE FOUNDATIONS OF BEING “SASSY” IN DRUPAL Utilizing the Foundation framework and Sass together in Drupal harmony
    2. 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. 3 What is Foundation?
    4. 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. 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. 6 Foundation Basics
    7. 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. 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. 9 Using Foundation: Block Grid Classes §  Responsive block grid for lists.
    10. 10. 10 Using Foundation: Visibility Classes §  Screen Resolution §  Screen Orientation §  Touch
    11. 11. 11 Using Foundation: Utility Classes §  Block alignment §  Border radius §  Text alignment
    12. 12. 12 Foundation + Drupal
    13. 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. 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. 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. 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. 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. 18 Foundation 4 Browser Support
    19. 19. 19 Foundation 5 Browser Support
    20. 20. 20 Demo
    21. 21. 21 We lead with experience.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×