Open Learning Initiative

Link Text and Titles

Ideally the name of the action should be legible. This helps with accessibility compliance but also helps new users get comfortable with the software quickly.

<a href="#" class="places_user-trash">Remove</a> 

If space is limited you can reduce the font size inline:

<a href="#" class="places_user-trash" style="font-size:83%">Remove</a> 

Or, if the space is really tight you can remove it this way, but remember to add a title on the anchor:

<a href="#" class="actions_process-stop" title="Close popup"><span  class="offscreen">Close popup</span></a>

Target

Links to external URLs should open in new windows (target="_blank"). You can use the class "external" on the anchor tag to add its respective icon.

Links to ALL internal URLs should open in the same window, unless the URL can't have ANY back-links such as a link to a PDF or ZIP file.

Icons

By adding any of the following classes to an inline tag such as an or tag you can get the matching icon for it.

For example:

<a class="external" href="/joomla/...">Read Full Story in Apple Learning Exchange</a>

<button><span class="external">Open</span></button>

Will produce:

Read Full Story in Apple Learning Exchange

Open

Notice that the class is on the INLINE element "span" and not in the "button" element. Avoid using these classes on button elements because this:

<form><input /><span style="color: #ff0000;">class="external"</span> type="submit" value="Open" /></form>

will produce unwanted effects across browsers:

-- wrong --

Tango

We use the Open Source Tango Icon Library for the icons throughout the site.

Animations

Animation icons have been generated using Ajax Load.

process-working

process-working-flower

process-working-squares

process-working-stripes