Updated Mar 20, 2008 by daz4126
Labels:	Featured

GettingStarted

How to get started with using Sparkl

Speedy Web Development

The first thing you need to do is download the Sparkl framework. You can do that from the google code page, Sparkl example page or from this link.

This is a zip file that needs to be unzipped. You can then see the different files and folders that make up the framework. These consist of: index.htm (the homepage of your website) stylesheets (where all the stylesheets are kept) images (you won't believe this, but this is where the images go!)

The first thing to do is sort out your html - Like all good web developers, start with the structure of the site first.

You can either edit the index.htm file that is already there (just add your own content) or delete it and add your own index.htm file.

Sparkl has certain coding conventions that reward you with speedier development if you follow them.

Start with all the usual stuff that goes into the <head> tag (doctype, meta tags, title, etc...) and make sure you add a link to core.css - this is the file that contains all of the stylesheet modules. This can be done with the following line of HTML:

<link rel="stylesheet" type="text/css" media="screen, projection "href="stylesheets/core.css" />

Then go and find the core.css file. It lives in the stylesheets folder. Open it up and you will see links to all the other modules. You can add more of your own stylehseets from here or delete any of the modules that you don't want. It's probably easier to start off with them all included.

Now let's have a go at getting the layout right. We're going to use the advanced-layout module, so make sure that it is included in core.css.

If you are using the index.htm file that came with sparkl, you will notice that there is a div with an id of 'content'. This contains three more divs with ids of 'primaryContent','secondaryContent' and 'tertiaryContent'. You'll notice that the content div has a class of 'spp t' This is an advanced-layout class that tells the browser to position the secondary content first, then the primary content (twice as big as the secondary content, hence the 2 ps) and then put the tertiary content on a whole new line (that's why there is a space inbetween).

Let's play around with the layout, starting with the most basic. Change this class to 'pst' and reload the page. BAM - now you have a simple, three-column layout.

But what if you don't want them in the same order that they appear in the markup, the secondary content should come first. No need to change your markup, just change the class to 'spt'. BAM - now you have a three column layout, independent of the order they are in the markup.

But what if you don't want a straight split into thirds? Simple - change the class name to 'sppt'. This means that the the content will be split into four parts and the primary content will occupy 2 of them (because the letter p appears twice).

If you want the primary content to sit on top of the secondary and tertiary content, try the class name 'p st' The space means 'go onto a new line'. Try experimenting with some different classes (if you have the Firebug extension for Firefox you can do this very quickly).

Some options won't work and this may be for one of 2 reasons: some are impossible, such as 'st p' because the primary content cannot go underneath the secondary or tertiary content. Others haven't been added to the advanced-layout module yet. It is generally assumed that the primary content will be bigger than the others. At the moment you can only split the content div into up to five parts, but more options will be added as Sparkl develops.

Now let's try adding some navigation. We'll add a few links in the header, as they will be global links on every page. Some meaningful markup would be:

<ul>
<li><a href="home.htm" title="my homepage">home</a></li>
<li><a href="about.htm" title="about me">about</a></li>
<li><a href="contact" title="contact me">contact</a></li>
</ul>

The links are placed in an unordered list tag because that is what they are - a list of links! To add a bit more meaning, we can add the class of 'navigation'. But we also want these links to be tabs (becaue they are all the rage on all the websites now...), so add the class 'tabbed navigation', like so:

<ul class="tabbed navigation>
<li><a href="home.htm" title="my homepage">home</a></li>
<li><a href="about.htm" title="about me">about</a></li>
<li><a href="contact" title="contact me">contact</a></li>
</ul>

KAPOW Not only does this add more meaning to your markup, but it also plugs in to the tabs module to create some nice tabs in the header.

Everything is a bit grey at the moment. That is because the default installation uses the vanilla theme, which is just different shades of grey. This can be easily changed by editing the CSS modules. If we want some more colourful tabs, open up the tabs.css file and edit some of the colurs in there. It also uses some images (found in the stylesheets/images folder). These have some standard naming conventions where they are named after the element they describe. Instead of creating your own images with different names and then editing the CSS, all you need to do is create your own images and overwrite the ones already there with the same name. The image that is the background to the tabs is simply called tab.png and its hover-state is called tab-hover.png.