death of a themer
DESCRIPTION
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-themerTRANSCRIPT
this talk is aimed at those who already know their
way around Drupal
I'm a themer
I want to get rid of themers
I may need to explain myself
who does whatin the Drupal world
developer
site builder
themer
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 withthe theme system
themer
designer
themer
designer
driesnote™
“Are Drupal's custom
content types and viewspopular because they
eliminate the developer?
I think the answer is 'yes'.”
I don't think we canget rid of developers
developer
site builder
themer
designer
here's how to get ridof your themer
designer
your designer writes HTML, CSS and JS
your designer writes fantastic HTML, CSS and JS
understands content and writes 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
BUZZWORD BINGO!
semantic markup
SMACSS / OOCSSpreprocessor
asynchronous javascript
content out approach
PreprocessorsSass — CSS preprocessingLess — similar to SassStylus — a good but less popular preprocessorSusy/Singularity/ZenGrids/GridSet — grid system generatorsCompass — add-on functionality for Sass like vertical rhythm, sprites, css3 etcBourbon — Similar to Compass much to their dismayToolkit — A few nice extras to have — https://github.com/Snugug/toolkitCSS FrameworksSMACSS — styleguide/framework for developing css that is both modular and scalableOOCSS — object orientaed CSS — more strict than smacssStyleguide generationKSS — uses comments in files to generate a styleguide — http://warpspire.com/posts/kss/Typecast — quick way to generate styles for typeClarify — http://www.clarify.ioStyle-Sites — https://github.com/snugug/style-sites
Static page generatorsHammer for Mac http://hammerformac.com/Middleman — a bit more complex — requires command line http://middlemanapp.com/CodeKit — http://incident57.com/codekit/index.phpMixture.io http://mixture.io/Serve — Riby gem https://github.com/gummesson/serveTesting Live ReloadGuard — command line tool, faster than live-reloadAdobe Edge Inspect — http://html.adobe.com/edge/inspect/Mixture.io — http://mixture.io/Virtual Box with Windows XP and snapshots with IE6, IE7, IE8Lots of devicesTypographytypecast — http://typecast.com/ — can preview fastColourKuler — https://kuler.adobe.com/Colour Lovers — http://www.colourlovers.com/Color Scheme Designer — http://colorschemedesigner.com/http://color.hailpixel.com/
Static image prototypingInvisionApp — very slick — http://invisionapp.com/Shipment — nice dropbox integration — http://blog.shipmentapp.com/BrowsersChrome — Supports Sass in the web inspector — needs sass debugging turned on Canary — Same as above but also supports source mapsSafari — can use the desktop web inspector on the remote iphone/ipad siteBrowser ExtentionsWeb Inspector — needs sass debugging turned on and experimental modeSpeed TracerYSlowAdobe edge InspectLive ReloadVisual design and layoutFireworks — for working out Photoshop — mainly for image manipulationInDesign — some very useful tools for wireframesIllustrator — creating SVG files and illustrationsUXPin — http://uxpin.com/
designs a system
hands HTML, CSS and JS over to the site builder
CSS and JS gointo the theme
HTML 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): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <img src="<?php print $logo; ?>" alt="<?php print t('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="<?
<?phpprint $content;
<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>
<?phpprint $content;
a layout or two
/** * 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; }}
<?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'), ),);
<?php/** * @file * Layout template for Code Enigma one column layout. * * Regions: * - content */
if (isset($content['content'])) { print $content['content'];}
a method for turning of all supplied CSS and JS
site builder
required modules
display suitesemantic 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-image field-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>
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 forsite builders
makes adding markup consistent
avoids the temptation to do things in the theme you
shouldn't do
do we actually do this?
no
we keep the themer
questions
exit
James Panton@mcjim