Introducing UDASSS!

The Unobtrusive Degradable Ajax Style Sheet Switcher!

Welcome to the official download package of UDASSS. For further information and discussion, visit dustindiaz.com/udasss

Before reading on, go ahead and get a quick sample

What you need

Place the following text at the top of your document [even above your DOCTYPE]

<?php
require_once('utils/style-switcher.php');
// style sheet path[, media, title, bool(set as alternate)]
$styleSheet = new AlternateStyles();
$styleSheet->add('css/global.css','screen,projection'); // [Global Styles]
$styleSheet->add('css/preferred.css','screen,projection','Wog Standard'); // [Preferred Styles]
$styleSheet->add('css/alternate.css','screen,projection','Tiny Fonts',true); // [Alternate Styles]
$styleSheet->add('css/alternate2.css','screen,projection','Big O Fonts',true); // [Alternate Styles]
$styleSheet->getPreferredStyles();
?>

First, we instantiate a PHP class called AlternateStyles() which will allow us to configure our style sheets. Just for kicks, let's just call our object $styleSheet

As part of the AltnernateStyles object, there lies a public method called add. So naturally with our $styleSheet object, we can call it to add Style Sheets!

How the `add()` method works

The add method takes in a possible four arguments, only one is required. However, you'll want to add some... since the whole point is working with alternate style sheets.

$path can simply be a uri, absolute, or relative path to your style sheet. $media adds a media attribute to your style sheets. $title gives a name to your style sheets (via title attribute). $alternate (which shows boolean) simply tells us that these are the alternate style sheets.

add() Tips

For all global style sheets (meaning the one's that will always be seen and will not be swapped out), simply use the add method as shown next to // [Global Styles].

To add preferred styles, do the same, but add a 'title'.

To add the alternate styles, do the same as what we've done to add preferred styles, but add the extra boolean and set it to true.

Note following when adding style sheets

Multiple global style sheets are allowed
You can only have one preferred style sheet [That's a browser rule]
Feel free to add as many alternate style sheets as you like

Moving on

Simply add the following snippet to the <head> of your web document

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/common.js'>>/script>
<script type='text/javascript' src='js/alternateStyles.js'></script>
<?php
$styleSheet->drop();
?>

How to Switch Styles

Whether you knew it or not, this baby already has the built in 'ubobtrusive' functionality that lets you switch styles by the drop of any link with a class name of 'altCss'. Just drop them where ever you like in your document as follows:

<a class='altCss' href='index.php?css=Bog_Standard'>Bog Standard</a>
<a class='altCss' href='index.php?css=Really_Small_Fonts'>Small Fonts</a>
<a class='altCss' href='index.php?css=Large_Fonts'>Large Fonts</a>

Take special note where the file is linking to. Yep. Just linking right back to the page we're on. The only extra parameters we pass in is a variable called 'css' - and within that we append the names of our style sheets.

Also take very special note on the names of the style sheets have an under_score to take place of any spaces we might have.

Go ahead...play around and change the style sheet with the following links. Try disabling JavaScript and refreshing your browser. Still works!

Download U.D.A.S.S.S | V0.8

/* U.D.A.S.S.S. (c) Creative Commons 2005
http://creativecommons.org/licenses/by-sa/2.5/
Original Author: Dustin Diaz
Package Name: U.D.A.S.S.S. | Unobtrusive Degradable Ajax Style Sheet Switcher
*/