Responsive theming
and getting started with
Foundation 5

Drupalcamp London 2015

Richard Moger

What

A methodology for Drupal theming 

• Drupal theming options

• Front End Frameworks

• Foundation 5

Why do a talk?

• Share findings to help others

Drupal Theming

• The Drupal Theming Experience

• Theming Options

• Benefits of a Framework

• Drawbacks of a Framework

General theming issues

Pre-RWD

• Not intuitive

• Lots of moving parts

• Poor code structure and reuse within and across projects: Spaghetti css

• Time consuming

RWD

• Thing didn't get easier

Drupal theming options

No theme, Bartik!

Perfectly valid for many projects

Drupal theming options

Off the shelf

• Very fast to implement

• Designed around specific layouts

• Often missing lots of key elements

Easy but very restrictive and brittle. Install at will repent at leisure.

Drupal theming options

Base/Starter theme
Zen, Omega, Responsive theme, custom theme

• Very flexible

• Custom grids

• CSS pre-processors SASS/LESS

• RWD media queries

Blank piece of paper. Great for the theming specialists, tricky for beginners

Drupal theming options

Front end Framework based theme.
Bootstrap, HTML boilerplate, Foundation.

• Standard set of css and js components

• Lots of base styles

• Starts outside Drupal

• Often a 3rd party ported to Drupal theme

Drupal theming options

Benefits of a Framework

• Potentially faster theming

• Battle tested

• Less custom code

• Maintainable

• Opinionated

• The Drupal way

Drupal theming options

Drawbacks of a Framework

• Opinionated. Complex requirements a lot of bending and overriding. Check requirements.

• Sometimes Bloated

• May be too restrictive for themers

Why we use Foundation 5

• Good flexible starting point

• Modern flat feel

• Comes with stack of pre-defined base classes

  • Typography

  • forms & other UI elements

  • Navigation elements

• Can be compiled with some or all features, reducing bloat

• Nothing against other 3rd party frameworks

• Lower level ones don't seem to make sense within Drupal context, use base theme

Local development

• Vagrant for local dev

• VLAD/Custom-settings extends VLAD

• Node/Libsass used to compile SCSS partials to minified CSS

• Alternatively Ruby/Compass

Nodejs & packages

//run grunt on host not vm 

cd /var/www/sites/[myproject]/docroot/sites/all/themes/[subthemename]

sudo npm install -g bower grunt-cli 
npm install 
grunt 

• Install bower & grunt using node package manager (must have node & npm, MacOS pre-installed)
• Bower package manager
• Grunt task runner
• code lives within subtheme directory
• Install chrome livereload plugin

Installing Foundation theme

drush dl zurb_foundation --select  //select version
drush en zurb_foundation 
drush cc all
drush fst [subthemename]

• Download Foundation
• Create subtheme using drush
• Alternatively, manually duplicate starter theme and amend

Theme directory

• css 
• js
• node_modules
• scss
• templates
• .info
• template.php

SCSS directory

• smaccs architecture
  • base 
  • layout
  • modules
  • states
  • theme
• vendor
• components
• variables/settings
• note: valid up to 5 rc1

_settings.scss

// We use these to style paragraphs
 $paragraph-font-family: inherit;
// $paragraph-font-weight: normal;
$paragraph-font-weight: 300;
// $paragraph-font-size: 1rem;
// $paragraph-line-height: 1.6;
// $paragraph-margin-bottom: rem-calc(20);
// $paragraph-aside-font-size: rem-calc(14);
// $paragraph-aside-line-height: 1.35;
// $paragraph-aside-font-style: italic;
// $paragraph-text-rendering: optimizeLegibility;

• 1200 lines of settings

• fairly granular

• custom mixins

Utility Classes

• .offset, .push, .pull

• .show-for-small-only, .hide-for-medium-up

• .show-for-landscape, .hide-for-portrait, .show-for-touch

• .small-only-text-right

• .radius, .rounded

• .left, .right

Add classes to markup

• Display suite

• Template files

• block_class module

• Views classes

• Preprocess functions inject css into fields

Responsive Layouts

• Responsive grid markup

• Media queries

• Units

• Complimentary modules

Responsive grid markup

<div class="row"> 
  <div class="small-2 medium-3 large-4 columns">London column 1</div> 
  <div class="small-2 medium-3 large-4 columns">London column 2</div> 
  <div class="small-2 medium-3 large-4 columns">London column 3</div>
  <div class="small-2 medium-3 large-4 columns">London column 4</div> 
</div>
 

Media queries

• @media #{$small-up} {
  // my awesome mobile styles
  }

• @media #{$small-only} { }

• @media #{$medium-up} { }

• @media #{$medium-only} { }

• @media #{$large-up} { }

• @media #{$large-only} { }

• @media #{$xlarge-up} { }

• @media #{$xlarge-only} { }

• @media #{$xxlarge-up} { }

Complimentary modules

• Block class: add classes to blocks

• Display suite: custom view mode layouts for code reuse

• Panels: Pager layouts and block content

• Picture: responsive images

• Flexislider: responsive sliders

Foundation example elements

• Buttons

• Button Groups

• Forms

• Topbar

Base elements

Buttons

Text

Base elements

Button groups

Text

Base elements

Forms

Text

Top bar

• sticky
• mobile
• configurable
• Drupal main menu implemented

Off canvas menus

The end. Thank you :-)

Slides

https://slides.com/richardmoger/responsive-theming-drupal-foundation-5

Say hello

@richardmoger

richard.moger AT claritis.co.uk

www.claritis.co.uk