Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SuperMondays, July 2011

1,333 views

Published on

"As frontend developers, it’s often our job to integrate (X)HTML and CSS with various content management systems, forums and discussion boards, ecommerce platforms and other software.
So, are all theming experiences the same? Obviously not. This talk aims to promote discussion about best practice in theming/templating/skinning, with a view to leaving us techies all more enlightened. Richard Carter, Creative Director at Peacock Carter Ltd, takes us through a selection of popular open source software packages and the ups, downs and total cock-ups he’s seen along the way."

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

SuperMondays, July 2011

  1. 1. CMS/DESIGN INTEGRATION @RICHARDCARTER
  2. 2. WHAT IS THEMING?MARK-UP + STYLE = THEMING +SWEARING
  3. 3. BASE THEMESCONVENIENCE vs OVERHEAD
  4. 4. BASE THEMES IIMEDIAWIKI COMMON.CSSWORDPRESS ‘STARKERS’ MAGENTO BASE THEME
  5. 5. ABSTRACTIONAS LITTLE LOGIC AS POSSIBLE(?)
  6. 6. NAUGHTY WORDPRESS<title> <?php global $page, $paged; wp_title( |, true, right ); bloginfo( name ); $site_description = get_bloginfo(description, display ); if ( $site_description && (is_home() || is_front_page() ) ) echo " | $site_description"; if ( $paged >= 2 || $page >= 2 ) ... ?></title>
  7. 7. BETTER: MEDIAWIKI<title> <?php $this->text(pagetitle) ?></title>
  8. 8. NICER MODX<title> [*pagetitle*] | [(site_name)]</title>
  9. 9. BETTER? JOOMLA<head> <jdoc:include type="head" /> ...</head>
  10. 10. BETTER? MAGENTO<head><?php echo $this->getChildHtml(head) ?></head>
  11. 11. ABSTRACTIONAS LITTLE LOGIC AS POSSIBLE
  12. 12. ABSTRACTION(BUT WE WANT LOGIC CHOICE)
  13. 13. GRANULARITYCONTROL WHERE IT MATTERS
  14. 14. MEDIAWIKI<?php if ( $boxName == navigation ) { print <nav>; $this->customBox(navigation, $cont); print </nav>; }?>
  15. 15. MEDIAWIKI<ul><li id="n-Home"> <a href="...">Home</a></li><li id="n-About"> <a href="...">About</a></li></ul>
  16. 16. MODX<div id="navigation"> [!Wayfinder?startId=‘0’!]</div>...<li[+wf.classes+]> <a href="[+wf.link+]"> <em>[+wf.linktext+]</em> </a>[+wf.wrapper+]</li>
  17. 17. DRUPAL<?php print render($page[navigation]);?>
  18. 18. GRANULARITYBUT WHERE DO WE DRAW THE LINE? IT’S BLURRY
  19. 19. CLASSTASTIC + DIVTASTIC @PHILSHERRY
  20. 20. GRANULARITY OVERLAP<ul> <li class="collapsed first"> <a href="/about">About Us</a> </li>... <li class="leaf last"> <a href="/contact">Contact</a> </li></ul>
  21. 21. GRANULARITY OVERLAPul li:first-of-type {...}ul li:last-of-type {...}
  22. 22. THE CMS PROBLEMWYSIWTF @ADACTIO
  23. 23. THE CMS PROBLEM
  24. 24. THE CMS PROBLEM<h6> <span style="color: #800080;"> ...</span> <span style="font-weight: normal;">... </span></h6>
  25. 25. PORTABILITYNICE TO HAVE
  26. 26. DOCUMENTATION
  27. 27. DOCUMENTATION
  28. 28. THINGS I SKIMMED OVERLAYOUT CONTROL SCALABILITY
  29. 29. DRUPAL NELAST WEDNESDAY OF THE MONTH @DRUPALNE
  30. 30. QUESTIONS?...OR PREFERABLY, BEER @RICHARDCARTER

×