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
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
- 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.scss
layout
_aside.scss
_footer.scss
_header.scss
custom.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...
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">×</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
-
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?
Slides
Discovering Foundation with Sass for Drupal
By Brian Krall
Discovering Foundation with Sass for Drupal
- 1,501