Death of a Themer

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