this talk is aimed at those who already know their    way around Drupal
Im a themer
I want to get rid of themers
I may need to explain myself
who does whatin the Drupal world
developer              themer        site builder            designer
developer
site builder
custom theme
themer         designer
the theme system is…       complex
a front-end developerwho has been forcedto learn PHP in order     to cope with  the theme system
themer         designer
themer         designer
driesnote™
“Are Drupals custom  content types and views   popular because they eliminate the developer?I think the answer is yes.”
I dont think we canget rid of developers
developer              themer        site builder            designer
heres how to get rid  of your themer
designer
your designer writes HTML, CSS and JS
your designer writesfantastic HTML, CSS and JS
understands content andwrites semantic markup
writes re-usable CSSusing a preprocessor
keeps the front-end lean,efficient and responsive
they use whatever technique   is best for the project
BUZZWORDBINGO!
semantic markup   SMACSS / OOCSS     preprocessorasynchronous javascript content out approach
Preprocessors                       Static page generators             Static image prototypingSass — CSS preprocessing   ...
designs a system
hands HTML, CSS and JS over to the site builder
CSS and JS gointo the themeHTML is used asa markup guide
the developer sets one or     two things up*     *can be done in advance
developer
required code
a theme
base theme?
<div id="page-wrapper"><div id="page">    <div id="header"><div class="section clearfix">      <?php if ($logo): ?>       ...
<?phpprint $content;
<div id="<?php print $block_html_id; ?>" class="<?php print$classes; ?>"<?php print $attributes; ?>>  <?php print render($...
<?phpprint $content;
a layout or two
/**  * Implements hook_ctools_plugin_api().  */function ce_panels_ctools_plugin_api($module, $api) {   if ($module == pane...
<?php/** * @file * Layout definition for Code Enigma one column layout. *//** * Panel layout definition. */$plugin = array...
<?php/** * @file * Layout template for Code Enigma one column layout. * * Regions: * - content */if (isset($content[conten...
a method for turning of all   supplied CSS and JS
site builder
required modules
display suite semantic views      panelspanels everywhere semantic panels* *using a forked version atm
<img width="120" height="289" alt="Aliquam bene" src="/files/my_image.jpg" />
<div class="field field-name-field-image field-type-imagefield-label-hidden">  <div class="field-items">    <div resource=...
site builder
designer
some rules
never write a .tpl.php
never write a .tpl.phpunless you really have to
start by outputting no     markup at all
add markup via the UI
think carefully about where  you add your wrappers
why is this good?
give designers freedom
make things easy for   site builders
makes adding markup     consistent
avoids the temptation to do  things in the theme you        shouldnt do
do we actually do this?
no
we keep the themer
questions
exitJames Panton  @mcjim
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Death of a Themer
Upcoming SlideShare
Loading in …5
×

Death of a Themer

4,756 views

Published on

Video at http://www.youtube.com/watch?v=HaJnhYPLvx0

Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.

The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.

With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.

A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.

http://2013.drupalcamplondon.co.uk/session/death-themer

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,756
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Death of a Themer

  1. 1. this talk is aimed at those who already know their way around Drupal
  2. 2. Im a themer
  3. 3. I want to get rid of themers
  4. 4. I may need to explain myself
  5. 5. who does whatin the Drupal world
  6. 6. developer themer site builder designer
  7. 7. developer
  8. 8. site builder
  9. 9. custom theme
  10. 10. themer designer
  11. 11. the theme system is… complex
  12. 12. a front-end developerwho has been forcedto learn PHP in order to cope with the theme system
  13. 13. themer designer
  14. 14. themer designer
  15. 15. driesnote™
  16. 16. “Are Drupals custom content types and views popular because they eliminate the developer?I think the answer is yes.”
  17. 17. I dont think we canget rid of developers
  18. 18. developer themer site builder designer
  19. 19. heres how to get rid of your themer
  20. 20. designer
  21. 21. your designer writes HTML, CSS and JS
  22. 22. your designer writesfantastic HTML, CSS and JS
  23. 23. understands content andwrites semantic markup
  24. 24. writes re-usable CSSusing a preprocessor
  25. 25. keeps the front-end lean,efficient and responsive
  26. 26. they use whatever technique is best for the project
  27. 27. BUZZWORDBINGO!
  28. 28. semantic markup SMACSS / OOCSS preprocessorasynchronous javascript content out approach
  29. 29. Preprocessors Static page generators Static image prototypingSass — CSS preprocessing Hammer for Mac http:// InvisionApp — very slick —Less — similar to Sass hammerformac.com/ http://invisionapp.com/Stylus — a good but less popular Middleman — a bit more complex Shipment — nice dropboxpreprocessor — requires command line http:// integration — http://Susy/Singularity/ZenGrids/ middlemanapp.com/ blog.shipmentapp.com/GridSet — grid system CodeKit — http://incident57.com/ Browsersgenerators codekit/index.php Chrome — Supports Sass in theCompass — add-on functionality Mixture.io http://mixture.io/ web inspector — needs sassfor Sass like vertical rhythm, Serve — Riby gem https:// debugging turned onsprites, css3 etc github.com/gummesson/serve Canary — Same as above butBourbon — Similar to Compass Testing also supports source mapsmuch to their dismay Live Reload Safari — can use the desktopToolkit — A few nice extras to Guard — command line tool, web inspector on the remotehave — https://github.com/ faster than live-reload iphone/ipad siteSnugug/toolkit Adobe Edge Inspect — http:// Browser ExtentionsCSS Frameworks html.adobe.com/edge/inspect/ Web Inspector — needs sassSMACSS — styleguide/ Mixture.io — http://mixture.io/ debugging turned on andframework for developing css Virtual Box with Windows XP and experimental modethat is both modular and scalable snapshots with IE6, IE7, IE8 Speed TracerOOCSS — object orientaed CSS Lots of devices YSlow— more strict than smacss Typography Adobe edge InspectStyleguide generation typecast — http://typecast.com/ Live ReloadKSS — uses comments in files to — can preview fast Visual design and layoutgenerate a styleguide — http:// Colour Fireworks — for working outwarpspire.com/posts/kss/ Kuler — https://kuler.adobe.com/ Photoshop — mainly for imageTypecast — quick way to Colour Lovers — http:// manipulationgenerate styles for type www.colourlovers.com/ InDesign — some very usefulClarify — http://www.clarify.io Color Scheme Designer — http:// tools for wireframesStyle-Sites — https://github.com/ colorschemedesigner.com/ Illustrator — creating SVG filessnugug/style-sites http://color.hailpixel.com/ and illustrations UXPin — http://uxpin.com/
  30. 30. designs a system
  31. 31. hands HTML, CSS and JS over to the site builder
  32. 32. CSS and JS gointo the themeHTML is used asa markup guide
  33. 33. the developer sets one or two things up* *can be done in advance
  34. 34. developer
  35. 35. required code
  36. 36. a theme
  37. 37. base theme?
  38. 38. <div id="page-wrapper"><div id="page"> <div id="header"><div class="section clearfix"> <?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?phpprint t(Home); ?>" rel="home" id="logo"> <img src="<?php print $logo; ?>" alt="<?php printt(Home); ?>" /> </a> <?php endif; ?> <?php if ($site_name || $site_slogan): ?> <div id="name-and-slogan"> <?php if ($site_name): ?> <?php if ($title): ?> <div id="site-name"><strong> <a href="<?php print $front_page; ?>" title="<?
  39. 39. <?phpprint $content;
  40. 40. <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>
  41. 41. <?phpprint $content;
  42. 42. a layout or two
  43. 43. /** * Implements hook_ctools_plugin_api(). */function ce_panels_ctools_plugin_api($module, $api) { if ($module == panels && $api == styles) { return array(version => 2.0); } if ($module == page_manager && $api == pages_default) { return array(version => 1); } if ($module == "panels_mini" && $api == "panels_default") { return array("version" => "1"); }}/** * Implements hook_ctools_plugin_directory() */function ce_panels_ctools_plugin_directory($module, $plugin) { if ($module == page_manager || $module == panels || $module == ctools) { return $plugin; }}
  44. 44. <?php/** * @file * Layout definition for Code Enigma one column layout. *//** * Panel layout definition. */$plugin = array( title => t(Code Enigma One Column), category => t(Code Enigma), icon => ce_one_column.png, theme => ce_one_column, regions => array( content => t(Content), ),);
  45. 45. <?php/** * @file * Layout template for Code Enigma one column layout. * * Regions: * - content */if (isset($content[content])) { print $content[content];}
  46. 46. a method for turning of all supplied CSS and JS
  47. 47. site builder
  48. 48. required modules
  49. 49. display suite semantic views panelspanels everywhere semantic panels* *using a forked version atm
  50. 50. <img width="120" height="289" alt="Aliquam bene" src="/files/my_image.jpg" />
  51. 51. <div class="field field-name-field-image field-type-imagefield-label-hidden"> <div class="field-items"> <div resource="/files/my_image.jpg" rel="og:image rdfs:seeAlso" class="field-item even"> <img width="120" height="289" alt="Aliquam bene" src="/files/my_image.jpg" typeof="foaf:Image"> </div> </div></div>
  52. 52. site builder
  53. 53. designer
  54. 54. some rules
  55. 55. never write a .tpl.php
  56. 56. never write a .tpl.phpunless you really have to
  57. 57. start by outputting no markup at all
  58. 58. add markup via the UI
  59. 59. think carefully about where you add your wrappers
  60. 60. why is this good?
  61. 61. give designers freedom
  62. 62. make things easy for site builders
  63. 63. makes adding markup consistent
  64. 64. avoids the temptation to do things in the theme you shouldnt do
  65. 65. do we actually do this?
  66. 66. no
  67. 67. we keep the themer
  68. 68. questions
  69. 69. exitJames Panton @mcjim

×