Responsive theming
and getting started with
Foundation 5

Drupalcamp Bristol 2015

Richard Moger

email: richard.mogerclaritis.co.uk

twitter: @richardmoger

Thank you

 

 

About Me

 

 

  • Building websites since 1998

  • Built first jamesvillas.com 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

Overview

 

 

  • 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 

Bootstrap

 

 

  • 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

Stack

 

 

  • Foundation is SASS based and needs compiling

  • Vagrant for local dev (VagrantLampAnsibleDrupal)

  • Git, bitbucket, dploy.io

  • 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> 
</div>
 

Demo - Fantasy Site

 

 

Future

 

 

  • 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

 

richard.moger@claritis.co.uk

@richardmoger

 

 

 

 

 

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