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

'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