Scalable Stylesheets - Theming with Modular CSS

Drupal excels at making big sites. It's flexible. It scales well. However CSS, written haphazardly, does not scale well. It breaks down and becomes increasingly painful to maintain as sites grow and change with time. Fortunately, if you approach CSS development methodically — in a organized and consistent fashion — your stylesheets can adapt as sites and teams evolve. But it turns out, implementing CSS in such a way is non-trivial in Drupal. In this presentation, we'll look at methods that will empower you take control of your styleheets, and hopefully lead to Drupal themes that are more flexible and withstand the test of time.

Transcript

1. Scalable Stylesheets Theming with Modular CSS John Ferris @pixel_whip 
2. CSS ARCHITECTURE
3. A systematic approach to styling with CSS. CSS ARCHITECTURE
4. OOCSS Object-oriented CSS http://bit.ly/NUkX7Q
5. SMACSS Scalable Modular Architecture for CSS http://smacss.com
6. BEM Block, Element, Modifier http://bit.ly/NzThqF
7. MVCSS Model-View-Controller Stylesheets http://bit.ly/NJRHCl
8. COMMON PRINCIPLES
9. Don’t repeat yourself. Create patterns. CSS ARCHITECTURE
10. Separation of concerns. Don’t mix layout and style. CSS ARCHITECTURE
11. Reduce specificity. Target classes. CSS ARCHITECTURE
12. Consistency and clarity. Define naming conventions. CSS ARCHITECTURE
13. AVOID DCSS ⚠ ( Drupal CSS )
14. Progression of Style Top Left ‑ Bottom Right ‑ ☹
15. Progression of Style Default Tags ‑ Elements ‑ Components ‑ Layout ‑ ☺
16. Contextual Styling CSS Pseudo Logic by exploiting the cascade .not-­‐front  #sidebar-­‐first  .block  h2  {    ... }
17. Contextual Styling PHP logic to apply classes where needed .block-­‐fancy-­‐title  {    ... }
18. 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
19. Applying Classes Through the UI • Views • Semantic Fields • Display Suite • Block Class • Skinr • Fusion Accelerator
20. 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
21. Applying Classes Through the UI Directly to template files With Preprocess Functions
22. Applying Classes Through the UI Directly to template files With Preprocess Functions ☺
23. LET’S DO THIS! https://gist.github.com/3111975
24. Theme Functions 43 Template Files 142 DRUPAL CORE
25. Choose your battles
26. Choose your battles Blocks Fields Menus Forms
27. BLOCKS
28. BLOCKS MARKUP <div  class="classes"  id="block-­‐id">    <h2  class="TITLE-­‐classes">...</h2>    <div  class="CONTENT-­‐classes">        ...    </div> </div>
29. BLOCKS block.tpl.php <div  id="<?php  print  $block_html_id;  ?>"      class="<?php  print  $classes;  ?>"<?php  print  $attributes;  ?>>    <?php  print  render($title_prefix);  ?>    <?php  if  ($block-­‐>subject):  ?>        <h2<?php  print  $title_attributes;  ?>><?php  print  $block-­‐>subject  ?></h2>    <?php  endif;?>    <?php  print  render($title_suffix);  ?>    <div  class="content"<?php  print  $content_attributes;  ?>>        <?php  print  $content  ?>    </div> </div>
30. BLOCKS block.tpl.php <div  id="<?php  print  $block_html_id;  ?>"      class="<?php  print  $classes;  ?>"<?php  print  $attributes;  ?>>    <?php  print  render($title_prefix);  ?>    <?php  if  ($block-­‐>subject):  ?>        <h2<?php  print  $title_attributes;  ?>><?php  print  $block-­‐>subject  ?></h2>    <?php  endif;?>    <?php  print  render($title_suffix);  ?>    <div  <?php  print  $content_attributes;  ?>>        <?php  print  $content  ?>    </div> </div>
31. Attributes Array          ‑ <?php  print  drupal_attributes($vars['#attributes']);  ?>                         ‑ class="input-­‐search  input-­‐inline"  placeholder="Enter  a  search  term…"   title="Enter  the  terms  you  wish  to  search  for." $vars['#attributes']
32. Opportunities to Alter Block Markup hook_block_view_alter() ‑ hook_preprocess_block() ‑ hook_process_block() ⬋                ⬊ block.tpl.php        block-­‐-­‐module.tpl.php
33. 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.    ... }
34. hook_preprocess_block() BLOCKS
35. hook_preprocess_block() BLOCKS
36. hook_preprocess_block() BLOCKS
37. hook_preprocess_block() BLOCKS
38. FIELDS
39. FIELDS MARKUP <div  class="classes">    <div  class="TITLE-­‐classes">...</div>    <div  class="CONTENT-­‐classes">        <div  class="ITEM-­‐classes">            ...        </div>    </div> </div>
40. FIELDS theme_field() function  theme_field($variables)  {    $output  =  ''; ...    //  Render  the  label,  if  it's  not  hidden.    if  (!$variables['label_hidden'])  {        $output  .=  '<div  class="field-­‐label"'  .  $variables['title_attributes']  .                  '>'  .  $variables['label']  .  ':&nbsp;</div>';    }        ...    return  $output; }
41. FIELDS theme_field() function  theme_field($variables)  {    $output  =  ''; ...    //  Render  the  label,  if  it's  not  hidden.    if  (!$variables['label_hidden'])  {        $output  .=  '<div'  .  $variables['title_attributes']  .              '>'  .  $variables['label']  .  ':&nbsp;</div>';    }        ...    return  $output; }
42. hook_preprocess_field() FIELDS
43. hook_preprocess_field() FIELDS
44. hook_preprocess_field() FIELDS
45. hook_preprocess_field() FIELDS
46. hook_preprocess_field() FIELDS
47. MENUS
48. Standardize around the Menu Block module. MENUS
49. MENUS MARKUP <ul  class="MENU-­‐TREE-­‐classes">    <li  class="ITEM-­‐classes">        <a  class="LINK-­‐classes">...</a>    </li>    <li  class="ITEM-­‐classes">...</li>    <li  class="ITEM-­‐classes">...</li>  </ul> theme_menu_tree() theme_menu_link()
50. MENUS theme_menu_link() CORE function  modularstyle_menu_link(array  $variables)  {    $element  =  $variables['element'];    $sub_menu  =  '';    if  ($element['#below'])  {        $sub_menu  =  drupal_render($element['#below']);    }    $output  =  l($element['#title'],                              $element['#href'],                            $element['#localized_options']);        return  '<li'  .  drupal_attributes($element['#attributes'])  .  '>'                          .  $output  .  $sub_menu  .  "</li>\n"; }
51. hook_preprocess_menu_link() MENUS
52. MENUS theme_menu_tree() CORE function  theme_menu_tree($variables)  {    return  '<ul  class="menu">'  .  $variables['tree']  .  '</ul>'; }
53. MENUS theme_menu_tree() PREPROCESS NOT WORKING!!! NO CONTEXT!!!
54. MENUS theme_menu_tree() PLAN B
55. theme_menu_tree() MENUS
56. theme_menu_tree() MENUS
57. theme_menu_tree() MENUS
58. I ♥ it, when a plan comes together.
59. Thank You. John Ferris @pixel_whip 