Get Over 1000 Templates In Umbraco

Written by Richard Weeks

Get Over 1000 Templates In Umbraco

In this article, I am going to show you how to get access to a huge range of cross-browser CSS-template layouts in Umbraco using one CSS file and two Umbraco templates. No, that's not a typo!

In the interest of keeping things brief, this article assumes you have a fresh working installation of Umbraco. I also assume you have at least a working knowledge of how templates work in Umbraco.

First of all, download the latest
Yahoo User Interface (YUI) from Yahoo!.

Extract the archive and copy "reset-fonts-grids" from the Build directory. That's the only file you will need for the purposes of this article but I strongly recommend you delve into the documentation regarding the rest of the library.

Again, to keep things simple, we won't bother copying this file to Umbraco. I like to put things like this in their own directory, say, /Assets/Styles/YUI/.

Specifying Document Widths

Next, we need to start creating our templates. First, we create our page templates. These basically set how wide the content is on a web page and how it reacts to browser resizing. These are set by applying a specific ID and are as follows:

#doc - 750px centred (good for 800x600)
#doc2 - 950px centred (good for 1024x768)
#doc3 - 100% fluid (good for everybody)
#doc4 - 974px fluid (good for 1024x768)

There is also another custom width:

#doc-custom - an example of a custom page width

I'll just be using the first 4. These provide for the vast majority of use cases.

I created a base template, which looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<link rel="stylesheet" href="/Styles/YUI/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="" class="">
<div id="hd">Header</div>
<div id="bd">Body</div>
<div id="ft">Footer</div>
</div>
</body>
</html>

Specifying Document Templates

Now, this is where it gets interesting. Look at this part of the code:

<div id="" class="">

This is our placeholder for one the IDs as specified above. Putting one of those IDs into this template will make it conform to that page width. That's not the whole story though. Note also the class attribute. The class allows us to further specify the layout of our page. We can add a range of class names that further divide the page within the body region. These are as follows:

.yui-t1 - Two columns, narrow on left, 160px
.yui-t2 - Two columns, narrow on left, 180px
.yui-t3 - Two columns, narrow on left, 300px
.yui-t4 - Two columns, narrow on right, 180px
.yui-t5 - Two columns, narrow on right, 240px
.yui-t6 - Two columns, narrow on right, 300px

What about if we just want one column? Well, this has a class attribute of .yui-t7.

To accompany each of these templates, we have some code to add between our body. In terms of Umbraco, the page width document serves as our master template and the template that provides page columns are sub templates. Here are the templates for t1 to t6 (remember these go between #bd):

<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
</div>
<div class="yui-b">
<!-- YOUR NAVIGATION GOES HERE -->
</div>

No, actually, that's it! Yes, you get 6 templates for the price of 1!

The one-column template is very simple:

<div class="yui-g">
<!-- YOUR DATA GOES HERE -->
</div>

Making YUI Grids Work With Umbraco

Let's make our templates more Umbraco friendly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd%22<div id="hd"></div>
<div id="bd">

<?UMBRACO_TEMPLATE_LOAD_CHILD/>

</div>
<div id="ft"></div>
</div>
</?ASPNET_FORM>
</body>
</html>

This is perhaps the quickest implementation. What we are saying here is there will always be two properties given to any page created. These will supply the document ID and Class. You would create these document properties when you create the accompanying Document Type entry in Umbraco.

Advanced Template Selection

If you don't want to have to supply these details every time a page is created, you could bind their values to a Macro and use some XSLT to automatically choose the appropriate attribute values, e.g.:

<div id="<?UMBRACO_GETITEM field="templateId"/>" class="<?UMBRACO_GETITEM field="templateClass"/>">

Becomes...

<?UMBRACO_MACRO macroAlias="GenerateDocType"></?UMBRACO_MACRO>

The Macro has no parameters and simply gets the results of a XSL transformation:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="
http://www.w3.org/1999/XSL/Transform%22
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="msxml umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">
<xsl:choose>
<xsl:when test="$currentPage/@nodeTypeAlias = 'YOUR_NODE_TYPE_ALIAS'">
<xsl:call-template name="doctype">
<xsl:with-param name="document">YOUR_SPECIFIC_ID_VALUE</xsl:with-param>
<xsl:with-param name="template">YOUR_SPECIFIC_CLASS_VALUE</xsl:with-param>
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="doctype">
<xsl:with-param name="document">YOUR_SPECIFIC_ID_VALUE</xsl:with-param>
<xsl:with-param name="template">YOUR_SPECIFIC_CLASS_VALUE</xsl:with-param>
</xsl:call-template>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

<xsl:template name="doctype">
<xsl:param name="document" />
<xsl:param name="template" />
<xsl:text disable-output-escaping="yes"><![CDATA[<div id="]]></xsl:text>
<xsl:value-of select="$document"/>
<xsl:text disable-output-escaping="yes"><![CDATA[" class="]]></xsl:text>
<xsl:value-of select="$template"/>
<xsl:text disable-output-escaping="yes"><![CDATA[">]]></xsl:text>
</xsl:template>

</xsl:stylesheet>

The caveat of the first method is that you must supply the id and class attribute values with every page, for the second you must remember to create an entry in the XSLT to supply the appropriate values.

To form your pages, create a template with the template code:

<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
</div>
<div class="yui-b">
<!-- YOUR NAVIGATION GOES HERE -->
</div>

Make the document width template the master and you're good to go - lots of possible combinations from just two templates and one CSS file!

Wrapping Up

This article really only touches on the power and flexibility of YUI Grids. If you are interested, visit the YUI developer site and particularly look at nested grids. Adding these will give you the ability to create thousands of templates using very little code. YUI Grids can be very confusing at first but perseverance wins. Naturally, the examples above keeps everything basic but I hope you can see with the addition of nested grids, your templates within Umbraco could get very creative indeed.

Note that of course, nothing is perfect. YUI Grids are an amazing achievement but like all frameworks, subject to bugs and bug fixes! YUI has an established developer community and you can find details of this for help, when needed, on the YUI site.


0 comments:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:

Post a Comment