Rapid Template Development
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Rapid Template Development as PDF for free.
More details
- Words: 5,252
- Pages:
Rapid Template Development with Joomla!, YUI CSS & jQuery
1 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery Introduction to Frameworks What is a framework Types of frameworks Proʼs & Cons of using Frameworks Examples of things that can be abstracted CSS Frameworks
Yahoo User Interface (YUI) About YUI Library Reset Fonts Fonts CSS: Base (optional) Grid Template Presets Source Ordering Nested Grids YUI Resources:
Progressive Enhancement Progressive Enhancement vs Graceful Degradation
Intro to jQuery What is jQuery (taken from the jQuery website): Using jQuery with other javascript libraries: Document Ready vs Window Onload
Progressive Enhancement with jQuery in Joomla! Templating Example 1.) Enhance your sidebar menu with simple toggle functions. Example 2.) Add “first” & “last” classes to sidebar modules. Example 3.) Add input classes based on type. Example 4.) Remove last .article_separator Example 5.) Add alternating classes to table rows: Example 6.) Assign images a class based on their alignment: Example 7.) Add a class to first paragraphs on article pages:
jQuery Resources Books: Websites:
Templating in Joomla! 1.5 Template Overrides Module Chromes Taking advantage of Joomla! 1.5ʼs built in Split Menu Removing Mootools from the header of your Joomla! 1.5 template. Template Parameters
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
2 2 2 2 3 3
3 3 3 4 4 4 4 5 5 6 7
8 8
9 9 10 11
12 12 12 12 13 13 13 13
14 14 14
15 15 15 18 18 19
1 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
2 of 20
Introduction to Frameworks 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]
Types of frameworks ✤ ✤ ✤ ✤ ✤
CSS Frameworks Javascript Frameworks PHP Frameworks Content Management Frameworks Web Application Frameworks
Proʼs & 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 codeʼs architecture. You might inherit someoneʼs 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.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
2 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
3 of 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 from your development process. When we first embarked on our mission to develop our own internal framework, we were amazed at the amount of things we do on a daily basis can be 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 have a 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 in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, 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 BSD license and are free for all uses.” So lets recap, YUI is essentially a javascript library of reusable utilities and controls that are 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 YUI library consist of reset.css, fonts.css, grid,css and the optional base.css. Read on for descriptions on each.
Reset “The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling 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.”
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
3 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
4 of 20
In its most basic form, all that reset.css is doing is normalizing the default styling for all the elements on your page. The reason this is needed is that each browser has its own way of rendering / styling html elements. From a designer or developers point of view, the reset.css just puts everything on an even playing field and allows you to have a solid foundation to work from.
Fonts “The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control.”
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-browser consistency 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 how typographical 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 HTML elements, Base applies a consistent style foundation for common HTML elements across A-grade browsers. The base.css reapplies styling to the typographical elements that you removed with the reset.css. It is a good starting point for your own typographic styling, as it includes elements that are often forgotten.
Grid “The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides 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.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
4 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
5 of 20
✤ Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (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. Donʼt get me wrong, there is an extensive list of different css libraries available and each have their own proʼs and conʼs. YUIʼs 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 the built in template presets (not to be confused with Joomla! template parameters) and the 100ʼs if different grid combinations available. Once you familiarize yourself with the micro-format style markup naming conventions, you will 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 a traditional two column layout, you have your main content div and a sidebar. The template presets offer your six different possible configurations to choose from. - A choice of three different sidebar widths (160px, 180px or 300px). These are based on standard IAB (Interactive Advertising Bureau) ad unit dimensions, ie: standard advertising banner sizes. Being that YUI is developed by Yahoo the logic behind this reasoning is obvious. - You can also choose on which side the sidebar is displayed. For example, you could easily 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 source ordered. In simple terms, the meat of your site is the first thing that screen readers, search engines, etc see. This is done by wrapping the content that you want highest up in your sites source code in a div with the id or “yui-main”. Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
5 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
6 of 20
Nested Grids So far I have only mentioned a simple two column layout. What happens when you need to add a third column into the mix? Well, this is where the nested grids come in. The best part is that nested grids can also be configured by “YUI Grids CSS provides a system for subdividing sections of your page with nestable grids. Use this technique to easily create complex layouts that go beyond the two column layouts offered by the template presets. The picture below shows, for example, how a twocolumn grid is "nested" within the main block:”
Illustration taken from the YUI Grids page.
Two Column Layout:
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
6 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
7 of 20
YUI Resources: http://developer.yahoo.com/yui/grids/builder/ http://developer.yahoo.com/yui/grids/
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
7 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
8 of 20
Progressive Enhancement Progressive Enhancement vs Graceful Degradation At first glance these two terms may sound like the same thing, but though they are similar in principle, their approach is completely different in its nature. Graceful Degradation takes a top end approach and is where developers code for modern browsers, then “gracefully degrade” for older browsers that donʼt have the same support. This is fine in theory, if the real life execution was thus. The problem is that developers often 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 “progressive enhancements” as new browsers can handle them. At the core, everyone gets the same rich content. When ever i look at a new design i will be coding, i completely ignore what the design looks like and rather focus on what it is i am looking at. Once i identify the most meaningful markup to use, i proceed to coding the xhtml structure. Only once i have a rock solid xhtml compliant page do i even think about how i am going to implement the design into the page.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
8 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
9 of 20
Intro to jQuery Let me first start off by saying that i am no means a javascript developer and that i have only recently had my eyes opened to the power of jQuery. The information here is based on 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 the proud 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 HTML documents, 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, designer friendly, javascript library. I say “designer friendly” because it is simple enough that even non coders can pick it up in no time. The aim or purpose behind it is to bridge the gap between 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 to learn jQuery and the massive amounts of flexibility it gives me. Simple things like injecting additional markup via the dom (document object model), instead of including it in our source 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 learn more - as was the case with me. A perfect example of this is the built in Joomla! module chrome called “rounded”. This is generally 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): <jdoc:include type="modules" name="left" style="rounded" /> The outputted code will be like this: Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
9 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
10 of 20
Now since the purpose of the excessive additional markup is purely for presentational purposes, wouldnʼt it be better to have our module code nice a slim, like this: 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 additional markup needed to give the necessary rounded corners styling, without cluttering our markup with meaningless code. To do this, we simple add the following to the head of our templates index.php: <script src="js/jquery-1.2.6.min.js" language="javascript" type="text/javascript"> $(document).ready(function(){ $(".shadow").wrap($("
class='shadow2'>
")); }); }); My motto is to always keep the markup as clean as humanly possible and add any1 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery Introduction to Frameworks What is a framework Types of frameworks Proʼs & Cons of using Frameworks Examples of things that can be abstracted CSS Frameworks
Yahoo User Interface (YUI) About YUI Library Reset Fonts Fonts CSS: Base (optional) Grid Template Presets Source Ordering Nested Grids YUI Resources:
Progressive Enhancement Progressive Enhancement vs Graceful Degradation
Intro to jQuery What is jQuery (taken from the jQuery website): Using jQuery with other javascript libraries: Document Ready vs Window Onload
Progressive Enhancement with jQuery in Joomla! Templating Example 1.) Enhance your sidebar menu with simple toggle functions. Example 2.) Add “first” & “last” classes to sidebar modules. Example 3.) Add input classes based on type. Example 4.) Remove last .article_separator Example 5.) Add alternating classes to table rows: Example 6.) Assign images a class based on their alignment: Example 7.) Add a class to first paragraphs on article pages:
jQuery Resources Books: Websites:
Templating in Joomla! 1.5 Template Overrides Module Chromes Taking advantage of Joomla! 1.5ʼs built in Split Menu Removing Mootools from the header of your Joomla! 1.5 template. Template Parameters
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
2 2 2 2 3 3
3 3 3 4 4 4 4 5 5 6 7
8 8
9 9 10 11
12 12 12 12 13 13 13 13
14 14 14
15 15 15 18 18 19
1 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
2 of 20
Introduction to Frameworks 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]
Types of frameworks ✤ ✤ ✤ ✤ ✤
CSS Frameworks Javascript Frameworks PHP Frameworks Content Management Frameworks Web Application Frameworks
Proʼs & 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 codeʼs architecture. You might inherit someoneʼs 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.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
2 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
3 of 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 from your development process. When we first embarked on our mission to develop our own internal framework, we were amazed at the amount of things we do on a daily basis can be 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 have a 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 in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, 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 BSD license and are free for all uses.” So lets recap, YUI is essentially a javascript library of reusable utilities and controls that are 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 YUI library consist of reset.css, fonts.css, grid,css and the optional base.css. Read on for descriptions on each.
Reset “The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling 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.”
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
3 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
4 of 20
In its most basic form, all that reset.css is doing is normalizing the default styling for all the elements on your page. The reason this is needed is that each browser has its own way of rendering / styling html elements. From a designer or developers point of view, the reset.css just puts everything on an even playing field and allows you to have a solid foundation to work from.
Fonts “The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control.”
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-browser consistency 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 how typographical 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 HTML elements, Base applies a consistent style foundation for common HTML elements across A-grade browsers. The base.css reapplies styling to the typographical elements that you removed with the reset.css. It is a good starting point for your own typographic styling, as it includes elements that are often forgotten.
Grid “The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides 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.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
4 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
5 of 20
✤ Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (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. Donʼt get me wrong, there is an extensive list of different css libraries available and each have their own proʼs and conʼs. YUIʼs 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 the built in template presets (not to be confused with Joomla! template parameters) and the 100ʼs if different grid combinations available. Once you familiarize yourself with the micro-format style markup naming conventions, you will 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 a traditional two column layout, you have your main content div and a sidebar. The template presets offer your six different possible configurations to choose from. - A choice of three different sidebar widths (160px, 180px or 300px). These are based on standard IAB (Interactive Advertising Bureau) ad unit dimensions, ie: standard advertising banner sizes. Being that YUI is developed by Yahoo the logic behind this reasoning is obvious. - You can also choose on which side the sidebar is displayed. For example, you could easily 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 source ordered. In simple terms, the meat of your site is the first thing that screen readers, search engines, etc see. This is done by wrapping the content that you want highest up in your sites source code in a div with the id or “yui-main”.
Primary Content
Secondary Content (sidebar)
5 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
6 of 20
Nested Grids So far I have only mentioned a simple two column layout. What happens when you need to add a third column into the mix? Well, this is where the nested grids come in. The best part is that nested grids can also be configured by “YUI Grids CSS provides a system for subdividing sections of your page with nestable grids. Use this technique to easily create complex layouts that go beyond the two column layouts offered by the template presets. The picture below shows, for example, how a twocolumn grid is "nested" within the main block:”
Illustration taken from the YUI Grids page.
Two Column Layout:
Primary Content
Secondary Content (sidebar)
Three Column Layout: Primary Content
Tertiary Content
Secondary Content (sidebar)
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
6 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
7 of 20
YUI Resources: http://developer.yahoo.com/yui/grids/builder/ http://developer.yahoo.com/yui/grids/
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
7 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
8 of 20
Progressive Enhancement Progressive Enhancement vs Graceful Degradation At first glance these two terms may sound like the same thing, but though they are similar in principle, their approach is completely different in its nature. Graceful Degradation takes a top end approach and is where developers code for modern browsers, then “gracefully degrade” for older browsers that donʼt have the same support. This is fine in theory, if the real life execution was thus. The problem is that developers often 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 “progressive enhancements” as new browsers can handle them. At the core, everyone gets the same rich content. When ever i look at a new design i will be coding, i completely ignore what the design looks like and rather focus on what it is i am looking at. Once i identify the most meaningful markup to use, i proceed to coding the xhtml structure. Only once i have a rock solid xhtml compliant page do i even think about how i am going to implement the design into the page.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
8 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
9 of 20
Intro to jQuery Let me first start off by saying that i am no means a javascript developer and that i have only recently had my eyes opened to the power of jQuery. The information here is based on 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 the proud 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 HTML documents, 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, designer friendly, javascript library. I say “designer friendly” because it is simple enough that even non coders can pick it up in no time. The aim or purpose behind it is to bridge the gap between 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 to learn jQuery and the massive amounts of flexibility it gives me. Simple things like injecting additional markup via the dom (document object model), instead of including it in our source 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 learn more - as was the case with me. A perfect example of this is the built in Joomla! module chrome called “rounded”. This is generally 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): <jdoc:include type="modules" name="left" style="rounded" /> The outputted code will be like this: Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
9 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
10 of 20
Now since the purpose of the excessive additional markup is purely for presentational purposes, wouldnʼt it be better to have our module code nice a slim, like this:
Main Menu
class='shadow2'>
Using jQuery with other javascript libraries: One of the nicest things about jQuery is the ability to run it in no-conflict mode. This means that when you use it along side other libraries that use the same $ function, jQuery gives you 3 different methods to avoid running into problems. Almost everything starts with a call the jQuery() function and because it is reused so often, the $ variable is setup to alias jQuery. You can choose to setup your own alias like this: var $pt = jQuery.noConflict(); $pt(document).ready(function(){ You are essentially telling jQuery to use (in this case) $pt rather than $ to reference the jQuery function. For more information on “no-conflict” in general and the various ways that you can ensure running into problems with other libraries, check out the below resources. Further reading: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
10 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
11 of 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, jQuerys Document Ready executes everything that is in this function / call back once the entire document has been loaded (before images, flash, etc). Execute before images have been loaded, flash or any external items. Fire before page visible to use. Allowing you to make modifications to the page before the user sees them, unlike Window OnLoad which does not execute anything until everything has loaded.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
11 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
12 of 20
Progressive Enhancement with jQuery in Joomla! Templating Once 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 to avoid adding excessive widgets and gizmos and always make sure that the element that you 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 visitors user 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 is detected, 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 without having 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 using the 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() { Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
12 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
13 of 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 zero out 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 soon be firing off with ways that you can progressively enhance your websites. In my case, this was finding the span with a class of article_separator and adding a class of .last to it. This then 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 and can 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 their alignment. When an image is set to be left aligned, it will automatically get assigned a class of “img-left”. This can then be used in your css to give additional spacing to the right of 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 the rest of the articles copy. By adding a class of teaser to the first paragraph of the article, we can increase the font size, change the color to make it stand out from the rest of the text. $("#content p:first").addClass("teaser");
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
13 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
14 of 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 Resig http://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
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
14 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
15 of 20
Templating in Joomla! 1.5 Joomla! 1.5 was a big step forward from the 1.0 version. From a template developers point of view, these enhancements have enabled us to break out of the mould of what was previously 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 or modules 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 the way article and component headings are outputted and much much more. The best part is that by taking advantage of this feature, you do not need to worry about your changes being 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 Joomlaʼs module chrome can be summarized as the xhtml code that is wrapped around the contents of any given module. Which chrome any given module position should use is determined by the “style” attribute that is specified in the module positionʼs code. An example of these would be: <jdoc:include type="modules" name="user1" style="xhtml" /> In Joomla! 1.0.x we were limited to the the chromes that were available to us, but in Joomla! 1.5, we are now able to not only customize the existing chromes to our liking, but also 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 of them. All that is different is the module chrome or “style” that has been set.
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
15 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
16 of 20
<jdoc:include type="modules" name="left" style="raw" /> <jdoc:include type="modules" name="left" style="xhtml" /> <jdoc:include type="modules" name="left" style="table" />
| Main Menu |
|---|
|
16 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
17 of 20
<jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="left" style="outline" />
left[outline]
Now to create your own module chrome, you simply create a file called “modules.php” and put it into your templates “html” folder. Below is an example of the modules.php that i created for our new template framework:
showtitle != 0) : ?> id])) $modhide = $_COOKIE['mod'.$module->id]; else $modhide = 'show'; ?>
The first thing to look at is the highlighted text modChrome_junkie. If you remember, “junkie” is the name that i gave our custom module chrome style. This can be anything you Written by Chris Rault from JoomlaJunkie.com & ProThemer.com<span>title; ?>
content; ?>
17 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
18 of 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 notable difference is the space between the “module” class and the “module suffix”. The reason for this 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 made provision for any modules with a class of “modulemycustomsuffix”), we now end up with ““module mycustomsuffix”, which takes advantage of the fact that any element can have multiple classes assigned to it. So now the module will still keep the original styling that has been set for “.module”, but we now also have the added hook of “.mycustomsuffix”, where we can override the styling that is specific only to that module (ie, like the module header background color. We have further extended this concept with our built in ModFX feature that is included in all of our latest templates, where you can easily mix and match your own combination of module header 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”: <jdoc:include type="modules" name="user1" style="junkie" />
Further Reading: ✤ http://www.snellcode.com/component/content/article/1-latest-news/56-joomla-modulechrome.html ✤ http://community.joomla.org/magazine/article/555-untapped-potential-with-joomlamodule-chrome.html ✤ http://docs.joomla.org/What_is_module_chrome%3F
Taking advantage of Joomla! 1.5ʼs built in Split Menu Another little gem that Joomla! 1.5 has included, is the ability the split a menuʼs child items at any level. The below example has 3 levels in total. You could choose the split the menu after the first level, which would result in the 2nd and 3rd level children to split or split at the 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 a horizontal 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 of mootools.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 in the backend administration section of your site. That is all fine and dandy, the problem Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
18 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
19 of 20
however, is that the file weighs in at around 74kb, which is pretty heavy to include when its only being used for captions irrespective whether you are using the captions feature or not. 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:
$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);
} ?>
Template Parameters The last templating related feature in Joomla! 1.5 that i am going to discuss, is the new template parameters. In previous versions of Joomla! we were limited to creating separate configuration 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 packaged with Joomla! by default. All the template parameters are really doing is giving the template users a GUI (graphic user 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 templates xml file. To do that, we simple define them at the top of the file, like this: params->get('template_style'); ?> Then, we need to add the relevant parameters to the templates xml file: <param name="template_style" type="list" default="blue" label="Template Style" description="Which style would you like to use?">
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 would highly recommend that you go through the XML Parameters tutorial, linked at the bottom of this section. Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
19 of 20
Rapid Template Development with Joomla!, YUI CSS & jQuery
20 of 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 parameters page. What we now need to do is output the variable to be used somewhere in the template. 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. ”> This would then allow us to write the following css, where we target all links through out the template and set their color based on which color scheme has been set. body.green a { color: green; } body.orange a { color: orange; } body.red a { color: red; } Alternatively, we could pull in a color specific stylesheet based on the users selection: There are all kind of different variations on how this can be used. Most of which are really simple and can be picked up purely by sifting through other templates as examples. The only thing that you are limited by, is your creativity. You can provide your users with literally options for anything and everything. Further Reading: http://dev.joomla.org/component/option,com_jd-wiki/Itemid,/id,references:xml_parameters/ General Joomla Templating Resources: http://movielibrary.lynda.com/html/modPage.asp?ID=666&ref=swf
Written by Chris Rault from JoomlaJunkie.com & ProThemer.com
20 of 20
Related Documents
Rapid Template Development
December 2019 13
Rapid Software Development
June 2020 1
Multimedia Development Contract Template
August 2019 49
Multimedia Development Contract Template
November 2019 18
Personal-development-plan-template
November 2019 22