Here are some examples with text

1. Example 01 : Red Links, Blue Text (set as individual RGB colours), Maximum font size is 96 points, baseline set at 22 pixels, paragraph set to 14pts
2. Example 01 : Red Links, Blue Text, Maximum font size is 96 points, baseline set at 22 pixels, Headlines in Capitals
3. Example 01 : Red Links, Brown Text (set as individual RGB colours), Maximum font size is 72 points, baseline set at 18 pixels
4. Example 02 : Blue Links, Maximum font size is 46 points, Minimum is 4 points, baseline set at 22 pixels, Headlines are in capitals
5. Example 03 : Green Links, H1 set as 56 points, p set to 18 points, baseline set at 34 pixels
6. Example 04 : Blue Text, H1 set at 100 points, H2 set at 90 points, H3 set at 80 points, H2 set at 40 points, blockquote set at 24points
7. Example 05 : Double size deafults
8. Example 06 : This site!

All of the output CSS is w3c valid, cross browser compatible, scales neatly and is commented and laid out readably.

If you are interested in the inner workings of the script, I am more than happy to release it under a GNU license which would mean that you could use it for any reason you liked, so long as any improvements you do – I have access to! Everyone wins.

You can currently access the latest version in the SVN at Google Code.

Note :  the query sent to the test page is identical to the query sent to the dynamic CSS file.

By simply including the type.css file, you automatically reset and normalize the presentation of HTML elements.
The process creates a level playing field upon which to author your layout CSS. The most common elements are automatically created with sufficient vertical spacing so as to fit onto any sized grid

Typograhpy is handled internally so that all text is easy to read (even at the smallest sizes) and sticks to the specified baseline.
Kerning and Leading is added to all small fonts, and margins to all larger ones in keeping with the vertical rythmn that you can specify as part of the query string.
The current baseline is set at 22 pixels and the source code CSS can be viewed here.

The idea for this script came from various sources, most notably webtypography.net, and css reset by Eric Meyer.
Its main goal is to ensure that web principles for good typography are followed automatically for all type sizes, and that all elements flow vertically along a measured rythmn.
Almost all elements are affected by the CSS, from H1 through H6, to more obscure elements such as ABBR and KBD – each is reset so as to remove any existing styles imposed by certain browsers.
All code is fully cross platform and complies with W3C standards for web accessibilty.

CSS Source Code : type.css

Options :

Headings :

1. 
   

   Toggle Capitalisation of Headlines

2. 
   

   Toggle to SERIF Typefaces

3. 
   

   Print Mode

   Sizes :

4. 
   

   Increase Maximum Font Size by +1 (to 37 points)

5. 
   

   Decrease Maximum Font Size by +10 (to 46 points)

6. 
   

   Increase Maximum Font Size by -1 (to 35 points)

7. 
   

   Decrease Maximum Font Size by -10 (to 26 points)

8. Max Size : 36 points | 40 points | 48 points | 96 points

Grid :

9. 
   

   Increase Baseline by +1 (new size : 23 pixels)

10. 
    

    Decrease Baseline by -1 (new size : 21 pixels)

11. Baseline : 18 pixels | 20 pixels | 22 pixels | 24 pixels | 32 pixels

Colour :

1. 
   

   Black Text

2. 
   

   Brown Text

3. 
   

   Red Links

4. 
   

   Green Links

5. 
   

   Blue Links
6. Text Colour :
   (You can use Hex or RGB Values)
7. Link Colour :
   (You can use Hex or RGB Values)

Examples :

1. Example 01 :
   Red Links, Blue Text (set as individual RGB colours), Maximum font size is 96 points, baseline set at 22 pixels, paragraph set to 14pts
2. Example 01 :
   Red Links, Blue Text, Maximum font size is 96 points, baseline set at 22 pixels, Headlines in Capitals
3. Example 01 :
   Red Links, Brown Text (set as individual RGB colours), Maximum font size is 72 points, baseline set at 18 pixels
4. Example 02 :
   Blue Links, Maximum font size is 46 points, Minimum is 4 points, baseline set at 22 pixels, Headlines are in capitals
5. Example 03 :
   Green Links, H1 set as 56 points, p set to 18 points, baseline set at 34 pixels
6. Example 04 :
   Blue Text, H1 set at 100 points, H2 set at 90 points, H3 set at 80 points, H2 set at 40 points, blockquote set at 24points
7. Example 04 :
   Double size deafults

Renegade Web Radio

Bored of the charts? Looking for sounds to keep you occupied? Look no longer with music and mixes from around the world in one simple interface – combining a podcast, blog and mix aggregator – held together with AJAX magic

check it out @ nomadradio.fm

Features

• Cross Fading between tracks
• Prefetching of the next track so that there aren’t any gaps between songs
• A fast visualiser that reacts onbeat as well as to the frequencies
• Saved volume and a rotary dial
• AJAX backend so that you can browse around without losing audio
• Flash <-> Javascript bi-communication

Get involved and send over your mixes!

introducing a new way to enjoy music!

Mix your favourite music blogs with your social bookmarks, add streaming radio and folksonomy… integrate with new music web services plus the latest web trends and what do you get…?

Social Music for the masses

Mixtape Democratic Radio Ver 0.8

What is it?

A fancy new website that collects your favourite music blogs, MP3s and net playlists into one universally accessible site. Read about music, discover new music, and listen to & download the latest songs based on your web-based bookmarks and the social bookmarks of thousands.

What does it do?

The use of a social bookmarking service allows you to bookmark practically any music service. You can save simple RSS or ATOM feeds from your favourite music blog, your XSPF playlists, even M3U radiostreams! The volume of music services is growing by the day, so you can aggregate all your favourite music from sites such as Imeem, IJig, The Hype Machine, BlogDigger or any blog from the thousands collected on el.bo.ws.

Furthermore, if you use last.fm webservices – which I highly recommend – you can save your recently played songs, find out which songs you already have in your collection and get advice on music that you would like but just haven’t yet heard.

How does it work?

The channels are saved in your favourite online social bookmark collection. If you don’t have one, look no further than Del.icio.us…

Simply save the RSS feed from your favourite music blog using the tag mp3blogfeed and your music-blog will be automatically available to everybody in the world on the home page with the most recent at the top. If you prefer to only see your own bookmarks, simply enter your del.icio.us username in the settings box, or if you are using another service, the correct RSS URL.

Playlists are automatically saved onto your hard disk as shared flash-cookies along with such useful things as volume and the last page you visited – dive back in from where you started!

What’s in store for the future…

• Better integration & support for M3U streaming audio files.
• Actionscript 3 version with interactive music controls, pitch, cue, crossfading between songs.
• Integrate last.fm radio stations for each user!

Technical details

Written entirely from the ground up in actionscript 2 – no components, no templates.

Uses Shared Local Objects to save xspf playlist, volume and recent browsing history.

Features javascript data api to allow bookmarking and the emailing of blog links.

Uses your existing social bookmarking services – imports RSS, XML & OPML.

Intelligent caching of data and pre-empting of user desired information.

Features a scrolling data window with mousewheel input, inertia and variable speed scrolling.

Check it out, tell me what you think!

music meet art / east meets west

A fascinating hybrid of electro J-Pop and classical cello, the Stereo Art project is still in its early phase, but thanks to many live performances, the word is spreading!

As the idea is to combine music & art, I was commissioned to put together a clean but ‘scribbled’ style Flash website to show off the music and display live news. The end result is a scruffy but-not-too-shabby gallery and news reader all wrapped round a live music streamer. You can check it out here.

The design process was refreshingly quick with this project…After five minutes of sketch ideas, Producer Pop lifts up the most basic looking sketch and finalised,

Less is more! … Complete!

and so within a short space of sketching (and a few months of actionscript coding!) the site was launched and began picking up popularity. If you want to check out the Western J-Pop sounds, see it here!

Technical details

Full Screen 100% actionscript 2 – no components, no templates.
Uses Shared Local Objects to save volume.
Imports web services from Flickr and Blogger.com.
Intelligent gallery module with thumbnail zoom and comments.
Designed as a widget to be entirely embeddable into any site with just three lines of html.

Ajax Multimedia webshop!

Dripping with high-tech features, this new music label offers free previews, podcasts and chances to buy digital songs or vinyl! This one stop site will cater for all your eclectic dance needs. Don’t forget about the secret button!

This new music label that cut its teeth releasing party vinyl has gone digital with a fresh new music website and shop!

Play music whilst shopping for music, previewing any track live. That was the main objective… well that along with high quality music delivery using Web2.0 features such as podcasting and rss feeds.

With a stark graphic style by Vacant Design we needed some strong visual animations as cue points for actions. The Flash-based music player is autonomous and animated as it loads an artist’s playlist or swaps between songs. For those not of a nervous disposition, there is always the secret hyper mode (*top dial on the left) if you find it too tame.

Speaking of the music player, let me mention a few unique features:

• automatic saving of your volume preference for when you come visit us again
• communicates with the artists’ pages so that songs can be selected outside of the music player
• wholly animated to reflect the party music is playing with regards to the volume
• super secret party mode for fast processors

If you would like to attend any events, join the mailing list and check out the news and live pages.

Technical details

⊗ ActionScript 2.0 Custom music player code with intelligent internal music database.

⊗ Flash mx compatible with ActionScript animated GUI.

⊗ Music Player loads XML, RSS and XSPF playlists from the netcast.

⊗ Javascript html music controls and feedback – communicating between flash and html.

⊗ On-the-fly xpsf and xml (atom or RSS) playlist creation with scraped coverart

⊗ Based on the Opensource CMS WordPress. Yes really!

⊗ SEO super optimised with analytical software to determine most important records.

⊗ All Artists and channels have relevant RSS and ATOM feeds.

⊗ AJAX page requests into dynamic html.

⊗ Down-gradeable to simple html shop.