Death of a Themer
-
Upload
james-panton -
Category
Documents
-
view
125 -
download
0
description
Transcript of Death of a Themer
![Page 1: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/1.jpg)
this talk is aimed at those who already know their
way around Drupal
![Page 2: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/2.jpg)
I'm a themer
![Page 3: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/3.jpg)
I want to get rid of themers
![Page 4: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/4.jpg)
I may need to explain myself
![Page 5: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/5.jpg)
who does whatin the Drupal world
![Page 6: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/6.jpg)
developer
site builder
themer
designer
![Page 7: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/7.jpg)
developer
![Page 8: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/8.jpg)
site builder
![Page 9: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/9.jpg)
custom theme
![Page 10: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/10.jpg)
themer
designer
![Page 11: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/11.jpg)
the theme system is… complex
![Page 12: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/12.jpg)
a front-end developerwho has been forcedto learn PHP in order
to cope withthe theme system
![Page 13: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/13.jpg)
themer
designer
![Page 14: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/14.jpg)
themer
designer
![Page 15: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/15.jpg)
driesnote™
![Page 16: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/16.jpg)
![Page 17: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/17.jpg)
“Are Drupal's custom
content types and viewspopular because they
eliminate the developer?
I think the answer is 'yes'.”
![Page 18: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/18.jpg)
I don't think we canget rid of developers
![Page 19: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/19.jpg)
developer
site builder
themer
designer
![Page 20: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/20.jpg)
![Page 21: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/21.jpg)
here's how to get ridof your themer
![Page 22: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/22.jpg)
designer
![Page 23: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/23.jpg)
your designer writes HTML, CSS and JS
![Page 24: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/24.jpg)
your designer writes fantastic HTML, CSS and JS
![Page 25: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/25.jpg)
understands content and writes semantic markup
![Page 26: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/26.jpg)
writes re-usable CSSusing a preprocessor
![Page 27: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/27.jpg)
keeps the front-end lean, efficient and responsive
![Page 28: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/28.jpg)
they use whatever technique is best for the project
![Page 29: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/29.jpg)
BUZZWORD BINGO!
![Page 30: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/30.jpg)
semantic markup
SMACSS / OOCSSpreprocessor
asynchronous javascript
content out approach
![Page 31: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/31.jpg)
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/
![Page 32: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/32.jpg)
designs a system
![Page 33: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/33.jpg)
hands HTML, CSS and JS over to the site builder
![Page 34: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/34.jpg)
CSS and JS gointo the theme
HTML is used asa markup guide
![Page 35: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/35.jpg)
the developer sets one or two things up*
*can be done in advance
![Page 36: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/36.jpg)
developer
![Page 37: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/37.jpg)
required code
![Page 38: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/38.jpg)
a theme
![Page 39: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/39.jpg)
base theme?
![Page 40: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/40.jpg)
![Page 41: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/41.jpg)
<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="<?
![Page 42: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/42.jpg)
<?phpprint $content;
![Page 43: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/43.jpg)
<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>
![Page 44: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/44.jpg)
<?phpprint $content;
![Page 45: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/45.jpg)
a layout or two
![Page 46: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/46.jpg)
![Page 47: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/47.jpg)
/** * 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; }}
![Page 48: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/48.jpg)
<?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'), ),);
![Page 49: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/49.jpg)
<?php/** * @file * Layout template for Code Enigma one column layout. * * Regions: * - content */
if (isset($content['content'])) { print $content['content'];}
![Page 50: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/50.jpg)
a method for turning of all supplied CSS and JS
![Page 51: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/51.jpg)
site builder
![Page 52: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/52.jpg)
required modules
![Page 53: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/53.jpg)
display suitesemantic views
panelspanels everywhere semantic panels*
*using a forked version atm
![Page 54: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/54.jpg)
![Page 55: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/55.jpg)
![Page 56: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/56.jpg)
![Page 57: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/57.jpg)
<img width="120" height="289" alt="Aliquam bene" src="/files/my_image.jpg" />
![Page 58: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/58.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>
![Page 59: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/59.jpg)
![Page 60: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/60.jpg)
![Page 61: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/61.jpg)
![Page 62: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/62.jpg)
![Page 63: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/63.jpg)
![Page 64: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/64.jpg)
site builder
![Page 65: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/65.jpg)
![Page 66: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/66.jpg)
![Page 67: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/67.jpg)
![Page 68: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/68.jpg)
designer
![Page 69: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/69.jpg)
![Page 70: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/70.jpg)
![Page 71: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/71.jpg)
![Page 72: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/72.jpg)
![Page 73: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/73.jpg)
some rules
![Page 74: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/74.jpg)
never write a .tpl.php
![Page 75: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/75.jpg)
never write a .tpl.phpunless you really have to
![Page 76: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/76.jpg)
start by outputting no markup at all
![Page 77: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/77.jpg)
add markup via the UI
![Page 78: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/78.jpg)
think carefully about where you add your wrappers
![Page 79: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/79.jpg)
why is this good?
![Page 80: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/80.jpg)
give designers freedom
![Page 81: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/81.jpg)
make things easy forsite builders
![Page 82: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/82.jpg)
makes adding markup consistent
![Page 83: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/83.jpg)
avoids the temptation to do things in the theme you
shouldn't do
![Page 84: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/84.jpg)
![Page 85: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/85.jpg)
do we actually do this?
![Page 86: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/86.jpg)
no
![Page 87: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/87.jpg)
we keep the themer
![Page 88: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/88.jpg)
![Page 89: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/89.jpg)
questions
![Page 90: Death of a Themer](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c783264a7959a04b8b4582/html5/thumbnails/90.jpg)
exit
James Panton@mcjim