Discovering foundation with sass for drupal

Brian Krall, Sr. Front-end Developer

Who's this guy?

Brian Krall
Sr. Front-end Developer at Duo Consulting
@bkrall on Twitter, br0iler on d.o
Member of 1871
Writing at http://sideproject.io

this is my dog, kirby

he has no idea what foundation is

why we decided to use a front-end framework

Started with Sasson (https://drupal.org/project/sasson)
Wanted to work faster without sacrificing quality
Tested, proven, great community (like Drupal!)
Promote better coding standards and maintenence (like anything, the more you use it, the better you get at it)
Responsive prototypes:
http://foundation.zurb.com/templates.html

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

https://drupal.org/project/zurb-foundation

Recommended release:

7.x-4.0

Docs:

http://foundation.zurb.com/docs/v/4.3.2/

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

PHP 5.3 or later
jQuery Update 1.7+
7.x-4.x: Zurb Foundation 4.x gem

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

Theme preprocessor functions to set-up variables within the template
Create specific custom page, node, view and block templates
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...


 <?php if ($top_bar): ?>
      <!--.top-bar -->
      <?php if ($top_bar_classes): ?>
      <div class="<?php print $top_bar_classes; ?>">
      <?php endif; ?>
        <nav class="top-bar"<?php print $top_bar_options; ?>>
          <ul class="title-area">
            <li class="name"><h1><?php print $linked_site_name; ?></h1></li>
            <li class="toggle-topbar menu-icon"><a href="#"><span><?php print $top_bar_menu_text; ?></span></a></li>
          </ul>
          <section class="top-bar-section">
            <?php if ($top_bar_main_menu) :?>
              <?php print $top_bar_main_menu; ?>
            <?php endif; ?>
            <?php if ($top_bar_secondary_menu) :?>
              <?php print $top_bar_secondary_menu; ?>
            <?php endif; ?>
          </section>
        </nav>
      <?php if ($top_bar_classes): ?>
      </div>
      <?php endif; ?>
      <!--/.top-bar -->
    <?php endif; ?>

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

https://drupal.org/project/zurb_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)

https://drupal.org/project/field_orbit

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

joyride

https://drupal.org/project/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

Kitchen sink
http://foundation.zurb.com/docs/v/4.3.2/components/kitchen-sink.html
Try Foundation
http://tryfoundation.io
Pattern tap
http://patterntap.com/
Getting Sassy with Foundation 4 (video)
http://vimeo.com/86306732

Questions?

@bkrall

Slides

http://tinyurl.com/foundation-d7