Discovering foundation with sass for drupal


Brian Krall, Sr. Front-end Developer


Who's this guy?



 

this is my dog, kirby











he has no idea what foundation is

why we decided to use a front-end framework


why we picked foundation


  • Mobile-first
  • Totally flexible and customizable grids 
  • Small and medium breakpoints baked in
  • Design in the browser (when its faster)
  • Decide what components get used
  • Use resources/templates for rapid prototyping
  • Semantic, use any class you want!
  • Works awesome with Sass + Compass
  • Great support with Drupal and modules

YOU Don't have to use the whole enchilada

get started with the base Theme


Recommended release:
7.x-4.0

Docs:

Foundation 5 is rad but its not ready for prime time... 

What you get... 


  • A base theme with Zurb Foundation (don't change PHP/CSS in zurb-foundation folder)
  • STARTER theme to create your custom theme 
  • Sass and Compass set-up (config.rb, Gemfile, etc.)
  • Commented Template.php preprocessor functions
  • Modular folder structure
  • Foundation icons
  • Orbit (responsive image slider) and javascript components 

Foundation/SASS requirements


To install the ruby gem:

 gem install zurb-foundation

Bundler (http://bundler.io) recommended if you're using multiple versions. 

MODULAR STRUCTURE

- scss     _common.scss     _drupal.scss    _mixins.scss- components     _blocks.scss     _buttons.scss     _forms.scss    _icons.scss    _type.scsslayout    _aside.scss    _footer.scss    _header.scsscustom.scss

WHAT'S IN _DRUPAL.SCSS?


// Drupal comes with CSS quirks (Drupalisms). Unravel or override them here.

// Make the "sticky" Top Bar play nice with the "fixed" Admin Menu.
.admin-menu .fixed {
  top: emCalc(29px);
}

// Remove the bottom padding on status messages when displayed inside a Zurb
// Foundation Reveal modal.
#status-messages.reveal-modal {
  .alert-box {
    margin-bottom: 0;
  }
}

What does it look like out of the box?



custom theme settings



drupal and foundation have to understand each other


ways to go about it

  1. Theme preprocessor functions to set-up variables within the template
  2. Create specific custom page, node, view and block templates
  3. Display suite: http://drupal.org/project/ds
               

let's see what you can do



 

 Grid 



foundation 4 Includes small and large grids

  • Grids are nestable
  • 12 column grid system
  • Put everything in a row 

 <div class="row">     <div class="small-2 large-4 columns">...</div>     <div class="small-4 large-4 columns">...</div>     <div class="small-6 large-4 columns">...</div></div>

12-column grid




Adding the medium grid

In Foundation 4, add this to your custom.scss
     


    @import "foundation/components/grid-5"; 

<div class="large-12 medium-4 small-6 columns">...</div>

use GRID W/  display suite




Top bar

Preconfigured to work with main menu... 




ui elements (i.e. buttons)


 <!-- Size Classes -->
<a href="#" class="button">Default Button</a>
<a href="#" class="tiny button">Tiny Button</a>
<a href="#" class="small button">Small Button</a>
<a href="#" class="large button">Large Button</a>

<!-- Color Classes -->
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button success">Success Button</a>
<a href="#" class="button alert">Alert Button</a>

interchange

Dynamically load responsive content





using interchange

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">
Adds settings to Image field types in the Field UI display settings under Manage Display (smallest to largest)
Requires: Field formatting settings (https://drupal.org/project/field_formatter_settings)

Reveal (modals)


<div id="myModal" class="reveal-modal"><h2>Moooooooodals</h2><p class="lead">Your couch.  It is mine.</p><p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p><a class="close-reveal-modal">&#215;</a></div>

orbit (image slider)


Needs LibDisplay mode for image field / field collections (port of Field Slideshow). 

joyride 

(Uses context UI, copy-and-paste method, add library)

foundation sass mixins

  • Dependent on Compass extension (included)
/sites/all/STARTER/scss/base/_init.scss

Or individually....

grid mixins

You can use grid mixins that let you layout the page without using presentational classes you don't want.
(i.e. <div class="row">)

 <section class="container">
<article><!-- Content --></article>


<aside><!-- Content --></aside>


</section>


.container {@include grid-row;}
article {@include grid-column(9);}
aside {@include grid-column(3);}

media query mixins




Resources


Questions?





Slides

http://tinyurl.com/foundation-d7

Discovering Foundation with Sass for Drupal

By Brian Krall

Made with Slides.com

Discovering Foundation with Sass for Drupal

  • 1,594

More from Brian Krall