Part 1 of Rapid Template Development with Joomla! 1.5, YUI CSS & jQuery that i presented at CMSexpo in Denver, Colorado.
The Morph framework and toolset for Joomla is now available for purchase and use - read more at http://www.joomlajunkie.com/templates/morph/morph.html
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Rapid Template Development Part 1
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
2. What is a framework?
“A framework can be defined 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
4. Advantages of using a framework
✤ Increase Productivity
✤ Avoid common mistakes
✤ Better team workflow
✤ Optimal browser compatibility
✤ Built for growth
✤ Normalize your code base
http://joomlajunkie.com http://prothemer.com http://cmsexpo.net
5. 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
6. 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
8. 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/
9. ..but wait, thereʼs more!
The YUI Library also includes several
core CSS resources..
http://developer.yahoo.com/yui/grids/
10. Say hello to YUI CSS!
✤ Developed by Yahoo!
✤ Authored by Nate Koechley
✤ 4kb in size(!!)
✤ BSD License
http://developer.yahoo.com/yui/grids/
11. The Goals of YUI CSS
✤ Provide Stability
✤ Normalize Differences
✤ Solve recurring problems
✤ Centrally manage complexity
http://developer.yahoo.com/yui/grids/
16. 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/
34. grids.css
Template Presets...
Six presets templates that
accommodate all IAB (Interactive
Advertising Bureau) ad sizes.
http://developer.yahoo.com/yui/grids/
35. 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/
38. 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/
39. 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/
40. 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/
41. 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/
42. 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/
43. 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/
44. grids.css
YUI Blocks
Each content column is a block.
Two Columns = Two Blocks.
http://developer.yahoo.com/yui/grids/
52. grids.css
.yui-g
Nested Grids
If not otherwise specified,
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/
74. jQuery is one of many
javascript libraries.
http://jquery.com
75. So what makes it so cool?
★ Lightweight Footprint ★ Easy to Learn
★ CSS1-3 Compliant ★ No-Conflict Mode
★ Cross Browser ★ Lots of plugins
★ Well Documented ★ Vibrant Community
http://jquery.com
76. Some examples of Progressive
Enhancement in Joomla! templating
★ First & Last class on modules
★ Teaser class on first 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
78. Templating features in J! 1.5
★ Template Overrides
★ Module Chromes
★ Template Parameters
★ Remove MooTools
★ Built in Split Menu
http://joomla.org
79. Template Overrides
Modify the xhtml output of any module
or component without touching any of
the core Joomla! files.
http://joomla.org
81. 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
92. 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
93. 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