Responsive theming
and getting started with
Foundation 5

Drupalcamp Bristol 2015

Richard Moger


twitter: @richardmoger

Thank you



About Me



  • Building websites since 1998

  • Built first site in 1999

  • Steered online growth from 0 to £35 million over 10 years 

  • Moved on in 2009, got into Drupal & FOSS 

  • 2010 started web design business Claritis





About Claritis



  • Kent based Drupal shop

  • SME market, sitebuilding, development, theming, hosting

  • End to end for our clients

  • Development, theming & hosting for agency partners

Why do a talk?

  • Share findings to help others

  • Alleviate guilt for not contributing to D8




  • Drupal theming overview

  • Front end frameworks

  • Foundation 5

  • Demo

My theming experience



  • Simplest of things are hard 

  • Not intuitive

  • Lots of moving parts & areas to consider

  • Spaghetti css is really easy recipe to make

  • Spaghetti is brittle

  • Time consuming

Along came Responsive



  • Things got worse

  • Front end toolsets got more complex

  • Not responsive not an option in 2015

'A brief for responsive? Oh, ok, use the supplied 960 grid psd and make this responsive please, k thx bye'

Drupal theming options



  • Core theme

  • Off the shelf

  • Drupal base theme

  • CSS Framework

Drupal Base theme



  • Zen, Omega, Responsive theme, custom roll yer own

  • Very flexible, Custom grids, CSS pre-processors SASS/LESS

  • RWD media queries

  • Great for the theming specialists

  • Still hard/time consuming for non-specialists

Framework based theme



  • Lives outside Drupal land

  • Bootstrap, Foundation

  • css and js components

  • Lots of base styles

  • Ported to Drupal theme

Drawbacks of a framework



  • Opinionated. There are ways to do things & rules to follow

  • Bending and overriding to get classes into markup

  • Can be bloated

  • Something else to learn, easier to write your own?

Benefits of a CSS Framework



  • Code reuse. Not reinventing the wheel

  • Getting off the Drupal island is healthy

  • Battle tested browsers / devices / other cms / frameworks

  • Opinionated, lots of base settings.

  • Protyping can be done without Drupal

  • Staff training, resources, continuity across projects

  • maintainable, better quality themes?

Framework sweet spot

  • RWD projects with a flexible or fairly basic design brief in need of solid solution

  • Agencies & shops looking to standardize theming across projects

  • Agencies & shops without dedicated Drupal theming skillset 




  • Worlds most popular CSS framework

  • Implemented in Drupal

  • Lots of supporting Drupal projects

Foundation 5



  • Nicer looking starting point (IMO!)

  • Awesome settings file 

  • Lots of great base & utility classes

  • Active community

    • Bootstrap 80k stars & 657 contributors

    • Foundation 20k stars & 760 contributors

  • Mascot is a Yeti




  • Foundation is SASS based and needs compiling

  • Vagrant for local dev (VagrantLampAnsibleDrupal)

  • Git, bitbucket,

  • Drush aliases for pulling down db's and files

  • Nodejs - server side js. 

  • Grunt - task runner, does stuff on change

  • Libsass - compiles SCSS files (_partials) to CSS 

  • Livereload - auto refreshes browser on code change

Classes & attributes



  • Display suite module

  • Template files

  • Block_class module

  • Views classes

  • Theme preprocess functions, template.php

Complimentary modules



  • Block class: add classes to blocks

  • Display suite: custom view mode layouts 

  • Panels: page layouts and block content

  • Picture & breakpoints: responsive images

  • Flexislider: responsive sliders

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> 

Demo - Fantasy Site






  • Things must get simpler to build
  • TWIG and D8 will make injecting css and bending easier to bring in frameworks.
  • Foundation 6 (due maybe Autumn 2015)
    • Flexbox inside
    • Re-written more advanced grid system,
    • Re-written js
    • Leaner code
  • Bootstrap / Foundation / X framework as core theme? Ok for Symfony why not front end framework OK?

That's all folk!


Get in touch







Base elements





Base elements



Button groups


Base elements





Top bar



  • sticky
  • mobile
  • configurable
  • Drupal main menu implemented




Off canvas menus



The end. Thank you :-)





Say hello


richard.moger AT