I’ve merged two core functions into one object with this update, Title Hide and Input Clear are now one. I find I use them in similar situations so it made sense to bring them together in this way. I’ve also updated the jQuery to work better with release 1.6.1.  Essentially nothing has changed with the functions apart from the syntax update. But what this change does facilitate is a quick and easy method to avoid conflicts. If you already have a ‘core’ object in your app, simply change any instances of ‘core’ to your object name and the function calls remain unchanged and working.

There are two ways for you to download the code

1. Copy and paste the code listed below.
2. Download a zip containing the source and production files.

/* http://www.designergamergeek.com/jquery-projects/
 Version: 1.1 - 2011-05-31
 License: none (public domain)
*/

// Core object
var core = {
 storeTitle : "",
 checkVal : ""
}

//Title Hide
$('.titleHide').live('hover', function(e) {

 //Store the title for later
 core.storeTitle = $(this).attr('title');

 //Clear title
 $(this).attr('title', '');

}, function(e) {

 $(this).attr('title', core.storeTitle);

});

//Multi Purpose Input Clear
$(document).delegate('.input','focus',function(e){

 //Get current (default if first time) value of input
 core.checkVal = $(this).val();
 core.storeTitle = $(this).attr('title');

 //If the inputs title is empty, fill it with the default value
 if (core.storeTitle == '' || core.storeTitle == null || core.storeTitle == undefined){
 $(this).attr('title', core.checkVal);
 }

 //Create user input value
 core.storeTitle = $(this).attr('title');

 //If default value, clear it
 if(core.checkVal == core.storeTitle){
 $(this).val('');
 }

}).delegate('.input','blur', function(e){

 //Load variables
 core.checkVal = $(this).val();
 core.storeTitle = $(this).attr('title');

 //If no user entry, fill with default title
 if(core.checkVal == ''){
 $(this).val(core.storeTitle);
 }

});

I’ve been trying to find some more useful functions to add to the core object, but I’m being careful to only add functions that have high usage. The last thing I want to unnecessarily bloat the code. I do plan to post some other bits and pieces though so I’ll keep you posted.

Granted, neither items of jQuery released this week are difficult for other web developers to produce. I’m releasing them purely as a window into my development cycle and how I like to make things modular, reusable and efficient. If anyone else finds the code useful, bonus points.

Everyone knows titles should be used liberally, they help the user and search engines alike. This particular piece I find useful for those times when having a title popup interrupts the user, impacts animation or stops interaction with surrounding items. I’m sure there are other uses also.

How it works

As you’ll see from the code view below, this one’s not very complex. When an item with the .titleHide class is hovered I store it’s original value in the Rel attribute, then clear the title. When the user rolls off the item I use that Rel attribute to restore the original title, failure to do so would leave you no access via the DOM to that title until page refresh.

To enable this script simply add a class of .titleHide to which ever item needs it’s title hidden. This works with links, image replacement, buttons and any other item with a title.

See an example of the code in action

You can download the code in a number of ways

1. Copy and Paste the code listed below.
2. Download a zip file containing the source and production ready files.

$(document).ready(function(){

	//Multi-Purpose Title Hide
	$(".titleHide").hover(function() {
		//Store the title for later
		var store = $(this).attr("title");
		$(this).attr("rel", store);
		//Clear title
		$(this).attr({title: ""});
	}, function() {
		//Restore title
		var restore = $(this).attr("rel");
		$(this).attr("title", restore);
		//Clear Rel attribute
		$(this).attr({rel: ""});
	});

});

How it works

The code view and comments below explain exactly what’s going on at each step, but here’s how the code works; the code takes the original value of your input item stores it as the Title attribute, then clears the original value allowing for clean user input. Storing the original value in this way allows a user to hover the input item and still see what should be entered. The code then waits for the user to navigate away from the current item and does one of two things. 1) If there has been user input the original value is kept as the Title attribute for reference and nothing else happens, allowing correct values to be submitted. 2) If there has been no user input or the user clears then navigates away from the item, the Title attribute is taken and reapplied as the value, in essence resetting it’s state.

Adding the function to your Input tags is super easy too. Simply add a .input class to each item you wish to clear. This works for Text, Password and Textareas.

View an example of the jQuery Input Clear in action

There is two ways for you to download the code

1. Copy and paste the code listed below.
2. Download a zip containing the source and production files.

$(document).ready(function(){

	//Multi Purpose Input Clear
	$(".input").click(function(){
		//Get current (default if first time) value of input
		var check = $(this).val();
		//If the inputs title is empty, fill it with the default value
		if ($(this).attr("title") == ""){
			$(this).attr("title", check);
		}
		//Create user input value
		var inputVal = $(this).attr("title");
		//If default value, clear it
		if(check == inputVal){
			$(this).val("");
		}
	}).blur(function(){
		//Load variables
		var check = $(this).val();
		var inputVal = $(this).attr("title");
		//If no user entry, fill with default title
		if(check == ""){
			$(this).val(inputVal);
		}
	});

});

Let me elaborate on that second point a little. Core CSS started out life as a way for me to produce faster more efficient code, because of this the framework held some items I used often, but most users probably didn’t. This update removes those items. Full details in the change log below.

It’s not all removals

Some new elements have also made it in this time around, it’s not all slim-lining.

.imgTxt is a class I added back in 1.2.1 for easy hiding of image replacement text. It’ll now move text on these items right off the left margin, the old value didn’t move enough for larger screens.

.reverse is a class I’ve added to reformat backwards-facing email addresses to be presented correctly to the end user, but site scrapers will only see that wrongly formatted email address. I added this class after reading an article on how to hide your email address from spammers.

.txtShadow is a CSS3 class that adds a 1px white shadow as default to an element. You can use this class as a base for most text shadow effects, but it’s extra handy for that Apple-like look.

Lastly is something that’s been missing for a while, a Focus state for link items.

As usual, Core CSS works best when used with Eric Meyers awesome Reset CSS.

Core CSS 1.3 Change log

Listed in the order they appeared.
1. -/+ Removed P styles, p.closed class remains.
2. – Removed .top style.
3. – Removed .small font sizing.
4. + Added .imgTxt class for hiding text of image replacement.
5. + Added .reverse for email address hiding.
6. + Added .txtShadow CSS3 effect.
7. + Added Focus attribute to links.
8. -/+ Removed various grey colors, chalk/charcoal remains.
9. -/+ Removed various grey background colors, chalk/charcoal remains.
10. – Removed input formatting.

There is a couple of ways for you to download the code

1. Copy and paste the code listed below.

2. Download a zip containing the source and a minified production copy.

/* http://www.designergamergeek.com/core-css/ */
/* Version: 1.3 - 2010-09-11 */

body{background: #fff;}

/* Positioning */
div{overflow:hidden;}
.visible{overflow:visible;}
.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}

/* 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 */
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}
sup{vertical-align:super; font-size:smaller;}
sub{vertical-align:sub; font-size:smaller;}
.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;}
.imgText{text-indent:-9999px;}
.reverse{direction:rtl; unicode-bidi:bidi-override;}
.txtShadow{text-shadow:#fff 0 1px 0;}
.closed{margin-bottom:0;}

/* Links */
html a{text-decoration:none;}
html a:hover{text-decoration:underline;}
html a:active{text-decoration:underline;}
html a:focus{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcoal{color:#333;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcoalBg{background-color:#333;}

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

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

Let’s get the personal reasons out of the way. First I have a whole load of updated JavaScript, CSS and PHP I feel can only fully be utilized if the theme is a blank slate. This is a test bed after all. Next is the look and feel. Beyond updating the design I also want to approach the style very differently than before, the blog has traditionally followed the minimal feel of my portfolio. Time to give it a persona of it’s own. But these aren’t the meat, much more is directing this update.

User experience

While much of this update has to do with improving user experience, two main areas will impact you the user the most. Easier article selection and lead-in images.

Since it’s inception the blog has displayed it’s content as just that, blog-like. With this update I’ll be reformatting the homepage and subsequent category pages to present you with more immediate options. Moving away from a wide row based format should both mean less horizontal eye movement and less scrolling. Most internet users have become used to the scrolling of webpages and ‘above the fold’ details are becoming less important, granted. But that doesn’t mean we should be forcing users to scroll when a more condensed, easily scannable format would work much better for them.

Remember user experience isn’t about what you as a site owner want, but want your site visitor needs.

About 85% of visitors enter directly via a post, most read said post and leave. Around 45% of those visitors go on to a category page and are presented with a bland list of title and text. How to capture those users to go on and read something new is the goal of lead-in images. A lack of interest in reading maybe a symptom of an increasingly overworked and choosey internet viewer, one that doesn’t have the time nor thirst to digest textual explanations of content. This is why all content past, present and future will include –post update– a meaningful image lead-in. All the better to scan me by.

Multi-platform development

The average internet user is consuming a larger amount of content via internet enabled devices than ever before, soon this consumption may surpass their computer browsing at home and in the office. This is largely to do with the quality of devices on the market today, your iPhones, Androids, iPads all allow faster and more highly detailed surfing than before. What this means to all site creators –amateur and professional alike– is we need to produce usable, intelligent and adaptable content.

Many have lead the way for a long time with mobile versions of their sites, but you’ll notice I mention content, not versions. Sites now need to be viewable on multiple sizes of mobile device, both high and low ppi, the iPad’s vertical view must also be taken in to account. To build and maintain different versions of sites, and in some cases content, is overhead heavy and unrealistic to most businesses.

The solution? Platform relevant stylesheets, PHP selections, optimized imagery and intelligent choices on what each user needs on their platform of choice.

Mobile users don’t want to wait 30 seconds for that ad you’ve decided they just have to see, iPad users in vertical view don’t want to see your website shrunk because you’ve decided they must have direct access to the side bar. The time for selective content view is here. More on this in a later update.

HTML5 readiness

While still a few years away from a final specification, HTML5 is here to stay and many of it’s attributes can be used today. I’m not just talking Audio and Video tags, page layout tags while not fully supported can and should be used to provide proper semantic views of your content. It’s up to the site owner to decide how much HTML5 implementation they wish to make, but you wont break your sites by including them. Not if you code wisely. Take the Article tag, styling it alone will get you no where with older and problematic browsers. Styling a div around it with a class of .article however will serve you well for the future, easily able to remove the div entirely and changing your CSS from .article to simply article. I prefer this approach over relying on JavaScript for rendering.

There are many places on the net right now talking about exactly this type of approach. I myself will get into it some more at a later date as I proceed with the update.

I hope this article gives you a nice overview of why the site is changing, how i’ll be going about those changes and the type of updates you can expect across the coming weeks as we approach the new update.

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;}