Your SlideShare is downloading. ×
Death of a Themer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Death of a Themer

4,317

Published on

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

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,317
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. this talk is aimed at those who already know their way around Drupal
  • 2. Im a themer
  • 3. I want to get rid of themers
  • 4. I may need to explain myself
  • 5. who does whatin the Drupal world
  • 6. developer themer site builder designer
  • 7. developer
  • 8. site builder
  • 9. custom theme
  • 10. themer designer
  • 11. the theme system is… complex
  • 12. a front-end developerwho has been forcedto learn PHP in order to cope with the theme system
  • 13. themer designer
  • 14. themer designer
  • 15. driesnote™
  • 16. “Are Drupals custom content types and views popular because they eliminate the developer?I think the answer is yes.”
  • 17. I dont think we canget rid of developers
  • 18. developer themer site builder designer
  • 19. heres how to get rid of your themer
  • 20. designer
  • 21. your designer writes HTML, CSS and JS
  • 22. your designer writesfantastic HTML, CSS and JS
  • 23. understands content andwrites semantic markup
  • 24. writes re-usable CSSusing a preprocessor
  • 25. keeps the front-end lean,efficient and responsive
  • 26. they use whatever technique is best for the project
  • 27. BUZZWORDBINGO!
  • 28. semantic markup SMACSS / OOCSS preprocessorasynchronous javascript content out approach
  • 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. designs a system
  • 31. hands HTML, CSS and JS over to the site builder
  • 32. CSS and JS gointo the themeHTML is used asa markup guide
  • 33. the developer sets one or two things up* *can be done in advance
  • 34. developer
  • 35. required code
  • 36. a theme
  • 37. base theme?
  • 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. <?phpprint $content;
  • 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. <?phpprint $content;
  • 42. a layout or two
  • 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. <?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. <?php/** * @file * Layout template for Code Enigma one column layout. * * Regions: * - content */if (isset($content[content])) { print $content[content];}
  • 46. a method for turning of all supplied CSS and JS
  • 47. site builder
  • 48. required modules
  • 49. display suite semantic views panelspanels everywhere semantic panels* *using a forked version atm
  • 50. <img width="120" height="289" alt="Aliquam bene" src="/files/my_image.jpg" />
  • 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. site builder
  • 53. designer
  • 54. some rules
  • 55. never write a .tpl.php
  • 56. never write a .tpl.phpunless you really have to
  • 57. start by outputting no markup at all
  • 58. add markup via the UI
  • 59. think carefully about where you add your wrappers
  • 60. why is this good?
  • 61. give designers freedom
  • 62. make things easy for site builders
  • 63. makes adding markup consistent
  • 64. avoids the temptation to do things in the theme you shouldnt do
  • 65. do we actually do this?
  • 66. no
  • 67. we keep the themer
  • 68. questions
  • 69. exitJames Panton @mcjim

×