The Foundations of Being Sassy in Drupal
-
Upload
ellie-roepken -
Category
Technology
-
view
4.736 -
download
0
description
Transcript of The Foundations of Being Sassy in Drupal
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
[email protected] @ellieroepken
Shawn Mealey Consultant
[email protected] @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.