Tweet
Tweet

Slide 1

Slide 1 text

Dapper Drupal Garrett Dawson John Ferris

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Custom Tailored Themes

Slide 5

Slide 5 text

Why are we here? Why make your own starter theme? Case studies.

Slide 6

Slide 6 text

Front-end Developer.

Slide 7

Slide 7 text

Front-end Developer. HTML + CSS + JS

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

HTML + CSS + JS Themer.

Slide 11

Slide 11 text

HTML + CSS + JS Themer. This is what users touch.

Slide 12

Slide 12 text

A typical approach. Contributed modules Base themes Starter themes

Slide 13

Slide 13 text

What base theme do you use?

Slide 14

Slide 14 text

Contrib is rad!

Slide 15

Slide 15 text

Then, one day...

Slide 16

Slide 16 text

This is important: Front-end tooling.

Slide 17

Slide 17 text

Make your own tools.

Slide 18

Slide 18 text

Wait. What about Contrib?

Slide 19

Slide 19 text

Measuring Up. What markup problems? Who maintains the project? What’s in the toolkit? What do I want to fiddle with?

Slide 20

Slide 20 text

Case Studies

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

7 Staff Members 900+ Websites Stanford Web Services

Slide 23

Slide 23 text

Open Framework

Slide 24

Slide 24 text

Open Framework

Slide 25

Slide 25 text

Open Framework

Slide 26

Slide 26 text

Open Framework

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Panopoly + Bootstrap Kalatheme drupal.org/project/kalatheme

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

bit.ly/14VPriy

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Center

Slide 33

Slide 33 text

Center This is our scaffold Overrides templates Overrides theme functions Predictable and static

Slide 34

Slide 34 text

Prototype

Slide 35

Slide 35 text

Prototype This is what we fork Project specific Cornerstone of the front-end SMACSS

Slide 36

Slide 36 text

Prototype ᴷ inc ᵋᴷ hook based template called in template.php ᴷ sass ᵋᴷ base, components, layouts, etc ᴷ js ᵋᴷ main.js, modularized JavaScripts ᴷ layouts ᵋᴷ templates and template overrides

Slide 37

Slide 37 text

What does this do for us?

Slide 38

Slide 38 text

There is no one-size-fits-all

Slide 39

Slide 39 text

Get your measurements.

Slide 40

Slide 40 text

Start building your own!

Slide 41

Slide 41 text

Continuos Improvement

Slide 42

Slide 42 text

Continuos Continuous Improvement

Slide 43

Slide 43 text

Push your craft forward

Slide 44

Slide 44 text

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