supermondays, july 2011

30
CMS/DESIGN INTEGRATION @RICHARDCARTER

Upload: richard-carter

Post on 14-Jul-2015

1.038 views

Category:

Technology


1 download

TRANSCRIPT

CMS/DESIGN INTEGRATION@RICHARDCARTER

WHAT IS THEMING?

MARK-UP+

STYLE+

SWEARING

THEMING=

BASE THEMES

CONVENIENCE vs OVERHEAD

BASE THEMES II

MEDIAWIKIWORDPRESS

MAGENTO

COMMON.CSS‘STARKERS’

BASE THEME

ABSTRACTION

AS LITTLE LOGIC AS POSSIBLE(?)

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>

BETTER: MEDIAWIKI

<title>

<?php $this->text('pagetitle') ?>

</title>

NICER MODX

<title>

[*pagetitle*] | [(site_name)]

</title>

BETTER? JOOMLA

<head>

<jdoc:include type="head" />

...

</head>

BETTER? MAGENTO

<head>

<?php echo $this->getChildHtml('head') ?>

</head>

ABSTRACTION

AS LITTLE LOGIC AS POSSIBLE

ABSTRACTION

(BUT WE WANT LOGIC CHOICE)

GRANULARITY

CONTROL WHERE IT MATTERS

MEDIAWIKI

<?php

if ( $boxName == 'navigation' ) {

print '<nav>';

$this->customBox('navigation', $cont);

print '</nav>';

}

?>

MEDIAWIKI

<ul>

<li id="n-Home">

<a href="...">Home</a>

</li>

<li id="n-About">

<a href="...">About</a>

</li>

</ul>

MODX

<div id="navigation">

[!Wayfinder?startId=‘0’!]

</div>

...

<li[+wf.classes+]>

<a href="[+wf.link+]">

<em>[+wf.linktext+]</em>

</a>[+wf.wrapper+]

</li>

DRUPAL

<?php

print render($page['navigation']);

?>

GRANULARITY

BUT WHERE DO WE DRAW THE LINE?

IT’S BLURRY

CLASSTASTIC + DIVTASTIC

@PHILSHERRY

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>

GRANULARITY OVERLAP

ul li:first-of-type {

...

}

ul li:last-of-type {

...

}

THE CMS PROBLEM

WYSIWTF

@ADACTIO

THE CMS PROBLEM

THE CMS PROBLEM

<h6>

<span style="color: #800080;">

...</span>

<span style="font-weight: normal;">...

</span>

</h6>

PORTABILITY

NICE TO HAVE

DOCUMENTATION

DOCUMENTATION

THINGS I SKIMMED OVER

LAYOUT CONTROLSCALABILITY

DRUPAL NE

@DRUPALNE

LAST WEDNESDAY OF THE MONTH

QUESTIONS?

@RICHARDCARTER

...OR PREFERABLY, BEER