I’ll cover everything pertinent but, HTML, CSS and some jQuery experience is assumed. Where possible I’ll link to further information. If you find yourself having any major trouble please drop me a comment below.

Download a copy of the Sample Code to work on as we go, it has everything you need to run the effect.

Libraries

I’ll be using a few code libraries to produce the sliding effect. Each is lightweight, the JavaScript library is required, but the CSS files are optional as their elements can be applied in other ways. However, for the purpose of this tutorial we’ll be using them.

I like to use Reset CSS by Eric Meyer because it sets up all your elements with neutral values, this way you know what to expect when you start building your pages.

The second Core CSS file is of my own creation and is covered in a number of places. For the purpose of this tutorial I’ve included only called elements.

jQuery is my JavaScript library of choice, not your only option though. I also chose to include a cached version of the library from Google Code.

HTML

The most important elements in this HTML block are the IDs. Both yourid1 and yourid1-title are used by the JavaScript component to control the actual scroll effect.
It’s also important to note the Absolute positioning and zero top margin of the Title item. Together these attributes ensure your title animates from the edge of it’s parent and over the top of it’s siblings. Relative positioning will also perform the effect, but you’ll notice the animation pushes down it’s siblings content, rather than slide over it.

<div class="box block float relative" id="yourid<em></em>1">
	<h1 class="float absolute hidden" id="yourid1-title"><a href="" class="block">Box title here</a></h1>
	<p class="entry closed">Box content here</p>
</div>

CSS

With the CSS on Yaypaul.com I chose to style the a tag inside of the title element. You could also style the h1, div, p or span you’ve chosen to use for your actual title item.

As this CSS code only deals with formatting the HTML display and not with the effect I’ll leave comments to the code below – the JavaScript will still fire with no CSS at all.

/* Define item box */
.box{width:300px; height:300px; overflow:hidden;}

/* Set title (H1) level & position */
.box h1{margin:0; z-index:3;}

/* Define link tag */
.box h1 a{width:180px; margin-left:10px; padding:20px; font-size:24px; line-height:30px; background:#f1f1f1; color:#000;}

/* Define intro text/img and level */
.box .entry{width:220px; height:220px; margin-top:0; padding:10px; color:#fff; background-color:#000; z-index:1;}

JavaScript

Now on to the engine that drives the sliding effect. In the speed test preview below you’ll notice each item box has it’s own JavaScript block, this is not efficient. That’s why our sliding code moves each item at the same speed, this allows us to look for any instance of the item that’s triggered.

1. First we register a mouseenter on any .box element.
2. Then we perform a Slide Down action on the instance of .box with the corresponding ID.
3. The code then watches for a mouseleave action on the same instance of .box to perform the Slide Up action.

Inclusion of the :hidden and :visible attributes ensures that the animations only fire on mouseenter if the title is Hidden and on mouseleave if the title is Visible.
The jQuery function .stop() is called to ensure any animation already running is completed before another can be fired, queuing of animations avoided.

Speed values can be changed to any number you prefer to use, lower numbers are faster. Please refer to the Speed test preview below for some options and configurations for slider speed.

$(document).ready(function(){

 //Title Slide Effect
 $(".box").bind("mouseenter", function() {
  $("#"+this.id+"-title:hidden").stop(true, true).slideDown(200);
 }).bind("mouseleave", function(){
  $("#"+this.id+"-title:visible").stop(true, true).slideUp(400);
 });

});

Previews

I’ve included a number of links to different previews of the code below;
Single box – Standard preview
Multiple box – List implementation
Speed preview – Multiple examples of different slide speeds

Example code

Below you’ll find the whole code example, complete with comments.
This same code can be downloaded in a file if you prefer.

<html>
<head>

<title>Yaypaul Title Slide</title>
<style>
<!--http://meyerweb.com/eric/tools/css/reset/-->
	<!--v1.0 | 20080212-->
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}

<!--Core CSS Part http://designergamergeek.com/core-css/-->
	div{overflow:hidden;}
	p.closed{margin:0; font-size:18px;}
	.float{float:left !important;}
	.relative{position:relative !important;}
	.absolute{position:absolute !important;}
	.hidden{display:none}
	.block{display:block}
<!--Content-->
	<!--Define item box-->
	<!--Set title (H1) level-->
	<!--Define link tag-->
	<!--Define intro text/img and level-->
	.box{width:300px; height:300px; overflow:hidden;}
	.box h1{margin:0; z-index:3;}
	.box h1 a{width:180px; margin-left:10px; padding:20px; font-size:24px; line-height:30px; background:#f1f1f1; color:#000;}
	.box .entry{width:220px; height:220px; margin-top:0; padding:10px; color:#fff; background-color:#000; z-index:1;}
</style>

</head>
<body>

<div class="box block float relative" id="yourid1"> <!--Item box-->
	<h1 class="float absolute hidden" id="yourid1-title"><a href="" class="block">Box title here</a></h1> <!--Title[hidden]-->
	<p class="entry closed">Box content here</p> <!--Intro text/img-->
</div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
$(document).ready(function(){

	//Title Slide Effect
	$(".box").bind("mouseenter", function() { //Register mouseenter on any .box element
		$("#"+this.id+"-title:hidden").stop(true, true).slideDown(200); //Stop any current action on this box then Slide Down by N speed
	}).bind("mouseleave", function(){ //Register mouseleave on this .box element
		$("#"+this.id+"-title:visible").stop(true, true).slideUp(400); //Stop any current action on this box then Slide Up by N speed
	});
	// The :hidden and :visible attributes ensure that the animations only fire on mouseenter if the title is Hidden and on mouseleave if the title is Visible

});
</script>

</body>
</html>

Syntax Highlighter – by Alex Gorbatchev

Back when I originally released this poster the print run was very sort, the cost to print at A2 was rather high and sales low. Back then I decided to discontinue the print and move on to other things, not really giving it a second thought. Recently someone asked me about the print and if it was available for download, today it is.

Origins

Circa 2007, originally this poster was designed for personal marketing, later turned into a Giclee print for sale. The poster makes use of vector as well as photographic elements and takes some of it’s inspiration from Monty Python artwork.  The model is my then friend, now wife, Aaryn Nutter.

Format

The reformatted poster is available at A3 size (that’s 297x420mm), 150dpi in CMYK color. While it’s recommended that you print the poster at A3 size, scaling larger or smaller should work fine.

Download The Garden poster free now (3.9MB)

There are two new additions with this update. The first is a class to handle negative text indentation for image replacement items, attach this class to any item you want to hide from user view but still have in the page for search engines to read. The second addition is three classes to help you control your text transformations, it’s now easy to handle text that comes in at the wrong case.

I fixed a minor spelling issue with all the charcoal named elements. I’ve left the old spelling in place, if you’ve used this style on other sites you can feel free to update your Core CSS without fear of those older classes breaking. I also adjusted the colors of the standard input elements slightly, they should now be more readable.

As always; using this code requires you include Eric Meyer’s Reset CSS before Core CSS. This can be included either at the beginning of Core CSS or in a separate file which is called first.

Change log 1.2 > 1.2.1
1. + Added new Class txtImg. Used on image replacement items to remove the text from user display.
2. + Added three new Classes to handle Text Transforms: capitalize, uppercase, lowercase.
3. -/+ Fixed a minor spelling error: charcol becomes charcoal. Old spelling left for backwards compatibility.
4. -/+ Amended colors on standard input items to be more user friendly.

There are three ways for you to download the code.
1. Copy and paste the code listed below.

2. Download a file containing the full Core CSS.

3. Download a file containing a minified version of Core CSS.

/* core.css Paul West [http://www.yaypaul.com] */
/* Version: 1.2.1 - 2010-01-18 */

body{background:#fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p.closed{margin:0;}
p.open{margin:35px 0 0 0;}
p.mini{margin:10px 0 0 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0; z-index:10;}
.txtImg{text-indent:-2000px;}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}
.small{font-size:smaller;}
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}

/* Links */
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a:visited{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcol, .charcoal{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#888;}
.lightGrey{color:#ccc;}
.lightestGrey{color:#e5e5e5;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcolBg, .charcoalBg{background-color:#333;}
.darkestGreyBg{background-color:#484848;}
.darkGreyBg{background-color:#666;}
.midGreyBg{background-color:#999;}
.lightGreyBg{background-color:#ccc;}
.lightestGreyBg{background-color:#e5e5e5;}
.superLightGreyBg{background-color:#f5f5f5;}

/* Normalise headings */
h1, h2, h3, h4, h5, h6{font-weight:normal;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

/* Input formating */
input, select, textarea{font-family:Arial, Helvetica, sans-serif; margin-right:10px; padding:4px; background-color:#e5e5e5; border:0;}
input:focus, select:focus, textarea:focus{background-color:#f5f5f5;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]{background-color:#e5e5e5;}
input[type="submit"]:hover{background-color:#75d0ff;}

Lets start with the obvious change first;

New website

The most notable change is to the website, it’s had the full make-over treatment. The old first iteration of the Deadly Furry Cute website was a simple one page site, great for testing the concept and getting something up, not so great for organizing content. So the first step was to get some content management in place. As usual WordPress was more than enough for the content task, even knowing I needed at least two different page formats -most of the details for the toys are simply saved in custom fields.

Download counting is also much more streamlined, now using a WordPress plugin rather than my own custom script. While the custom script worked fine, I’d never built a frontend to actually display the details -I was checking via myphpadmin.
This change does mean the perma-links for the old toys no longer work, but that’s ok, Series 1 has changed to Series 1 Edition 2. Those first editions are no longer an offering.

New toys

The next most noticeable change is to the number of toys. Series 2: Squirrels and Series 3: Apes are now released taking the total number of downloadable animal individuals to nine.

I’ve talked before about changing templates, having multiple sizes, trying different styles, and the design I went with for the new series -I wont cover those again. One thing you might have missed is that the series to start it all, Series 1, also has a face lift. The changes to the first series are subtle, I didn’t want to mess with a good thing, but they’re enough to make the first edition obsolete.

Even more new toys

Inspired by a request from an American Educator, Deadly Furry Cute now comes complete with alternate ‘Color Your Own’ versions. These versions are simply as they sound, toys which for the most part have all the features of the original -but none of the color, leaving you to color them as you see fit. You’re free to use any coloring medium, I dare say pencil, pen or paint would be easiest though.

The Game

The revamped Deadly Furry Cute toys all have six stats printed on their base (also available on the site), one stat lists the toys health, the others it’s attributes. Using these attributes in conjunction with the basic rules on the site -or any rules you decide to make up for that matter,  can make for a fun little game.
I’m hoping the two rule sets I’ve devised will add some more depth to the toys outside building and displaying them.

Extra free stuff

OK so the toys are free yes, but you still need to build them, how about some swag which doesn’t require assembly?
On the site you’ll now find a number of extras for your Mac/PC, iPhone, Droid or online applications. At the moment that means you’ve got access to some Deadly Furry Cute desktops, device wallpaper and avatar icons, more to follow.

Moving forward

I do have a hard written plan for Deadly Furry Cute, time-line is a little whibley-wobbly but the plan is there. I’m not going to go over it here -where would the surprises be! I will say: many more series are in the works and each one will eventually have a Color Your Own version.

Head over to deadlyfurrycute.com now to download the toys, goodies or leave some feedback.

The first thing I noticed that needed changing was the way the standard width classes were named; fullWidth and quarterWidth while intuitive just aren’t as intuitive as width100 and width25. Switching to percentages made way more sense.  I’ve listed a full change log below, but I think you’ll agree Core CSS has become that little bit easier to use.

As always; using this code requires you include Eric Meyer’s Reset CSS before Core CSS. This can be included either at the beginning of Core CSS or in a separate file which is called first – I prefer the first method.

Change log 1.0 > 1.2
1. – Removed standardized ‘P’ style (I found there were far less bugs if this was set per project).
2. + Added ‘P.mini’ class (complements P.open nicely).
3. + Added ‘fixed’ class (useful for quick positioning).
4. -/+ Revamped all width definitions to exactly match widths required (fullWidth becomes width100 etc).
5. + Added ‘lightestGrey’ class (useful for dark background small-print).
6. + Added ‘lightestGreyBg’ class (helpful for footer backgrounds etc).
7. + Added ‘superLightGreyBg’ class (extension of lightestGreyBg, again for footers, box backgrounds etc).
8. -/+ Revamped ‘input’ styles to be more neutral (should now be a proper option, rather than just a reminder to change the styles).

There are three ways for you to download the code.
1. Copy and paste the code listed below.

2. Download a file containing the full Core CSS.

3. Download a file containing a minified version of Core CSS.

/* core.css Paul West [http://www.yaypaul.com] */
/* Version: 1.2 - 2009-08-22 */

body{background: #fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p.closed{margin:0;}
p.open{margin:35px 0 0 0;}
p.mini{margin:10px 0 0 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0; z-index:10;}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.small{font-size:smaller;}
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}

/* Links */
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a:visited{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcol{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#888;}
.lightGrey{color:#ccc;}
.lightestGrey{color:#e5e5e5;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcolBg{background-color:#333;}
.darkestGreyBg{background-color:#484848;}
.darkGreyBg{background-color:#666;}
.midGreyBg{background-color:#999;}
.lightGreyBg{background-color:#ccc;}
.lightestGreyBg{background-color:#e5e5e5;}
.superLightGreyBg{background-color:#f5f5f5;}

/* Normalise headings */
h1, h2, h3, h4, h5, h6{font-weight:normal;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

/* Input formating */
input, select, textarea{font-family:Arial, Helvetica, sans-serif; margin-right:10px; padding:4px; background-color:#dbdbdb; border:0;}
input:focus, select:focus, textarea:focus{background-color:#f5f5f5;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]{background-color:#888;}
input[type="submit"]:hover{background-color:#4aa056;}

A few of these new developments I’m going to keep secret until the site goes live, huge anticlimax there I know.  What I can talk about is new toy designs and licensing.

Let me start by saying that over the last few months I’ve had some inquiries from school teachers, either asking if they can use the toys, or asking how much it would cost to use them.  Let me state, right now, the toys will always be free for schools to use in the class room. If a teacher can find a way to use the toys in class for fun or education, I’m all for it.  What I don’t want is individuals, companies or schools reselling or rebranding my work. To that end I’ll be creating a new ‘license’ page which outlines exactly what can and can not be done in detail, more for clarification than anything else.

Now the fun bit
The new toy designs for Series 2 and 3, yep that’s two new series with the update, have been completed and are awaiting final testing. That testing procedure basically entails a final test run in both thin card and paper, with any updates from previous tests included. Over kill, maybe, but I like to get things right.
I’ve come some way with the illustration style since Series 1 back in 2008, partly because I’ve been doing more illustration work and have getting the practice in, but also I’ve decided to make these toys a little harder to make.  Looking back at Series 1, I realized I was trying to make it too easy, all angular and easy to cut curves, you’ll not get the easy ride this time!  Having said that I’ve not gone overboard, this change is about getting things more life like. While the new Series are more challenging to make, I hope they’ll be just as fun!

Without further ado, here are some screen grabs to wet your appetites. Can you tell what they are? Shout in the comments if you think you can!

Last chance
This might be your last chance to download Series 1 in their current size, read about why it’s changing, so head over to Deadly Furry Cute now and grab them before it’s too late!

Building the network
The number of sites I have has grown, shrunk, consolidated and grown again over the years. Many of those sites are now confined to the world of web caches. But one thing is clear: I always have more than one running concurrently and I do a very bad job of pushing – or enticing lets say – users from one to the other.
Currently I have this blog, a dedicated portfolio, a paper toy project and a number of different places to buy t-shirts I’ve designed. All these entities get traffic – which is great – but almost no users that visit one site link over and visit another – not great.  So the task: come up with a way to link these sites together.

What is acceptable
I started looking around the web to see ways in which companies and other designers did or didn’t do this.  My eyes extensively scanned the internet for possible solutions and the answer was as clear as coffee – not clear at all.  Some sites present you with a selection task ‘where are you’ or ‘what do you want to do’, others are more explicit and say ‘hey check out our other site(s)’ via nicely designed graphical pulls.  And others use navigation bars that are network centric. So the question remained: which way did *I* want to do this.

Nonrelevant clutter
My main issue with most of the potential solutions is that they would interfere with the content and context of the site they would sit on.  My portfolio focuses on work for a reason, it doesn’t have links to my twitter, news posts or blog content because I want people to be focused on the work, and in most cases only the work.  The blog doesn’t have that problem of course, I’m trying to push people all over the web. I do however want a coherent solution, one that works with all my sites. I’m not just being lazy with this idea either. A solution that works for all, also works for the users interacting with it: they only have to learn the tool once, sites by me become easily recognizable – for better or worse – and they have an easy way to jump between those sites.

Designing the bar
There really was only one solution that would cover all my prerequisites: a network bar. Said solution needed to be unobtrusive, it also needed to be well designed, usable and work with any colour scheme I could throw at it.  The latter left only one real choice, black.  Not really an unobtrusive colour black, but could I make this work…
Take a look at come clips on different colours:

The bar needed a brand, one that is recognizable, not overly distracting, and if at all possible is relevant to me. I tried a number of things that didn’t work or just didn’t sit right with the rest of the page design – it was important not to design in isolation. I ended up going with a simple ‘W’ design, referencing my last name, simple and stylized.
The final result:

Technical implementation
Lets get down some specs here. At the very least the basic functions have to work without JavaScript enabled. Because the bar can’t be cross domain loaded – for security reasons – it’ll have to be small in file size. It should know which site you’re on and disable that link. It should not need to use any files my sites don’t already use. It should also – where possible – add value or services to the page you are one.
Here’s an example of added features I’ve been testing out:

The roll out
Due to the nature of the bar and the potential breakages that could occur to sites already live, I’ve decided to only implement the bar with new versions of the sites I run. Does that mean I’ll have to redesign or tweak my current sites, yes it does. Quite frankly though some of the sites were due a redesign or rework anyway, this site for instance doesn’t really work in many areas, that’s OK though, it’s an evolution.
Expect to see the bar at a Paul West site near you soon!

UPDATE!: You can see the new bar in action on my portfolio site yaypaul.com

Everyone Loves Posters
What’s a nice easy thing to make, print and give away? Posters!  With that decided, all that was left to do was decided on a theme, a theme my friends and I could relate to.  Everyone I know, in one form or another, plays games. So it was an obvious choice really. Posters based on different games for different people was out of the question. After all one of my variables was that this project be ‘quick to create’. Something I could do in a few lunch times, rather than a full blown project.

Along comes a theme
It hit me like a well landed swipe from a +10 to parry shield – sorry. RPGs. Now, while not everyone I knew had played an RPG, many had and those that hadn’t could be at least put into a core RPG bracket.  I’d decided four posters was a good number for a mini series, and that’s how I decided to split up the RPG genre. Lets face it there are really only four types of RPG player. The ‘run up and beat it to death’ type. The ‘let it hit me until it dies of exhaustion’ type. The ‘stand at the back and throw things at it’ type. And those ‘wear robes, a pointy hat and kill it with lightning from my finger tips’ types.

The fellowship
So here they are. Four A2 posters, simply illustrated, RPG game themed. Designed for my friends, offered to you to brighten up your office, home, cave, bastion of doom…

They are saved in PDF format so you shouldn’t have trouble printing them on smaller paper if you need to. Free for Personal Use Only.

Download the ‘Melee’ Poster

Download the ‘Ranged’ Poster

Download the ‘Tank’ Poster

Download the ‘Magic’ Poster

Preview

Go Internets!
Early this morning, before the internet became lagtasic from all it’s presidential affars, I finished and uploaded Aaryns new portfolio site.  It’s a simple one page affair, with complex insides and a nice outfit.
The design itself was built by my lovely wife. I think it shows her personality and style very well. Her work will also give you a good idea of her mad skills in fashion graphics if you’d like to commission her.
The core of the site is built around Ajax calls and funky JQuery bits and pieces. Not hugely search engine friendly I’ll admit, but it doesn’t half work nice. Check it out for yourselves at heyaaryn.com.

A new day dawns. Another project completes.

Core CSS is simply that: a set of tags which you use individually or together to define basic layout structures of web pages. Not to be confused with a framework or a ‘here I’ve done all the work’ CSS file, that’s not what this is.  You’ll still need to create a custom CSS file for each different sites you create, but using Core CSS means you wont have to recreate many of the tags and settings you and I use every day.

There are two ways for you to download the code.

1. Copy and paste the code listed below.

2. OR download a file containing Core CSS.

As with every project I’m sure I’ll find new things to add to the CSS file. And as with any project supplied to the public I’m sure you will find things you use missing or extras you’d like to add.  While you can add extra or missing items to your own files I’d like to encourage you to come and post back in the comments with your ideas and additions.  While I can’t promise I’ll add everything in, I will promise to review their relevance and usefulness to the community.

/*
core.css [screen]
- - - - - - - - - - - - - - - - - - - -
Creator:    Paul West [paulanthonywest.com]
Version:    1.0
Date:        2008-08-29
*/
body{background: #fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p{margin:0 0 25px 0;}
p.closed{margin:0;}
p.open{margin:0 0 35px 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0;}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.fullWidth{width:100% !important;}
.halfWidth{width:50% !important;}
.quarterWidth{width:25% !important;}
.thirdWidth{width:33% !important;}
.fifthWidth{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.small{font-size:smaller;}
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}

/* Links */
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a:visited{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcol{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#999;}
.lightGrey{color:#ccc;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcolBg{background-color:#333;}
.darkestGreyBg{background-color:#484848;}
.darkGreyBg{background-color:#666;}
.midGreyBg{background-color:#999;}
.lightGreyBg{background-color:#ccc;}

/* Normalise Headings */
h1, h2, h3, h4, h5, h6{font-weight:normal;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

/* Input formating */
input, select, textarea{margin-right:10px; padding:4px; background-color:#eee; border:0;}
input:focus, select:focus, textarea:focus{background-color:#fff;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]:hover{background-color:#9cd7f1;}