The document outlines strategies for efficient and extensible web development markup, emphasizing the importance of 'dominant' markup over 'submissive' markup for better maintenance and lower CSS bloat. It includes a structured session outline, discussing the process of analyzing designs, defining objects, and utilizing tools for effective styling. The presenter also provides code examples and practical tips for implementing these strategies using the SMACSS methodology.

1. DOMINATE THE
THEME LAYER
August 21st.

2. Jesper Wøldiche Rahkonen
Themer / architect at Bysted.
Markup Marine /
Journalist /
Frontend United /
@woeldiche

3. Last chance to run.
BEFORE WE GET STARTED…

4. Focus on
the themer.

5. It’s just OOCSS.
Or smacss.

6. There will be
slides with code.

7. There will be (more)
slides without code.

8. Presenter will
be opinionated.

9. Code available
on Github.

10. A quick outline.
IN THIS SESSION.

11. A beautiful beast.
But a still
a beast.

12. Submissive markup
is efficient markup.

13. Overview of the session.
1 - The gentle way.
2 - The dominating way.
3 - Submissive markup in four easy steps.
4 - Tools of domination.

14. A common approach.
DANGERS OF A GENTLE TOUCH.

15. Don’t let contrib
trick you.

16. Results
> Bloated css

17. Results
> Bloated css
> Tied to markup

18. Results
> Bloated css
> Tied to markup
> Low extensibility

19. Results
> Bloated css
> Tied to markup
> Low extensibility
> High maintenance

20. Stuff you don’t want to do, really.
COMMON PITFALLS

21. Style by Drupal module
#form-­‐campaignmonitor-­‐signup
h2
{
Styles
don’t
go
here…
}

22. Style by Drupal module
#form-­‐campaignmonitor-­‐signup
h2
a
{
Styles
don’t
go
here…
}
Low extensibility.

23. Style by Drupal module
#form-­‐campaignmonitor-­‐signup
h2
a
{
Styles
don’t
go
here…
}
Low extensibility.
Same block, different visuals.

24. Style by page or content type
body.page-­‐article
h2
a
{
Styles
don’t
go
here…
}
#maincontent
.meta
a
{
Styles
don’t
go
here…
}

25. Style by page or content type
body.page-­‐article
h2
a
{
Styles
don’t
go
here…
}
#maincontent
.meta
a
{
Styles
don’t
go
here…
}
Redundant code.

26. Style by page or content type
body.page-­‐article
h2
a
{
Styles
don’t
go
here…
}
#maincontent
.meta
a
{
Styles
don’t
go
here…
}
Redundant code.
Expensive to maintain.

27. Using tags as selectors
.node
.node-­‐meta
span
{
Styles
don’t
go
here…
}

28. Using tags as selectors
.node
.node-­‐meta
span
{
Styles
don’t
go
here…
}
Ties styles to markup.
Harder to re-use.

29. Using tags as selectors
.node
.node-­‐meta
span
{
Styles
don’t
go
here…
}
Ties styles to markup.
Harder to re-use.
Sometimes the date is <p>,
sometimes <span>,
sometimes <data>

30. Using tags as selectors
.node
.node-­‐meta
span
{
Styles
don’t
go
here…
}
Ties styles to markup.
Harder to re-use.
Sometimes the date is <p>,
sometimes <span>,
sometimes <data>
<a>, <img>
etc. are the exceptions.

31. Styling headings by tag
h1
{
Styles
don’t
go
here…
}
h2
{
Styles
don’t
go
here…
}
h3
{
Styles
don’t
go
here…
}

32. Styling headings by tag
h1
{
Styles
don’t
go
here…
}
h2
{
Styles
don’t
go
here…
}
h3
{
Styles
don’t
go
here…
}
Visual hierarchy will not always match outline

33. Styling headings by tag
h1
{
Styles
don’t
go
here…
}
h2
{
Styles
don’t
go
here…
}
h3
{
Styles
don’t
go
here…
}
Visual hierarchy will not always match outline
Low portability

34. Styling headings by tag
h1
{
Styles
don’t
go
here…
}
h2
{
Styles
don’t
go
here…
}
h3
{
Styles
don’t
go
here…
}
Visual hierarchy will not always match outline
Low portability
All your headings might be <h1>

35. Trust me, it wants a firm hand…
DOMINATE YOUR MARKUP!

36. Create architecture
based on design and
business logic.

37. Build web systems.
extensible,
robust,
portable.

38. Style objects,
not elements
and pages.

39. Invest time
for domination.

40. It pays off.

41. It pays off
Lower maintenance,

42. It pays off
Lower maintenance,
Cheaper introduction of new features.

43. It pays off
Lower maintenance,
Cheaper introduction of new features.
Leaner css and faster front-end.

44. Submissive markup in four easy steps.
Analyze design and specs.
Streamline and feedback with designer/client.
Define objects and layout.
Dominate and add styling hooks to markup.

45. Analyze design and specification.
ANALYZE

46. Look beyond the
markup and modules.

49. Identify recurring
patterns.

54. Structural patterns.

56. Visual patterns.

58. Variations.

60. Bring the designer
onboard.
And strategist.

61. Time to make your mark.
STREAMLINE

62. Streamline variations of
common objects.

63. Option 1:
Unify.

64. Option 2:
Define rules for
the variations.

65. Define objects and structure.
DEFINE

66. Define objects from
patterns.

68. SMACSS.

69. A suggested system
Variations.
Style.
Typography.
Structure.
Grids.

70. [Photo: Print with handwritten notes.]

73. Let there be code…
DOMINATE

74. Go with classes for
web systems.

75. Use low
specificity

76. Layer your objects.
<aside
class=“block-­‐sec
st-­‐alternate
grid-­‐2”>
<h1
class=“title-­‐block”>Title</h1>
<div
class=“text-­‐sec”>
Content
goes
here.
</div>
</aside>

77. So…
Analyze
Streamline
Define
Dominate!

78. Let’s sink those styling hooks in.
TOOLS OF DOMINATION

79. It’s a matter
of class.

80. Back to Views.
Get it right to begin with.

81. The scary
render arrays.

82. All-in-three
tools for domination
$vars['classes_array']
$vars['title_attributes_array']['class']
$vars[’content_attributes_array']['class']

83. The result.
<aside
class=“$vars['classes_array']”>
<h1
$vars['title_attributes_array']>Title</h1>
<div
$vars['content_attributes_array']>
Content
goes
here.
</div>
</aside>

84. function
MYTHEME_preprocess_field
(&$vars,$hook)
{
//add
class
to
a
specific
field
switch
($vars['element']['#field_name'])
{
case
'field_summary':
$vars['classes_array'][]
=
'text-­‐teaser';
break;
case
'field_location':
case
'field_date':
case
'field_price’:
case
'field_website’:
$vars['classes_array'][]
=
'list-­‐definition’;
case
'field_deadline':
case
'body':
$vars['classes_array'][]
=
'text-­‐content';
break;
}
}

85. Conditions.
function
MYTHEME_preprocess_panels_pane
(&$vars)
{
//
Add
styling
classes
to
fields
as
panes.
if
($vars['pane']-­‐>type
==
'entity_field')
{
//
Switch
by
field
name.
switch
($vars['content']['#field_name'])
{
case
‘field_name’:
$vars['title_attributes_array']['class'][]
=
’key’;
…
}
}
}

86. What makes you switch?
Field name
Block name
Defining module
View mode
Region
Path
Combinations

87. Pick a function, any
function.
template_preprocess_page,
template_preprocess_html,
template_preprocess_block,
template_preprocess_region,
template_preprocess_field,
template_preprocess_panels_pane.

88. Someone’s special.
THE ODD THREES OUT.

89. Menus.
function
theme_menu_tree__MENU_NAME
($vars)
{
return
'<ul
class=”CUSTOM_CLASS">'
.
$vars['tree']
.
'</
ul>';
}

90. Multi fields.

91. Forms.
Only thing* scarier than ordinary
render arrays.

92. So…
CONCLUSION.

93. Thank you!
Slides
bit.ly/dominate-theme
Tools for domination
github.com/woeldiche/domination_tools
Fireworks stencils
github.com/woeldiche/markup_stencils

94. Tell me what you think.
bit.ly/dominate-theme
munich2012.drupal.org
/program
/sessions
/dominate-theme-layer
@woeldiche

95. Images
Chain
http://commons.wikimedia.org/wiki/File:Twisted_link_chain.jpg