Death of a Themer

this talk is aimed at those
who already know their
way around Drupal

who does what
in the Drupal world

developer themer

site builder designer

the theme system is…
complex

a front-end developer
who has been forced
to learn PHP in order
to cope with
the theme system

“Are Drupal's custom
content types and views
popular because they
eliminate the developer?
I think the answer is 'yes'.”

I don't think we can
get rid of developers

here's how to get rid
of your themer

your designer writes
HTML, CSS and JS

your designer writes
fantastic HTML, CSS and JS

understands content and
writes semantic markup

writes re-usable CSS
using a preprocessor

keeps the front-end lean,
efficient and responsive

they use whatever technique
is best for the project

semantic markup
SMACSS / OOCSS
preprocessor
asynchronous javascript
content out approach

Preprocessors Static page generators Static image prototyping
Sass — 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 dropbox
preprocessor — requires command line http:// integration — http://
Susy/Singularity/ZenGrids/ middlemanapp.com/ blog.shipmentapp.com/
GridSet — grid system CodeKit — http://incident57.com/ Browsers
generators codekit/index.php Chrome — Supports Sass in the
Compass — add-on functionality Mixture.io http://mixture.io/ web inspector — needs sass
for Sass like vertical rhythm, Serve — Riby gem https:// debugging turned on
sprites, css3 etc github.com/gummesson/serve Canary — Same as above but
Bourbon — Similar to Compass Testing also supports source maps
much to their dismay Live Reload Safari — can use the desktop
Toolkit — A few nice extras to Guard — command line tool, web inspector on the remote
have — https://github.com/ faster than live-reload iphone/ipad site
Snugug/toolkit Adobe Edge Inspect — http:// Browser Extentions
CSS Frameworks html.adobe.com/edge/inspect/ Web Inspector — needs sass
SMACSS — styleguide/ Mixture.io — http://mixture.io/ debugging turned on and
framework for developing css Virtual Box with Windows XP and experimental mode
that is both modular and scalable snapshots with IE6, IE7, IE8 Speed Tracer
OOCSS — object orientaed CSS Lots of devices YSlow
— more strict than smacss Typography Adobe edge Inspect
Styleguide generation typecast — http://typecast.com/ Live Reload
KSS — uses comments in files to — can preview fast Visual design and layout
generate a styleguide — http:// Colour Fireworks — for working out
warpspire.com/posts/kss/ Kuler — https://kuler.adobe.com/ Photoshop — mainly for image
Typecast — quick way to Colour Lovers — http:// manipulation
generate styles for type www.colourlovers.com/ InDesign — some very useful
Clarify — http://www.clarify.io Color Scheme Designer — http:// tools for wireframes
Style-Sites — https://github.com/ colorschemedesigner.com/ Illustrator — creating SVG files
snugug/style-sites http://color.hailpixel.com/ and illustrations
UXPin — http://uxpin.com/

hands HTML, CSS and JS
over to the site builder

CSS and JS go
into the theme

HTML is used as
a markup guide

the developer sets one or
two things up*

*can be done in advance

<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="<?

<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>

/**
* 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

display suite
semantic views
panels
panels everywhere
semantic panels*

*using a forked version atm

never write a .tpl.php
unless you really have to

start by outputting no
markup at all

think carefully about where
you add your wrappers

make things easy for
site builders

makes adding markup
consistent

avoids the temptation to do
things in the theme you
shouldn't do

Death of a Themer

More Related Content

What's hot

Similar to Death of a Themer

Death of a Themer