Rapid Template Development

8/14/2019 Rapid Template Development

1/20

Rapid Template Development with

Joomla!, YUI CSS & jQuery

Introduction to Frameworks 2What is a framework 2Types of frameworks 2Pros & Cons of using Frameworks 2Examples of things that can be abstracted 3CSS Frameworks 3

Yahoo User Interface (YUI) 3About YUI Library 3

Reset

3Fonts 4Fonts CSS: 4Base (optional) 4Grid 4Template Presets 5Source Ordering 5Nested Grids 6YUI Resources: 7

Progressive Enhancement 8Progressive Enhancement vs Graceful Degradation 8

Intro to jQuery 9What is jQuery (taken from the jQuery website): 9Using jQuery with other javascript libraries: 10Document Ready vs Window Onload 11

Progressive Enhancement with jQuery in Joomla! Templating 12Example 1.) Enhance your sidebar menu with simple toggle functions. 12Example 2.) Add first & last classes to sidebar modules. 12Example 3.) Add input classes based on type. 12Example 4.) Remove last .article_separator 13Example 5.) Add alternating classes to table rows: 13

Example 6.) Assign images a class based on their alignment: 13Example 7.) Add a class to first paragraphs on article pages: 13

jQuery Resources 14Books: 14Websites: 14

Templating in Joomla! 1.5 15Template Overrides 15Module Chromes 15Taking advantage of Joomla! 1.5s built in Split Menu 18Removing Mootools from the header of your Joomla! 1.5 template. 18

Template Parameters 19

Rapid Template Development with Joomla!, YUI CSS & jQuery 1 of 20

Written by Chris Rault from JoomlaJunkie.com & ProThemer.com 1 of 20


2/20

Introduction to Frameworks

What is a framework

A framework can be defined as a set of tools, libraries, conventions & best practices, thatattempt 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 thedesigner or developer to focus on tasks that are unique to a given project, rather thanreinventing 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

Pros & Cons of using Frameworks

Pros:

You increase your productivity and avoid common mistakes.

You normalize your code/class base. You have a better workflow within a team.

You gain an optimal browser-compatibility. You have a clean, well-structured and complete code.

Uniformity within teams & projects Reduce time spent on repetitive tasks

Rapid development Micro format style naming system

Let your content dictate the layout vs the template Flexibility

Built for growth

Cons:

You need time to fully understand the framework. You need a close familiarity with your codes architecture.

You might inherit someones bugs or mistakes. You develop sites upon a framework, not upon the solid knowledge of CSS.

You get a bloated source code.

CSS can not be framed semantically. Ignoring the uniqueness of your projects.




3/20

Examples of things that can be abstracted

Browser Resets

Base Typography Basic styles for forms

Grids

Generic reusable classes

CSS Frameworks

Whether you develop sites as a hobby, or a freelancer or part of a web development team,there is no doubt in my mind that you can benefit from abstracting common css rules fromyour development process. When we first embarked on our mission to develop our owninternal framework, we were amazed at the amount of things we do on a daily basis canbe reused for all of our new projects. By drastically cutting down our development time, we

are now able to focus on the things that make each project unique.

Not only have we managed to reduce the time spent on repetitive tasks, but we also havea solid base to start from and are able to continuously develop and improve.

Yahoo User Interface (YUI)

About YUI Library

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written inJavaScript, for building richly interactive web applications using techniques such as DOMscripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.All components in the YUI Library have been released as open source under a BSDlicense and are free for all uses.

So lets recap, YUI is essentially a javascript library of reusable utilities and controls thatare provided with the aim to reduce the time that developers spend on any given project.

The part that we are going to focus on however, is YUI CSS. The css components of YUIlibrary consist of reset.css, fonts.css, grid,css and the optional base.css. Read on fordescriptions on each.

Reset

The foundational YUI Reset CSS file removes and neutralizes the inconsistent defaultstyling of HTML elements, creating a level playing field across A-grade browsers and

providing a sound foundation upon which you can explicitly declare your intentions.




4/20

In its most basic form, all that reset.css is doing is normalizing the default styling for all theelements on your page. The reason this is needed is that each browser has its own way ofrendering / styling html elements. From a designer or developers point of view, thereset.css just puts everything on an even playing field and allows you to have a solidfoundation to work from.

Fonts

The foundational YUI Fonts CSS file offers cross-browser typographical normalization andcontrol.

Fonts CSS:

Offers full A-grade browser support.

Provides consistent font sizing and line-height. Provides appropriate cross-OS font-family degradation paths.

Supports user-driven font-size adjustment in the browser, including cross-browserconsistency for adjusted sizes.

Works in both "Quirks Mode" and "Standards Mode."

So like with the reset.css, the aim of the fonts.css is to have consistency with howtypographical elements used in your site are displayed in different browsers.

Base (optional)Base is an optional CSS file that compliments YUI's core CSS foundation (Reset, Fonts,and Grids). While Reset removes and neutralizes the inconsistent default styling of HTMLelements, Base applies a consistent style foundation for common HTML elements acrossA-grade browsers.

The base.css reapplies styling to the typographical elements that you removed with thereset.css. It is a good starting point for your own typographic styling, as it includeselements that are often forgotten.

Grid

The foundational YUI Grids CSS offers four preset page widths, six preset templates, andthe ability to stack and nest subdivided regions of two, three, or four columns. The 4kb fileprovides over 1000 page layout combinations.

Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px,950px, and 974px, and the ability to easily customize to any number.

Supports easy customization of the width for fixed-width layouts.

Flexible in response to user initiated font-size adjustments.




5/20

Template columns are source-order independent, so you can put your most importantcontent first in the markup layer for improved accessibility and search engineoptimization (SEO).

Self-clearing footer. No matter which column is longer, the footer stays at the bottom. Layouts less than 100% are automatically centered.

Accommodates IAB's Ad Unit Guidelines for common ad dimensions.

Offers full A-grade browser support.

The grids.css is in my opinion what makes YUI CSS special. Dont get me wrong, there isan extensive list of different css libraries available and each have their own pros andcons. YUIs grid however has given us the most flexibility in terms of Joomla! templating.Harnessing the core features to easily adjust the primary width of your template, to thebuilt in template presets (not to be confused with Joomla! template parameters) and the100s if different grid combinations available.

Once you familiarize yourself with the micro-format style markup naming conventions, youwill soon be on track to developing your own complex layouts using YUI.

Template Presets

The template presets can be a bit confusing at first, but if we think of it in terms of atraditional two column layout, you have your main content div and a sidebar. The templatepresets offer your six different possible configurations to choose from.

- A choice of three different sidebar widths (160px, 180px or 300px). These are based onstandard IAB (Interactive Advertising Bureau) ad unit dimensions, ie: standard advertising

banner sizes. Being that YUI is developed by Yahoo the logic behind this reasoning isobvious.

- You can also choose on which side the sidebar is displayed. For example, you couldeasily set your sidebar to be on the right.

Source Ordering

One of the things that first drew me to YUI CSS, was the special attention that was paid to

ensure that no matter what combination of layouts you use, the content is always sourceordered. In simple terms, the meat of your site is the first thing that screen readers, searchengines, etc see. This is done by wrapping the content that you want highest up in yoursites source code in a div with the id or yui-main.

Primary Content

Secondary Content (sidebar)




6/20

Nested Grids

So far I have only mentioned a simple two column layout. What happens when you needto add a third column into the mix? Well, this is where the nested grids come in. The bestpart is that nested grids can also be configured by

YUI Grids CSS provides a system for subdividing sections of your page with nestablegrids. Use this technique to easily create complex layouts that go beyond the two columnlayouts offered by the template presets. The picture below shows, for example, how a two-column grid is "nested" within the main block:

Illustration taken from the YUI Grids page.

Two Column Layout:

Primary Content


Three Column Layout:

Primary ContentTertiary Content





7/20

YUI Resources:

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


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


8/20

Progressive Enhancement

Progressive Enhancement vs Graceful Degradation

At first glance these two terms may sound like the same thing, but though they are similarin principle, their approach is completely different in its nature.

Graceful Degradation takes a top end approach and is where developers code for modernbrowsers, then gracefully degrade for older browsers that dont have the same support.This is fine in theory, if the real life execution was thus. The problem is that developersoften look at older browsers

Progressive Enhancement takes a bottom up approach.

At its core, P.E. focusses on the content of a site, then layers up progressiveenhancements as new browsers can handle them. At the core, everyone gets the samerich content. When ever i look at a new design i will be coding, i completely ignore whatthe design looks like and rather focus on what it is i am looking at. Once i identify the mostmeaningful markup to use, i proceed to coding the xhtml structure. Only once i have a rocksolid xhtml compliant page do i even think about how i am going to implement the designinto the page.




9/20

Intro to jQueryLet me first start off by saying that i am no means a javascript developer and that i haveonly recently had my eyes opened to the power of jQuery. The information here is basedon my own understanding and the examples mentioned are simple ways that i have been

able to apply this incredibly useful tool in my everyday development. That said, i am theproud owner of 3 new jQuery books and i plan on becoming proficient in its usage.

What is jQuery (taken from the jQuery website):

Taken from the jQuery website:

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTMLdocuments, handle events, perform animations, and add Ajax interactions to your web

pages. jQuery is designed to change the way that you write JavaScript.

In plain english, jQuery is lightweight, css3 compliant, incredibly powerful, designerfriendly, javascript library. I say designer friendly because it is simple enough that evennon coders can pick it up in no time. The aim or purpose behind it is to bridge the gapbetween javascript and html. Writing a jQuery statement is as easy as writing css.

As as designer and theme developer, I was completely taken back at how easy it is tolearn jQuery and the massive amounts of flexibility it gives me. Simple things like injectingadditional markup via the dom (document object model), instead of including it in oursource code or targeting any element on the page are really easy to learn and once you

discover the power and flexibility it gives you, i am certain it will quench your thirst to learnmore - as was the case with me.

A perfect example of this is the built in Joomla! module chrome called rounded. This isgenerally used to achieve flexible rounded corner modules.

By including the following module position in your template (notice the style=rounded -but more on that further down):

The outputted code will be like this:

Main Menu




10/20

Now since the purpose of the excessive additional markup is purely for presentationalpurposes, wouldnt it be better to have our module code nice a slim, like this:

Main Menu

By making sure that our module chrome is set to xhtml (or your own customized version)and adding a module suffix of rounded, we can then use jquery to inject the additionalmarkup needed to give the necessary rounded corners styling, without cluttering ourmarkup with meaningless code.

To do this, we simple add the following to the head of our templates index.php:


11/20

Document Ready vs Window Onload

Another nice feature of jQuery is the Document Ready function. Unlike Window.Onload,which has to first wait for everything to load before executing its functions, jQuerysDocument Ready executes everything that is in this function / call back once the entiredocument has been loaded (before images, flash, etc). Execute before images have beenloaded, flash or any external items. Fire before page visible to use. Allowing you to makemodifications to the page before the user sees them, unlike Window OnLoad which doesnot execute anything until everything has loaded.




12/20

Progressive Enhancement with jQueryin Joomla! TemplatingOnce you start getting the hang of jQuery, you will soon start to see just how much power

and flexibility you have at your finger tips! The important thing to remember though is toavoid adding excessive widgets and gizmos and always make sure that the element thatyou are enhancing is still 100% fully functional when javascript is turned off.

Here are a few really simple examples of how you can progressively enhance your visitorsuser experience.

Please note that the below examples need to be wrapped in the document ready function.

jQuery(document).ready(function(){ //

});

Example 1.) Enhance your sidebar menu with simple toggle functions.

Set your sidebar menu to toggle whether child items are displayed. If no javascript isdetected, the sub items are displayed like normal.

$(".menu .parent ul").hide();$("ul.menu li.parent a").click(function(){$(this).next().toggle().end();

return false;});

Example 2.) Add first & last classes to sidebar modules.

Have you ever wished you could target the first and last modules in your sidebar withouthaving to manually set a module suffix?

$("#sidebar .module:first").addClass("first");$("#sidebar .module:last").addClass("last");

What the above is doing, is finding the first and last div with a class of module, then usingthe addClass function to assign it a class of .first and .last.

Example 3.) Add input classes based on type.

This will automatically add a class to input items based on their type. For example, would end up being or becomes . This gives you great control when styling

form elements.

$("input").each(function() {




13/20

$(this).addClass($(this).attr("type"));

Example 4.) Remove last .article_separator

This may sound trivial, but one thing that always bugged me was not being able to zeroout the styling on the last article separator (since there are no more articles to separate).Once your eyes open to the power, flexibility and simplicity of jQuery, your mind will soonbe firing off with ways that you can progressively enhance your websites. In my case, thiswas finding the span with a class of article_separator and adding a class of .last to it. Thisthen allowed me to remove all of the styling that had been set.

$(".inner .article_separator:last").addClass("last");

Example 5.) Add alternating classes to table rows:

Alternating classes, otherwise known as zebra striping is the alternating row colors(usually on tables). This makes it easier for users to read the contents of the tables andcan easily be added using jquery.

$("table tr:even").addClass("alt");

Example 6.) Assign images a class based on their alignment:

Another simple enhancement, is to automatically add a class to images based on theiralignment. When an image is set to be left aligned, it will automatically get assigned aclass of img-left. This can then be used in your css to give additional spacing to the rightof the image to keep the page nicely balanced.

$('img[align*=right]').addClass("img-right");$('img[align*=left]').addClass("img-left");

Example 7.) Add a class to first paragraphs on article pages:

Having the first paragraph of your article is a nice way to set the summary apart from therest of the articles copy. By adding a class of teaser to the first paragraph of the article, wecan increase the font size, change the color to make it stand out from the rest of the text.

$("#content p:first").addClass("teaser");




14/20

jQuery Resources

Books:

Learning jQuery jQuery Reference jQuery in Action

Websites:

http:// jquery.com:

http://docs.jquery.com http:// jquery.com/plugins

http:// ui.jquery.com http://visualjquery.com

http://learningjquery.com http://15daysofjquery.com/

Video:

Ajax Experience 2008 - Intro to jQuery with John Resighttp://onflash.org/ted/2008/11/ajax-experience-2008-intro-to-jquery.php

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-2/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-3/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-4/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-5/

http://blip.tv/search?q=jquery&x=0&y=0


http://blip.tv/search?q=jquery&x=0&y=0http://blip.tv/search?q=jquery&x=0&y=0http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-5/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-3/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/http://onflash.org/ted/2008/11/ajax-experience-2008-intro-to-jquery.phphttp://onflash.org/ted/2008/11/ajax-experience-2008-intro-to-jquery.phphttp://15daysofjquery.com/http://blip.tv/search?q=jquery&x=0&y=0http://blip.tv/search?q=jquery&x=0&y=0http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-5/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-5/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-4/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-4/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-3/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-3/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/http://onflash.org/ted/2008/11/ajax-experience-2008-intro-to-jquery.phphttp://onflash.org/ted/2008/11/ajax-experience-2008-intro-to-jquery.phphttp://15daysofjquery.com/http://15daysofjquery.com/http://learningjquery.com/http://learningjquery.com/http://visualjquery.com/http://visualjquery.com/http://docs.jquery.com/http://docs.jquery.com/


15/20

Templating in Joomla! 1.5Joomla! 1.5 was a big step forward from the 1.0 version. From a template developers pointof view, these enhancements have enabled us to break out of the mould of what waspreviously possible in Joomla! 1.0 and are taking template development to a whole new

level.

The list of features in Joomla! 1.5 are too extensive to list here without getting distracted,so i am only going to focus on the specific features that are relevant to Joomla! templating.

Template Overrides

The feature that i most enjoy in Joomla! 1.5 is the ability to override any component ormodules xhtml output. This gives any template developer massive flexibility to change the

way Joomla! outputs its code, such as stripping out any unnecessary tables, changing theway article and component headings are outputted and much much more. The best part isthat by taking advantage of this feature, you do not need to worry about your changesbeing overridden the next time you upgrade your Joomla! version.

Some examples of things you can override:

Content headings

Component Heading Blog view

Article

Contact form Page Suffix

Module Chromes

Joomlas module chrome can be summarized as the xhtml code that is wrapped aroundthe contents of any given module. Which chrome any given module position should use isdetermined by the style attribute that is specified in the module positions code.

An example of these would be:

In Joomla! 1.0.x we were limited to the the chromes that were available to us, but inJoomla! 1.5, we are now able to not only customize the existing chromes to our liking, butalso add our own!

The below examples are of the built in chromes that are available out of the box in Joomla!1.5. Please note that that the module that is used in the example is the same in all ofthem. All that is different is the module chrome or style that has been set.




16/20

Main Menu

Main Menu

Main Menu




17/20

Main Menu

left[outline]

Now to create your own module chrome, you simply create a file called modules.php andput it into your templates html folder.

Below is an example of the modules.php that i created for our new template framework:


18/20

would like, but important to mention is that it must be kept in the same format, ie:modChrome_yourstyle.

Apart from adding a few basic css hooks for additional styling, the one other notabledifference is the space between the module class and the module suffix. The reason forthis is simple. Instead of ending up with a class of modulemycustomsuffix, which

subsequently would remove all of the modules built in styling (since we have not madeprovision for any modules with a class of modulemycustomsuffix), we now end up withmodule mycustomsuffix, which takes advantage of the fact that any element can havemultiple classes assigned to it.

So now the module will still keep the original styling that has been set for .module, but wenow also have the added hook of .mycustomsuffix, where we can override the styling thatis specific only to that module (ie, like the module header background color. We havefurther extended this concept with our built in ModFX feature that is included in all of ourlatest templates, where you can easily mix and match your own combination of moduleheader icon, header text color, background image and main module background style.

To call this new module chrome in the template, we simple set the chrome style to junkie:

Further Reading:

http://www.snellcode.com/component/content/article/1-latest-news/56-joomla-module-chrome.html

http://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-module-chrome.html

http://docs.joomla.org/What_is_module_chrome%3F

Taking advantage of Joomla! 1.5s built in Split Menu

Another little gem that Joomla! 1.5 has included, is the ability the split a menus child itemsat any level. The below example has 3 levels in total. You could choose the split the menuafter the first level, which would result in the 2nd and 3rd level children to split or split atthe 2nd level and have the 3rd level in your sidebar menu.

A split menu in its traditional sense is a where the sub children of a menu item are

displayed further down the page (usually in the sidebar). An example of this would ahorizontal navigation with some top level and child level items.

Removing Mootools from the header of your Joomla!

1.5 template.

Something that has been greatly debated within Joomla! circles is the inclusion ofmootools.js on the frontend by default, with no obvious way to disable them. First off you

may ask, what is mootools and so what if its included? Well, the answer is simple.Mootools is another javascript library, similar to jQuery and Joomla! 1.5 uses this library inthe backend administration section of your site. That is all fine and dandy, the problem


http://docs.joomla.org/What_is_module_chrome%3Fhttp://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-module-chrome.htmlhttp://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-module-chrome.htmlhttp://www.snellcode.com/component/content/article/1-latest-news/56-joomla-module-chrome.htmlhttp://docs.joomla.org/What_is_module_chrome%3Fhttp://docs.joomla.org/What_is_module_chrome%3Fhttp://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-module-chrome.htmlhttp://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-module-chrome.htmlhttp://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-module-chrome.htmlhttp://community.joomla.org/magazine/article/555-untapped-potential-with-joomla-module-chrome.htmlhttp://www.snellcode.com/component/content/article/1-latest-news/56-joomla-module-chrome.htmlhttp://www.snellcode.com/component/content/article/1-latest-news/56-joomla-module-chrome.htmlhttp://www.snellcode.com/component/content/article/1-latest-news/56-joomla-module-chrome.htmlhttp://www.snellcode.com/component/content/article/1-latest-news/56-joomla-module-chrome.html


19/20

however, is that the file weighs in at around 74kb, which is pretty heavy to include when itsonly being used for captions irrespective whether you are using the captions feature ornot.

So how do we prevent mootools and caption.js from loading on the frontend of your site?Simply add the following to the top of your Joomla! templates index.php:

Template Parameters

The last templating related feature in Joomla! 1.5 that i am going to discuss, is the newtemplate parameters. In previous versions of Joomla! we were limited to creating separateconfiguration files, where users had to dig around in the code to apply any of the settings.Thanks to Joomla! 1.5 this is now a thing of the past.

To see these parameters in action, take a look at any of the templates that are packagedwith Joomla! by default.

All the template parameters are really doing is giving the template users a GUI (graphicuser interface) for the various options that are built into the template.

Here is how you add your own template parameters to your next Joomla! template:

The first thing that we need to do is get your templates index.php talking to the templatesxml file. To do that, we simple define them at the top of the file, like this:

Then, we need to add the relevant parameters to the templates xml file:

Blue Orange Red

Each parameter can have a number of different attributes - name, type, label, description

and default. If you plan on using template parameters in your Joomla! templates, i wouldhighly recommend that you go through the XML Parameters tutorial, linked at the bottomof this section.




20/20

XML Parameter Attributes:

name - This is the field name of the parameter type - This is the element type for the parameter, text, a list box, etc

label - The text label to be displayed in the parameter form

description - The text that will display when you hover over the label

default - The default value to use

So now you have a way for your user to select an option within the template parameterspage. What we now need to do is output the variable to be used somewhere in thetemplate.

Lets take a look at some examples of how these options can be used:

In the first example, we are outputting the template_style variable as a class on our body.

Documents

Rapid Template Development