In addition to shooting in the garage, we were also fortunate enough to play around with the 57s from Maybach.

Normally, I would provide some insight and some sample code to show how everything works, but in this case, the plugin page does an excellent job. If you have any further questions, leave it in the comments and I’ll do my best to answer.

InnerFade JQuery Plugin

Features:

• 2 Tier navigation powered by CSS & spiced up with JQuery
• Last comment is displayed after the post to entice viewers to “Read More”
• Recent comments cycle through on the sidebar with JQuery Innerfade
• 2 Pre-defined Ad Spots support 300×250 banners
• Built with future expansion & customizing in mind

Demo:

On The Field Wordpress Theme
by: Alex Coleman

Buy It Now:

You can purchase this theme here

Features:

• Simple and elegant front end makes reading and browsing very easy
• CSS drop-down menu with a dash of jquery to make it just right
• Google AdSense ready
• Custom fields define each post image
• Complete documentation

Demo:

Although I am still working out final kinks and cleaning the code for packaging, you special people who read my blog (yes, I’m talking about both of you) can get a first glimpse:

Chef Park Wordpress Theme
by: Alex Coleman

If you come across any bugs or would like to add some feedback about the theme, please leave it in the comments below!

Buy It Now:

You can purchase this theme here

For demonstration purposes, let’s edit an imaginary file called “thankyou.php”. This file will be hosted in the root directory on the web server, not in your theme directory in Wordpress. I’d like to include the sidebar on this page, but it keeps erroring out, saying the sidebar function is not supported.

When editing the file you want to display the sidebar on (this case “thankyou.php”), insert this snippet of PHP code to the top:

<?PHP require_once('wp-blog-header.php'); ?>

Yep, that’s it! Of course the location of that file will vary on your current situation, but if that’s the case, just link it accordingly.

Build An Incredible Login Form With jQuery
Nettuts

Create a Glowing Abstract Light Vector Graphic
VectorTuts

How to Create a Super Shiny Pencil Icon
PSDTuts

Date Badges and Comment Bubbles for Your Blog
CSS-Tricks

How to Make Your Portfolio Site More Effective by Adding a Blog
Freelance Switch

HDR: Not Only The ‘Magic’ Effect
Abduzeedo

1. Know What You’re Building. Draw Out A Rough Sketch of The Layout Before Any Computer Work

One of the most important steps in the development process…and it seems kind of obvious. This is extremely important because your time is extremely important. Building on the computer initially without a set idea for the site eats a lot more time than you expect.

2. Create A Folder Hierarchy Prior to Creating Any Files

This step allows you to plan the project a little more effectively. Once you determine where your files will reside, you’ll be much less likely to create unnecessary sub directories that clutter your FTP space.

3. Browse Several Cutting Edge Sites to Gauge The Future

There’s nothing worse than completing a site, just to have a new trend emerge and suddenly your site becomes less cutting edge. Check out other sites before you start building to see what’s hot, and what may become the wave of the future. This will ensure you build a site which will last years rather than months. Faveup, Best Web Gallery, Design Shack are just a few great sites out there that will show you what other designers are up to.

4. Organize Your Image Files And Other Site-Wide Files

It’s easy once you get going to name the images you create whatever first comes to mind like “banner.png” or “background.jpg”. Instead, try to stay on top of your file naming by breaking images down by category/page/etc. For example instead of naming the header banner “banner.png”, try “header-banner-3stooges.jpg” where 3 stooges is a short description of the banner image. In the long run, this will help easily group & identify objects and even help your search engine rankings.

5. Consider Separate Files For Different Sections

This especially applies to larger, or potentially larger sites. Just how CSS files centralize all the style information, separate files for your menu, header, sidebar, footer, etc. help with updating. Imagine having to update a single character in your footer on 50 pages, page by page. Now imagine making one change on “footer.html” and it being reflected on each and every one of the 50 pages.

6. And Finally, Plan For Growth

This may go without saying, but all of the items I have just listed apply to this idea. It may not seem like a big project at first, but you never know when it may grow all of a sudden beyond control. Always keep that in mind.

This is one of my first full tutorial write-ups, so if it’s confusing to you, I do apologize and feel free to either contact me via email or comment on this post and I’ll do my best to answer! But with practice my tutorials will become much more understandable and easy to read.

First of all, Blueprint by default includes all the styles you need to begin designing your website. Before you begin implementation into your website, look through the code and determine what you need & don’t need. For example, at the bottom of styles.css document, you’ll notice styles which determine what your forms will look like. In some cases, I decide to cut this and use my own styles for the forms on a website I am working on.

Start By Referencing The Files Between <head></head>

This will activate the styles needed to use this framework.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel=”stylesheet” href=”http://alexcoleman.net/wp-content/themes/alexcoleman/css/blueprint/ie.css” type=”text/css” media=”screen, projection” /><![endif]–>

Now we’re ready to start implementing the different classes Blueprint has to offer.

Wrap Your Content In A Container

24 is the number of total columns on your grid. Each column is 30px wide with a 10px margin in between. Depending on what you’re design is going to be, determine how wide you’d like to set your wrapper.

<div class="span-24 last">

*/your content/*

</div>

Determine The Size Of Your Columns & Create

You can define each column any size you wish, as long as the sum of all equals 24. Once you set the width for the last column, you’ll have to close it with a “last” class. All this does is remove the margin to the right of the last column so it stays within the wrapper width.

<div class="span-24">

<div class="span-5">
The Left Column
</div>

<div class="span-14">
The Middle Column
</div>

<div class="span-5 last">
The Right Column
</div>

</div>

The “Append” & “Prepend” Class

Append & Prepend can be used to space certain columns from each other. For example, if you have a column for your main content, and a column for your right column, but would like to increase the spacing in between them, you can either Append an amount to the main column, or Prepend an amount to the right column.

Here is an example of adding the equivalent of 2 columns width between the right column and main content:

<div class="span-24 last">

<div class="span-5">
The Left Column
</div>

<!--since your spacing the middle column from the right column 2 columns width, don't forget to subtract 2 from the total span-->
<div class="span-12 append-2“>
The Middle Column
</div>

<div class=”span-5 last”>
The Right Column
</div>

</div>

Option-Add Vertical Borders To The Right Of The Left & Middle Column

Add the colborder class to add a vertical line to the right of your column

<div class="span-24">

<!--since the column takes up 1px, you'll need to subtract 1 from the span class-->
<div class="span-4 colborder“>
The Left Column
</div>

<div class=”span-13 colborder“><!–same goes for this one. Subtract 1 from the span class–>
The Middle Column
</div>

<div class=”span-5 last”>
The Right Column
</div>

</div>

There are many more classes for typography as well in the Blueprint framework, so it’s recommended you read through the CSS prior to using.

Please if you have any questions or comments, leave them below. Thanks!

Helpful Links To Get You Started

1. Official Blueprint CSS Framework Tutorial
2. Example page (also included with the download)