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]


Types of frameworks
✤ CSS Frameworks
✤ Javascript Frameworks
✤ PHP Frameworks
✤ Content Management Frameworks
✤ Web Application Frameworks


Advantages of using a framework
✤ Increase Productivity
✤ Avoid common mistakes
✤ Better team workﬂow
✤ Optimal browser compatibility
✤ Built for growth
✤ Normalize your code base


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


Things that can be abstracted
✤ Browser Resets
✤ Base Typography
✤ Basic Styles for Forms
✤ Generic / reusable classes
✤ Grids


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.


..but wait, thereʼs more!
The YUI Library also includes several
core CSS resources..


Say hello to YUI CSS!
✤ Developed by Yahoo!
✤ Authored by Nate Koechley
✤ 4kb in size(!!)
✤ BSD License


The Goals of YUI CSS
✤ Provide Stability
✤ Normalize Differences
✤ Solve recurring problems
✤ Centrally manage complexity


reset.css

fonts.css
reset.css

grid.css

fonts.css
reset.css

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


page widths:
750px t 974px
Page Widths
950px 100%


750px Centered


950px Centered


974px Centered


100% Fluid


grids.css

Control the page from the root node:

<body>
<div></div>
</body>


grids.css
Available ID values:

750px centered

#doc

950px centered

#doc2

100% ﬂuid

#doc3
974px centered

#doc4


grids.css

Width: 750px Centered:

<body>
<div id=quot;docquot;></div>
</body>


grids.css


<body>
<div id=quot;doc2quot;></div>
</body>


grids.css

Width: 100% Fluid

<body>
</body>


grids.css


<body>
</body>


grids.css

Elastic vs Fixed?
Page widths are in EM’s, but can be easily
overridden to have a ﬁxed width.


grids.css

For example...
#doc{
width: 750px;
}


grids.css

What you put into
the root level div is
up to you..


grids.css
Basic Page Structure
<body> #hd
<div id=quot;docquot;>
<div id=quot;hdquot;></div>
<div id=quot;bdquot;></div> #bd
<div id=quot;ftquot;></div>
</div>
</body> #ft


grids.css

All except #doc3 are
automatically centered


grids.css
A-Grade Browsers - Say what?


grids.css

Template Presets...
Six presets templates that
accommodate all IAB (Interactive
Advertising Bureau) ad sizes.


grids.css
Template Presets:
.yui-t1 160 on left .yui-t4 180 on right


.yui-t1


.yui-t6


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


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.


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.


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 .


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.


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


grids.css

YUI Blocks
Each content column is a block.
Two Columns = Two Blocks.


grids.css

YUI Blocks
<div class=quot;yui-bquot;></div>
</div>


grids.css

YUI Blocks
Now, identify the main
block.


grids.css

YUI Blocks
<div id=quot;yui-mainquot;>
</div>
</div>


grids.css

Next up, we need to set the
template preset class


grids.css
Set your template preset:
<div id=quot;docquot; classquot;yui-t3quot;>
<div id=quot;yui-mainquot;>
</div>
</div>


grids.css

Nested Grids
Grid holder: .yui-g
Units: .yui-u


grids.css

Nested Grids
<div class=quot;yui-gquot;>
<div class=quot;yui-u firstquot;></div>
<div class=quot;yui-uquot;></div>
</div>


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.


grids.css

but hey, what about a
three column layout?


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


grids.css

Uneven Columns
<div class=”yui-ge“>
<div clas=”yui-u first”></div>
<div clas=”yui-u”></div>
</div>


grids.css
.yui-gb

.yui-u.first .yui-u .yui-u

.yui-gd

.yui-u.first .yui-u


grids.css
.yui-gd

.yui-u.first .yui-u

.yui-gb

.yui-u.first .yui-u .yui-u


1/3 1/3
1
1/3
1/3 1/3
1
1/3


Progressive Enhancement
vs
Text
Graceful Degradation


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


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


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


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=quot;modulesquot; name=quot;leftquot; style=quot;rawquot; />

<ul class=quot;menuquot;>
<li></li>
</ul>

http://joomla.org

<jdoc:include type=quot;modulesquot; name=quot;leftquot; style=quot;xhtmlquot; />

<div class=quot;moduletable_menuquot;>
<h3>Main Menu</h3>
</ul>
</div>

http://joomla.org

<jdoc:include type=quot;modulesquot; name=quot;leftquot; style=quot;tablequot; />
<table cellpadding=quot;0quot; cellspacing=quot;0quot; class=quot;moduletable_menuquot;>
<tr>
<th valign=quot;topquot;>Main Menu</th>
</tr>
<tr>
<td>
</ul>
</td>
</tr>
</table>

http://joomla.org

<jdoc:include type=quot;modulesquot; name=quot;leftquot; style=quot;horzquot; />
<table cellspacing=quot;1quot; cellpadding=quot;0quot; border=quot;0quot; width=quot;100%quot;>
<tr>
<td valign=quot;topquot;>
<table cellpadding=quot;0quot; cellspacing=quot;0quot; class=quot;moduletable_menuquot;>
<tr>
<th valign=quot;topquot;>Main Menu</th>
</tr>
<tr>
<td>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>

http://joomla.org

<jdoc:include type=quot;modulesquot; name=quot;leftquot; style=quot;roundedquot; />
<div class=quot;module_menuquot;>
<div>
<div>
<div>
<h3>Main Menu</h3>
</ul>
</div>
</div>
</div>
</div>

http://joomla.org

<jdoc:include type=quot;modulesquot; name=quot;leftquot; style=quot;outlinequot; />

<div class=quot;mod-previewquot;>
<div class=quot;mod-preview-infoquot;>left[outline]</div>
<div class=quot;mod-preview-wrapperquot;>
</ul>
</div>
</div>

http://joomla.org

<jdoc:include type=quot;modulesquot; name=quot;leftquot; style=quot;customquot; />

<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_custom($module, &$params, &$attribs) { ?>
<div class=quot;module <?php echo $params->get('moduleclass_sfx'); ?>quot; id=quot;mod<?php
echo $module->id; ?>quot;>
<?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=quot;mod-contentquot;><?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=quot;spacerquot; default=quot;Logo Options:quot; />
<param name=quot;logo_typequot; type=quot;listquot; default=quot;0quot; label=quot;Logo Typequot;
description=quot;Select which width you would like your site to be.quot;>
<option value=quot;0quot;>Linked Inline Image</option>
<option value=quot;1quot;>Linked Plain Text</option>
<option value=quot;2quot;>Linked H1 Text</option>
</param>

http://joomla.org

Questions?

http://www.ﬂickr.com/photos/oreilly/6648470/

http://prothemer.com

Rapid Template Development Part 1

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Rapid Template Development Part 1

Editor's Notes