Consistency and clarity.
Define naming conventions.
CSS ARCHITECTURE
Slide 13
Slide 13 text
AVOID DCSS
⚠
( Drupal CSS )
Slide 14
Slide 14 text
Progression
of Style
Top Left
‑
Bottom Right
‑
☹
Slide 15
Slide 15 text
Progression
of Style
Default Tags
‑
Elements
‑
Components
‑
Layout
‑
☺
Slide 16
Slide 16 text
Contextual Styling
CSS Pseudo Logic by exploiting the cascade
.not-‐front #sidebar-‐first .block h2 {
...
}
Slide 17
Slide 17 text
Contextual Styling
PHP logic to apply classes where needed
.block-‐fancy-‐title {
...
}
Slide 18
Slide 18 text
Naming Conventions
What you have
.item-‐list,
.views-‐row {
...
}
.menu,
.leaf,
.leaf a {
...
}
.resource-‐list,
.resource-‐item {
...
}
.nav,
.nav-‐item,
.nav-‐link {
...
}
What you want
Slide 19
Slide 19 text
Applying Classes
Through the UI
• Views
• Semantic Fields
• Display Suite
• Block Class
• Skinr
• Fusion Accelerator
Slide 20
Slide 20 text
Applying Classes
Through the UI
Directly to template files
block.tpl.php
block-‐-‐footer.tpl.php
block-‐-‐header.tpl.php
block-‐-‐search.tpl.php
block-‐-‐navigation-‐-‐menu.tpl.php
block-‐-‐navigation-‐-‐arghh.tpl.php
block-‐-‐this-‐-‐sucks.tpl.php
block-‐-‐wtf.tpl.php
block-‐-‐i-‐need-‐a-‐drink.tpl.php
Slide 21
Slide 21 text
Applying Classes
Through the UI
Directly to template files
With Preprocess Functions
Slide 22
Slide 22 text
Applying Classes
Through the UI
Directly to template files
With Preprocess Functions
☺
Slide 23
Slide 23 text
LET’S DO THIS!
https://gist.github.com/3111975
Slide 24
Slide 24 text
Theme Functions
43
Template Files
142
DRUPAL CORE
Slide 25
Slide 25 text
Choose your battles
Slide 26
Slide 26 text
Choose your battles
Blocks Fields Menus Forms
Slide 27
Slide 27 text
BLOCKS
Slide 28
Slide 28 text
BLOCKS MARKUP
...
...
Slide 29
Slide 29 text
BLOCKS block.tpl.php
>
subject): ?>
>subject ?>
>
Slide 30
Slide 30 text
BLOCKS block.tpl.php
>
subject): ?>
>subject ?>
>
Slide 31
Slide 31 text
Attributes Array
‑
‑
class="input-‐search input-‐inline" placeholder="Enter a search term…"
title="Enter the terms you wish to search for."
$vars['#attributes']
Slide 32
Slide 32 text
Opportunities to Alter Block Markup
hook_block_view_alter()
‑
hook_preprocess_block()
‑
hook_process_block()
⬋ ⬊
block.tpl.php block-‐-‐module.tpl.php
Slide 33
Slide 33 text
BLOCKS hook_preprocess_block()
function [theme]_preprocess_block(&$vars) {
// Set shortcut variables.
...
// Set global classes for all blocks.
...
// Add specific classes and/or
// theme_hook_suggestions to targeted blocks.
...
}
Slide 34
Slide 34 text
hook_preprocess_block()
BLOCKS
Slide 35
Slide 35 text
hook_preprocess_block()
BLOCKS
Slide 36
Slide 36 text
hook_preprocess_block()
BLOCKS
Slide 37
Slide 37 text
hook_preprocess_block()
BLOCKS
Slide 38
Slide 38 text
FIELDS
Slide 39
Slide 39 text
FIELDS MARKUP
...
...
Slide 40
Slide 40 text
FIELDS theme_field()
function theme_field($variables) {
$output = '';
...
// Render the label, if it's not hidden.
if (!$variables['label_hidden']) {
$output .= '
' . $variables['label'] . ':
';
}
...
return $output;
}
Slide 41
Slide 41 text
FIELDS theme_field()
function theme_field($variables) {
$output = '';
...
// Render the label, if it's not hidden.
if (!$variables['label_hidden']) {
$output .= '' . $variables['label'] . ': ';
}
...
return $output;
}