Rapid Template Development Part 1

Rapid Template Development with Joomla, YUI & jQuery Chris Rault, JoomlaJunkie.com CMSExpo, Denver Colorado - December 08 http://joomlajunkie.com http://prothemer.com http://cmsexpo.net

What is a framework? “A framework can be deﬁned as a set of tools, libraries, conventions & best practices, that attempt to abstract routine task intro generic modules that can be reused. The goal behind using a framework is reduce time spent on repetitive tasks, allowing the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” [Framework For Designers, by Jeff Croft] http://joomlajunkie.com http://prothemer.com http://cmsexpo.net

Types of frameworks ✤ CSS Frameworks ✤ Javascript Frameworks ✤ PHP Frameworks ✤ Content Management Frameworks ✤ Web Application Frameworks http://joomlajunkie.com http://prothemer.com http://cmsexpo.net

Advantages of using a framework ✤ Increase Productivity ✤ Avoid common mistakes ✤ Better team workﬂow ✤ Optimal browser compatibility ✤ Built for growth ✤ Normalize your code base http://joomlajunkie.com http://prothemer.com http://cmsexpo.net

Disadvantages of using a framework ✤ You need time to understand the framework ✤ Could inherit someone elseʼs bugs ✤ Reduces the need to learn ✤ Sometimes bloated source code http://joomlajunkie.com http://prothemer.com http://cmsexpo.net

Things that can be abstracted ✤ Browser Resets ✤ Base Typography ✤ Basic Styles for Forms ✤ Generic / reusable classes ✤ Grids http://joomlajunkie.com http://prothemer.com http://cmsexpo.net

Yahoo User Interface otherwise referred to as YUI (you-weee) http://developer.yahoo.com/yui/grids/

What is YUI? YUI is a powerful javascript library of reusable utilities and controls that can be used to build rich interactive applications. http://developer.yahoo.com/yui/grids/

..but wait, thereʼs more! The YUI Library also includes several core CSS resources.. http://developer.yahoo.com/yui/grids/

Say hello to YUI CSS! ✤ Developed by Yahoo! ✤ Authored by Nate Koechley ✤ 4kb in size(!!) ✤ BSD License http://developer.yahoo.com/yui/grids/

The Goals of YUI CSS ✤ Provide Stability ✤ Normalize Differences ✤ Solve recurring problems ✤ Centrally manage complexity http://developer.yahoo.com/yui/grids/

http://developer.yahoo.com/yui/grids/

reset.css http://developer.yahoo.com/yui/grids/

fonts.css reset.css http://developer.yahoo.com/yui/grids/

grid.css fonts.css reset.css http://developer.yahoo.com/yui/grids/

yui summary: ✤ Four preset page widths ✤ Six preset templates ✤ The ability to stack or nest subdivided regions.. ✤ Of one, two, three or four columns. ✤ 4kb in size ✤ Over 1000 page layout combinations http://developer.yahoo.com/yui/grids/

page widths: 750px t 974px Page Widths 950px 100% http://developer.yahoo.com/yui/grids/

750px Centered http://developer.yahoo.com/yui/grids/

100% Fluid http://developer.yahoo.com/yui/grids/

grids.css Control the page from the root node: <body> <div></div> </body> http://developer.yahoo.com/yui/grids/

grids.css Available ID values: 750px centered #doc 950px centered #doc2 100% ﬂuid #doc3 974px centered #doc4 http://developer.yahoo.com/yui/grids/

grids.css Width: 750px Centered: <body> <div id=\"doc\"></div> </body> http://developer.yahoo.com/yui/grids/

grids.css Width: 950px Centered: <body> <div id=\"doc2\"></div> </body> http://developer.yahoo.com/yui/grids/

grids.css Width: 100% Fluid <body> <div id=\"doc3\"></div> </body> http://developer.yahoo.com/yui/grids/

grids.css Width: 974px Centered: <body> <div id=\"doc4\"></div> </body> http://developer.yahoo.com/yui/grids/

grids.css Elastic vs Fixed? Page widths are in EM’s, but can be easily overridden to have a ﬁxed width. http://developer.yahoo.com/yui/grids/

grids.css For example... #doc{ width: 750px; } http://developer.yahoo.com/yui/grids/

grids.css What you put into the root level div is up to you.. http://developer.yahoo.com/yui/grids/

grids.css Basic Page Structure <body> #hd <div id=\"doc\"> <div id=\"hd\"></div> <div id=\"bd\"></div> #bd <div id=\"ft\"></div> </div> </body> #ft http://developer.yahoo.com/yui/grids/

grids.css All except #doc3 are automatically centered http://developer.yahoo.com/yui/grids/

grids.css A-Grade Browsers - Say what? http://developer.yahoo.com/yui/grids/

grids.css Template Presets... Six presets templates that accommodate all IAB (Interactive Advertising Bureau) ad sizes. http://developer.yahoo.com/yui/grids/

grids.css Template Presets: .yui-t1 160 on left .yui-t4 180 on right .yui-t2 180 on left .yui-t5 240 on right .yui-t3 300 on left .yui-t6 300 on right http://developer.yahoo.com/yui/grids/

.yui-t1 http://developer.yahoo.com/yui/grids/

.yui-t6 http://developer.yahoo.com/yui/grids/

Template 1: 160px left Lorem ipsum Lorem ipsum dolor sit amet, consectetuer dol or sit amet, adipiscing elit. Quisque a urna. Maecenas lobortis con sec te tuer lacinia nibh. In ac odio. Donec rhoncus, purus at adipisc ing elit. vehicula mollis, lacus massa pulvinar nunc, vel Quisque a semper neque enim quis nulla. Nunc rhoncus urna. Maecenas tincidunt eros. Nulla euismod, dui id commodo lo bortis lacinia viverra, pede leo aliquam diam, non eleifend nibh. The main block 160px accumsan non, mollis in, neque. Aliquam eu tellus. Donec rhoncus, Morbi imperdiet, eros gravida dictum suscipit, dui purus at orci dapibus erat, et pretium dui est eget velit. vehicula mollis, Proin eget neque in ante fringilla pulvinar. Proin vel lacus massa augue. Mauris aliquam tempus nibh. Curabitur pulvinar nunc, enim ante, laoreet ullamcorper, mollis in, dapibus vel semper quis, orci. Curabitur consequat, neque eu lobortis neque enim tristique, quam nibh posuere purus, in egestas mi quis nulla. posuere purus, in egestas neque ut pede. Nunc rhoncus Pellentesque lacinia, elit a tincidunt bibendum, nisl tincidunt eros. dolor consequat lorem, sit amet lobortis elit ligula Nulla euismod, at ante. dui id http://developer.yahoo.com/yui/grids/

Template 2: 180px left Lorem ipsum dol or Lorem ipsum dolor sit amet, consectetuer sit amet, con sec te adipiscing elit. Quisque a urna. Maecenas tuer adipisc ing elit. lobortis lacinia nibh. In ac odio. Donec Quisque a urna. rhoncus, purus at vehicula mollis, lacus Maecenas lo bortis massa pulvinar nunc, vel semper neque enim lacinia nibh. quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo 180px aliquam diam, non eleifend Donec rhoncus, purus at vehicula The main block mollis, lacus massa accumsan non, mollis in, neque. Aliquam eu pulvinar nunc, vel tellus. Morbi imperdiet, eros gravida dictum semper neque enim suscipit, dui orci dapibus erat, et pretium dui quis nulla. Nunc est eget velit. Proin eget neque in ante rhoncus tincidunt fringilla pulvinar. Proin vel augue. Mauris eros. Nulla euismod, aliquam tempus nibh. Curabitur enim ante, dui id laoreet ullamcorper, mollis in, dapibus quis, orci. Curabitur consequat, neque eu lobortis tristique, quam nibh posuere purus, in egestas mi posuere purus, in egestas neque ut pede. Pellentesque lacinia, elit a tincidunt bibendum, nisl dolor consequat lorem, sit amet lobortis elit ligula at ante. http://developer.yahoo.com/yui/grids/

Template 3: 300px left Lorem ipsum dol or sit Lorem ipsum dolor sit amet, consectetuer amet, con sec te tuer adipiscing elit. Quisque a urna. Maecenas adipisc ing elit. Quisque a lobortis lacinia nibh. In ac odio. Donec urna. Maecenas lo bortis rhoncus, purus at vehicula mollis, lacus lacinia nibh. massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt 300px eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non Donec rhoncus, purus at eleifend vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis The main block nulla. Nunc rhoncus accumsan non, mollis in, neque. tincidunt eros. Nulla Aliquam eu tellus. Morbi imperdiet, eros euismod, dui id gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. Proin vel augue. Curabitur consequat, neque eu lobortis tristique, quam nibh posuere purus, in egestas mi posuere purus, in egestas neque ut pede. Pellentesque lacinia, elit a tincidunt sit amet lobortis elit ligula at ante. http://developer.yahoo.com/yui/grids/

Template 4: 180px Lorem ipsum dolor sit amet, consectetuer Lorem ipsum adipiscing elit. Quisque a urna. Maecenas lobortis dolor sit amet, lacinia nibh. In ac eleifend dolor pede lacinia felis. consect etuer llus dolor enim, consectetuer id, accumsan non, adipiscing elit. mollis in, neque. Aliquam eu tellus. Morbi Quisque a urna. imperdiet, eros gravida dictum suscipit, dui orci Maecenas dapibus erat, et pretium dui est eget velit. Proin lobortis lacinia nibh. In ac The main block Donec rhoncus, purus at vehicula mollis, lacus 180px massa pulvinar nunc, vel semper neque enim quis accumsan non, nulla. Nunc rhoncus tincidunt eros. Nulla mollis in, neque. euismod, dui id commodo viverra, pede leo Aliquam eu aliquam diam, non eleifend dolor pede lacinia tellus. Morbi felis. llus dolor enim, consectetuer id, accumsan imperdiet, eros non, mollis in, neque. Aliquam eu tellus. Morbi gravida dictum imperdiet, eros gravida dictum suscipit, dui orci suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin dapibus erat, et eget neque in ante fringilla pulvinar. Proin vel pretium dui est augue. Mauris aliquam tempus nibh. Curabitur eget velit. Proin enim ante, laoreet ullamcorper, mollis in. eget neque in ante . http://developer.yahoo.com/yui/grids/

Template 5: 240px Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit adipiscing elit. Quisque a urna. Maecenas amet, consect etuer lobortis lacinia nibh. In ac eleifend dolor adipiscing elit. pede lacinia felis. llus dolor enim, Quisque a urna. consectetuer id, accumsan non, mollis in, Maecenas lobortis neque. Aliquam eu tellus. Morbi imperdiet, lacinia nibh. In ac eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin 240px accumsan non, mollis The main block in, neque. Aliquam eu tellus. Morbi Donec rhoncus, purus at vehicula mollis, imperdiet, eros lacus massa pulvinar nunc, vel semper gravida dictum neque enim quis nulla. Nunc rhoncus suscipit, dui orci tincidunt eros. Nulla euismod, dui id dapibus erat, et commodo viverra, pede leo aliquam diam, pretium dui est eget non eleifend dolor pede lacinia felis. llus velit. Proin eget neque dolor enim, consectetuer id, accumsan non, in ante . mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. http://developer.yahoo.com/yui/grids/

Template 6: 300px Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a consect etuer adipiscing elit. urna. Maecenas lobortis lacinia nibh. Quisque a urna. Maecenas In ac eleifend dolor pede lacinia felis. lobortis lacinia nibh. In ac llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, 300px eros gravida dictum suscipit, dui orci accumsan non, mollis in, dapibus erat, et pretium dui est eget neque. Aliquam eu tellus. velit. Proin Morbi imperdiet, eros gravida dictum suscipit, dui The main block orci dapibus erat, et pretium dui est eget velit. Proin eget Donec rhoncus, purus at vehicula neque in ante . mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non eleifend dolor pede lacinia felis. llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum http://developer.yahoo.com/yui/grids/

grids.css YUI Blocks Each content column is a block. Two Columns = Two Blocks. http://developer.yahoo.com/yui/grids/

grids.css YUI Blocks <div id=\"doc\"> <div class=\"yui-b\"></div> <div class=\"yui-b\"></div> </div> http://developer.yahoo.com/yui/grids/

grids.css YUI Blocks Now, identify the main block. http://developer.yahoo.com/yui/grids/

grids.css <div id=\"doc\"> YUI Blocks <div id=\"yui-main\"> <div class=\"yui-b\"></div> </div> <div class=\"yui-b\"></div> </div> http://developer.yahoo.com/yui/grids/

grids.css Next up, we need to set the template preset class http://developer.yahoo.com/yui/grids/

grids.css Set your template preset: <div id=\"doc\" class\"yui-t3\"> <div id=\"yui-main\"> <div class=\"yui-b\"></div> </div> <div class=\"yui-b\"></div> </div> http://developer.yahoo.com/yui/grids/

grids.css Nested Grids Grid holder: .yui-g Units: .yui-u http://developer.yahoo.com/yui/grids/

grids.css Nested Grids <div class=\"yui-g\"> <div class=\"yui-u first\"></div> <div class=\"yui-u\"></div> </div> http://developer.yahoo.com/yui/grids/

grids.css .yui-g Nested Grids If not otherwise speciﬁed, 50% 50% each unit takes up 50% the .yui-u .yui-u available space. .first Spacing (gutter) between units is added automatically. http://developer.yahoo.com/yui/grids/

grids.css but hey, what about a three column layout? http://developer.yahoo.com/yui/grids/

grids.css For three columns .yui-gb 1/3 -- 1/3 -- 1/3 For uneven distributions .yui-gc 2/3 -- 1/3 .yui-gd 1/3 -- 2/3 .yui-ge 3/4 -- 1/4 .yui-gf 1/4 -- 3/4 http://developer.yahoo.com/yui/grids/

grids.css Uneven Columns <div class=”yui-ge“> <div clas=”yui-u first”></div> <div clas=”yui-u”></div> </div> http://developer.yahoo.com/yui/grids/

grids.css .yui-gb .yui-u.first .yui-u .yui-u .yui-gd .yui-u.first .yui-u http://developer.yahoo.com/yui/grids/

grids.css .yui-gd .yui-u.first .yui-u .yui-gb .yui-u.first .yui-u .yui-u http://developer.yahoo.com/yui/grids/

1/3 1/3 1 1/3 1/3 1/3 1 1/3 http://developer.yahoo.com/yui/grids/

Progressive Enhancement

Progressive Enhancement vs Text Graceful Degradation Progressive Enhancement

Graceful Degradation Develop for the latest browsers, then provide a Text experience lesser for users on older browsers. Progressive Enhancement

Progressive Enhancement Develop from the ground up, “layering” enhancements, as Text browsers can handle them. Progressive Enhancement

The key to PE? The content is the center point. Everything Text is layered. else Progressive Enhancement

What is jQuery? http://jquery.com

jQuery is one of many javascript libraries. http://jquery.com

So what makes it so cool? ★ Lightweight Footprint ★ Easy to Learn ★ CSS1-3 Compliant ★ No-Conﬂict Mode ★ Cross Browser ★ Lots of plugins ★ Well Documented ★ Vibrant Community http://jquery.com

Some examples of Progressive Enhancement in Joomla! templating ★ First & Last class on modules ★ Teaser class on ﬁrst paragraph in article ★ Rounded corners ★ Inject any presentational markup ★ Tweaking the polls module ★ Add class to images based on their alignment ★ Zebra striping on tables (or anything else for that matter) http://jquery.com

Templating features in Joomla! 1.5 http://joomla.org

Templating features in J! 1.5 ★ Template Overrides ★ Module Chromes ★ Template Parameters ★ Remove MooTools ★ Built in Split Menu http://joomla.org

Template Overrides Modify the xhtml output of any module or component without touching any of the core Joomla! ﬁles. http://joomla.org

Template Overrides components / com_content / views / category / tmpl templates / your_template / html / com_content / http://joomla.org

Module Chrome Joomla! 1.0.x we were limited to built in use the built in chromes. With Joomla! 1.5, we are now able to customize and create our own module chromes. http://joomla.org

<jdoc:include type=\"modules\" name=\"left\" style=\"raw\" /> <ul class=\"menu\"> <li></li> </ul> http://joomla.org

<jdoc:include type=\"modules\" name=\"left\" style=\"xhtml\" /> <div class=\"moduletable_menu\"> <h3>Main Menu</h3> <ul class=\"menu\"> <li></li> </ul> </div> http://joomla.org

<jdoc:include type=\"modules\" name=\"left\" style=\"table\" /> <table cellpadding=\"0\" cellspacing=\"0\" class=\"moduletable_menu\"> <tr> <th valign=\"top\">Main Menu</th> </tr> <tr> <td> <ul class=\"menu\"> <li></li> </ul> </td> </tr> </table> http://joomla.org

<jdoc:include type=\"modules\" name=\"left\" style=\"horz\" /> <table cellspacing=\"1\" cellpadding=\"0\" border=\"0\" width=\"100%\"> <tr> <td valign=\"top\"> <table cellpadding=\"0\" cellspacing=\"0\" class=\"moduletable_menu\"> <tr> <th valign=\"top\">Main Menu</th> </tr> <tr> <td> <ul class=\"menu\"> <li></li> </ul> </td> </tr> </table> </td> </tr> </table> http://joomla.org

<jdoc:include type=\"modules\" name=\"left\" style=\"rounded\" /> <div class=\"module_menu\"> <div> <div> <div> <h3>Main Menu</h3> <ul class=\"menu\"> <li></li> </ul> </div> </div> </div> </div> http://joomla.org

<jdoc:include type=\"modules\" name=\"left\" style=\"outline\" /> <div class=\"mod-preview\"> <div class=\"mod-preview-info\">left[outline]</div> <div class=\"mod-preview-wrapper\"> <ul class=\"menu\"> <li></li> </ul> </div> </div> http://joomla.org

<jdoc:include type=\"modules\" name=\"left\" style=\"custom\" /> <?php defined('_JEXEC') or die('Restricted access'); function modChrome_custom($module, &$params, &$attribs) { ?> <div class=\"module <?php echo $params->get('moduleclass_sfx'); ?>\" id=\"mod<?php echo $module->id; ?>\"> <?php if ($module->showtitle != 0) : ?> <?php if(isset($_COOKIE['mod'.$module->id])) $modhide = $_COOKIE['mod'.$module->id]; else $modhide = 'show'; ?> <h3><span><?php echo $module->title; ?></span></h3> <?php endif; ?> <div class=\"mod-content\"><?php echo $module->content; ?></div> </div> <?php } ?> http://joomla.org

Joomla! 1.5 & MooTools <?php $user =& JFactory::getUser(); if($user->get('guest') == 1 or $user->usertype == 'Registered') { $headerstuff = $this->getHeadData(); unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/mootools.js']); unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/caption.js']); $this->setHeadData($headerstuff); } ?> http://joomla.org

Template Parameters Give your users an easy way to customize their template. http://joomla.org

Template Parameters Get your templates index.php and templateDetails.xml talking! <?php $template_width = $this->params->get('template_width'); $template_style = $this->params->get('template_style'); $template_logo = $this->params->get('template_logo'); $template_header = $this->params->get('template_header'); $template_mootools = $this->params->get('template_mootools'); ?> http://joomla.org

Template Parameters Get your templates index.php and templateDetails.xml talking! <params> <param type=\"spacer\" default=\"Logo Options:\" /> <param name=\"logo_type\" type=\"list\" default=\"0\" label=\"Logo Type\" description=\"Select which width you would like your site to be.\"> <option value=\"0\">Linked Inline Image</option> <option value=\"1\">Linked Plain Text</option> <option value=\"2\">Linked H1 Text</option> </param> http://joomla.org

Questions? http://www.ﬂickr.com/photos/oreilly/6648470/ http://prothemer.com

Rapid Template Development Part 1

5 comments

Notes on slide 1

4 Favorites