Dapper Drupal - Custom Tailored Drupal Themes

DapperDrupal

Garrett DawsonJohn Ferris

Sunday, June 23, 13

Sunday, June 23, 13

Sunday, June 23, 13

Custom TailoredThemes

Sunday, June 23, 13

Why are we here?

Why make your own starter theme?

Case studies.

Sunday, June 23, 13

Front-end Developer.

Sunday, June 23, 13

Front-end Developer.

HTML + CSS + JS

Sunday, June 23, 13

Front-end Developer.

HTML + CSS + JS+ theme functions + template files + render arrays + preprocess functions + process functions + alter

functions + theme hook suggestions + views + display suite +panels + cray cray

Sunday, June 23, 13

HTML + CSS + JS+ theme functions + template files + render arrays + preprocess functions + process functions + alter

functions + theme hook suggestions + views + display suite +panels + cray cray

Themer.

Sunday, June 23, 13

Front-end Developer.

Sunday, June 23, 13

HTML + CSS + JS

Front-end Developer.

Sunday, June 23, 13

HTML + CSS + JS

This is what users touch.

Front-end Developer.

Sunday, June 23, 13

A typical approach.

Contributed modules

Base themes

Starter themes

Sunday, June 23, 13

What base themedo you use?

Sunday, June 23, 13

Contrib is rad!

Sunday, June 23, 13

Then, one day...

Sunday, June 23, 13

This is important: Front-end tooling.

Sunday, June 23, 13

Make your own tools.

Sunday, June 23, 13

Wait. What about contrib?

Sunday, June 23, 13

Measuring Up.

What markup problems?

Who maintains the project?

What’s in the toolkit?

What do I want to fiddle with?

Sunday, June 23, 13

CaseStudies

Sunday, June 23, 13

Sunday, June 23, 13

7Staff Members

900+Websites

Stanford Web Services

Sunday, June 23, 13

Open Framework

Sunday, June 23, 13

Open Framework

Sunday, June 23, 13

Open Framework

Sunday, June 23, 13

Open Framework

Sunday, June 23, 13

Sunday, June 23, 13

Panopoly + Bootstrap

Kalatheme

drupal.org/project/kalatheme

Sunday, June 23, 13

Sunday, June 23, 13

bit.ly/14VPriy

Sunday, June 23, 13

Sunday, June 23, 13

Center

Sunday, June 23, 13

Center

This is our scaffold

Overrides templates

Overrides theme functions

Predictable and static

Sunday, June 23, 13

Prototype

Sunday, June 23, 13

Prototype

This is what we fork

Project specific

Cornerstone of the front-end

SMACSS

Sunday, June 23, 13

Prototype

─ inc

└─ hook based template called in template.php

─ sass

└─ base, components, layouts, etc

─ js

└─ main.js, modularized JavaScripts

─ layouts

└─ templates and template overrides

Sunday, June 23, 13

What does this do for us?

Sunday, June 23, 13

There is noone-size-fits-all

Sunday, June 23, 13

Get your measurements.

Sunday, June 23, 13

Start building your own!

Sunday, June 23, 13

Continuos Improvement

Sunday, June 23, 13

Continuos Continuous

Improvement

Sunday, June 23, 13

Push your craft forward

Sunday, June 23, 13

And this is the end.

Photo Credits:

Slide 1 - http://bit.ly/141n1US

Slide 4 - http://bit.ly/12ifyN0

Folks I talked with:

Stanford Web Services - http://stanford.io/16qmvQA

Kalamuna - http://bit.ly/19fE7E5

Code Enigma - http://bit.ly/14QwLSQ

Sunday, June 23, 13