maintainable theming

1

Wunderkraut Belgium (Ghent)Frontend Developerjan-yves.vanhaverbeke@wunderkraut.com

Drupal.org: jyveTwitter: janyves

Jan-yves Vanhaverbeke

About me

2

MaintainableDrupal Theming

3

Why

Client: the white-space on the news overview page is wrong!

body #page .view-news .views-row div.node .node-section.clear-block { margin-top: 0 !important;}

4

Agenda

‣ Drupal is special

‣ Optimize your design input

‣ Optimize your Drupal HTML

‣ Write maintainable CSS

‣ Build a maintainable theme

5

Drupal is special

6

Drupal is a CMS

‣ Highly customizable

‣ What if content is added?

‣ What if a block is moved?

7

Content-first approach

‣ First content types, taxonomy, users, comments

‣ Pages assembled from different sources

‣ Theming should support this

8

Optimize your design input

9

Problems with designs

‣ A design is static

‣ Not all pages will be designed

‣ Designs are rarely consistent

‣ A design reflects the ideal situation

10

Solutions

‣ Ask for a Style Guide

‣ Analyze the design

‣ Keep designers involved

11

Style Guide

‣ All recurring design elements and interactions

‣ Leading in case of inconsistencies.

12

Style Guide‣ Site elements:

‣ Navigations: including mouse-over and active states

‣ One or more block templates

‣ A pager

‣ Message boxes: warning, confirmation and error

‣ A form. Typically useful for the contact form

‣ A list of the most important colors

13

Style Guide

‣ Typography:‣ Headings: H1, H2, H3 and H4

‣ Links: color and (optional) underline. Also define a mouse-over state

‣ Paragraph: for default text the line-height and space between text should be defined

‣ (Un)ordered list: How does it look in content?

14

Analyze the design‣ Print all designs

‣ Look for patterns:

‣ Block styles

‣ Image styles

‣ View Modes

‣ Regions...

‣ Convert patterns to HTML tags/classes/styles

15

Optimize your HTML

16

“ The Views output contains a rich set of div tags allowing

fine-grained CSS control over the output. ”

17

Remove HTML

‣ Clean up template files

‣ Examples: Panels, Views, Field

‣ Use Display Suite (Field Templates)

‣ One-time effort

18

Before cleanup

19

After cleanup

20

Module unaware HTML

‣ .panel-pane .pane-title {} vs.block > h2 {}

‣ page.tpl.php vs Panels Layout

‣ Views specific classes

21

Add own classes

‣ Block class: http://drupal.org/project/block_class

‣ Views

‣ Display Suite

‣ Panels

22

Write maintainable CSS

23

Functional selectors

‣ Theme a functional element, not a Drupal module:

‣ Bad:

‣ .views-articles .views-row {}

‣ .views-row {}

‣ Good:

‣ .article-teaser {}

‣ .item-list li {}

24

As generic as possible

.field

vs

.page-article #content div.node div.field-title

25

Avoid overwrites

‣ Remove Drupal and module CSS ‣ function theme_css_alter(&$css) {

unset($css['modules/system/system.menus.css']);}

‣ Dare to rework existing CSS as features are added.

26

Drupal CSS standards

‣ http://drupal.org/node/1887862

‣ .quote { margin-left: 15px; font-style: italic;}

27

Build a maintainable theme

28

Theming is...

‣ Basic design

‣ Features

‣ Reusable styles

29

Basic design

‣ All generic elements: header, footer, layout

‣ Style Guide: navigation, typography, colors, links etc

‣ Simple content page with mixed typographical content.

30

Features

‣ Examples: news, blog, slideshow

‣ Separate CSS files

‣ Clear separation between reuse of styles and custom CSS

31

Styles

‣ Examples: list of teasers, block styles

‣ Power of Sass

‣ Add as you go

32

Power of Sass

‣ Mixins and extendables

‣ Variables

‣ Selector nesting

33

Power of Sass

.node-news { .view-mode-teaser { @extend %teaser; color: $grey; @include border-radius(3px); margin-top: 0; }}

34

Wundertheme

‣ Custom starter theme

‣ Beta

‣ https://github.com/Krimson/wundertheme.git

35

In Summary

36

In Summary

Client: the white-space on the news overview page is wrong!

body #page .view-news .views-row div.node .node-section.clear-block { margin-top: 0 !important;}

37

Power of Sass

.node-news { .view-mode-teaser { @extend %teaser; color: $grey; @include border-radius(3px); margin-top: 0; }}

38

In Summary

‣ Drupal is special

‣ Optimize your design input

‣ Optimize your Drupal HTML

‣ Write maintainable CSS

‣ Build a maintainable theme

39

Questions?

40

41