Here’s a screenshot:

I used widget to add the menu on my sidebar, for obvious reasons, my themes currently don’t support the new Menus function of wordpress -it’s an awesome function nonetheless, one that I won’t mind adding on my themes seeing it’s usefulness.

This is a classic example of wordpress giving its users less reason to touch html codes, way to go WordPress!! I’m sold as always, although from a design point of view, I liked the default admin color scheme better at 2.9.

Note: demo files available to download from the website

Why use 960 ( pixels )

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Laying it out

This system comes with two variants: a 12 and 16-column layout, one that’s based on partitions of 60-pixels wide the other 40-pixels wide, respectively, each with a 10-pixel margin on both sides.

Here is a screen-shot of the the 12-column layout:

And here is a the 16-column layout in action:

The premise of the system is ideally suited to hasten prototyping, and as with all other systems, may seem confusing and intimidating to use (only) in the beginning, but believe me, it’s worth the time to learn as it will go a long way when you get used to designing with it.

Verdict

Overall, the 960 grid is truly a systematic approach to slicing up a template -one that has the potential to cut production time in half ( if used correctly, me thinks), take note however, that it is not an all-in-one solution to your css and layout issues but merely a guide to follow. In the end, you may or may not choose to use it, but the important thing to remember about this system is the way it approaches the layout.

You can choose to use any number (apart from 960) that you wish as a base for your width as long as you keep in mind the principle behind the 960 grid system -which by the way is the great thing about it, just remember the concept and you won’t find yourself limited to a certain number. The important thing is not the mastery of the tool, but the mastery of the concept behind it.

Learn the rules, so you know how to break them -as needed.

click on the image for a demo

Description:

Technicolor is a video blog theme for WordPress. It features a video showcase in the home page which is interchangeable via admin panel, it also uses of post thumbnails which is intended to be used as a screenshot / preview for the last two posts. Technicolor also makes use of the “once” icon pack, a cool set made by Delacro. The theme as always is widget-ready with replaceable sidebar and footer content, fixed on a 2-column spread layout.

Download

Come to think of it, we just added the letter “x” to html and all of a sudden, my table founded layouts became deprecated and using divs and CSS suddenly became a must (the ‘x’ by the way stands for extensible). I even recall using divs only when I wanted to simulate an iframe effect within my layouts, but now, entire websites are built on it, it’s really funny how one letter could affect so many things in the world wide web (kind of makes you wish it’s the same with life eh?).

So, why and why not use div?
Here is my personal opinion:

1. it’s spider friendly – web crawlers, not the creepy ones
2. it’s css friendly – it does not encourage use of inline styles like tables
3. it’s easier to maintain – if all my styles are in one place and not all over the page
4. it’s more human to read – allows for a more readable markup (developers love this)

why not:

1. the learning curve is steeper than that of learning tables
2. need to have a good grasp of css
3. some styles look weird in a wysiwyg editor but display correctly in browsers
4. cross browser compatibility with css can be a real pain

There are actually a ton of reasons why and why not, but then again, it all boils down to the current standards of the web – which says < tables> are out and divs are in.

click on the image for a demo

Description:

Cameo plays elegantly with elements of light and shadow in order to give more emphasis on images. The theme comes with Featured image and thumbnailed latest posts displayed in the main page, Cameo is the perfect WordPress theme for your photo blog. Cameo also features widget-ready sidebar and footer on a fixed 2-column spread as well as an ajax-integrated drop-down page submenu.

Wiki:

A Wiki might help understand what the theme is all about…
Cameo lighting in film is a spotlight that accentuates a single person in a scene. It creates an ‘angelic’ shot, such as one where God is shining down and a light shines down onto this person.

Cameo lighting derives its name from the art form in which a light relief figure is set against a darker background. It is often achieved by using barn-doored spotlights. It helps focus on the subject and not its environment.

source: wikipedia

My first attempt at a photo blog theme for wordpress. Cameo, definitely has its cons especially when used as a blogging tool, since it intentionally drowns out the text in the dark to leave the images afloat. If this becomes too much of a concern, feel free to edit the css to change font colors manually; I tried to make it so that users won’t have to edit too much to change font colors, hope it helps. Currently I’m thinking of having an admin panel that would allow changing textual color schemes within the template – no release date in mind though… in the near future perhaps

Download

A regular user may not be aware of this but in the world of web design (or the world wide web to be more particular), we too have a way of checking if the data from our web pages are clean, correct and that it satisfies certain criteria – to make a mouthful short, valid. This is a sample link that checks the markup of this website’s validity from the World Wide Web Consortium (W3C) – www.w3.org.

Why do I need to validate my website?

A client of mine once told me:

The validator says my site is not valid, but I see it performing well on my browser, why the heck should I even bother about validation when all I care about is that the information I share through the web can be seen by my target users?

To be honest, this is a very good point – if you don’t care about standards at all. Although this is very bad if your web designer or developer don’t care as well.

I used to be a non-believer of standard-compliant websites back in the day, I used to have that very same reasoning when designing websites, and I too, could care less about how my website would look like in browsers that I didn’t want to support. Maybe because I thought it was too hard or too complex to even bother with, maybe I thought I’d just be wasting my time validating when I should focus more on designing.

Thankfully, somewhere along the way I’ve forgotten why I didn’t want to check for validity, probably because I realized that “the web isn’t about me” and that I am not my target audience and I’m not publishing this only for myself; Therefore, my website shouldn’t comply only to my personal standards but to a standard used by the majority, otherwise I should just be writing on a piece of paper and lock it up on some chest never to be seen by anyone and never to be heard from again…

I have a few answers to the question why we need to validate our websites, the first is because

1. The World Wide Web is for everybody

The only problem with the word “everybody” is that it’s far too many. It’s literally impossible to please everyone not to mention the world ( otherwise there wouldn’t be war or arguments and all we’ll see in this planet are pretty little butterflies flying around… ). Different users have different specifications, different machines, different operating systems, different browsers… whew, too many differences, you get the point…

Just how do we make the web accessible to everybody???

Luckily, we can ( well, maybe not exactly for everybody but at least for the vast majority ), by simply following a certain set of standards, and this is where your VALID HTML website comes to play.

2. Never dictate your target users what they should or should not use

As the saying goes: “The customer is always right.” And if you’re a web publisher, your customers are your readers. You don’t tell them that they should only use Internet Explorer 6 to view your website because it won’t work on a different version or browser, because if you do, you’ve already trimmed down your possible readers ( unless that is of course your intention ).

Lastly, and dare I say: Most importantly…

3. Google is god of the World-Wide-Web and Google plays by Standards

“Doesn’t sound like an answer to the question?”

Let me try and expound that statement…

Web crawlers ( like that of Google’s ), unlike people, read your content line by line, code by code, and if you make it hard for crawlers to understand what you’re trying to say, then it just might as well ignore you. Believe me, you wouldn’t want the god of the world-wide-web ignoring your world-wide-website…

So to make a long story short, if you’re a web publisher, it’s always best to just give Google what it wants.

If that isn’t reason enough for you, that’s quite alright, I’m not gonna try and force anyone to abide by the standards anyway .

click on the image for a demo

Why name it Coffee?

- I know, I know, it’s pretty lame…
Because aside from the color, it reminds me of how much sleepless nights (and gallons of coffee) it took me to develop this theme from scratch, pixel by pixel until it finally reached the point of what it is now.

Description:

Coffee-themed wordpress template. Predominantly with gradients of brown as well as shades of black. The current version of this theme (v1.0.1) has a massive widget compartment, including thumbnailed latest posts and a built-in contact form without the need to download wordpress plugins, both optional and can be replaced via widgets. Layout is a fixed-width 2-column/3-column spread. Ajax-integrated sliding header with highlighted content and drop-down page submenus.

Simple, elegant and functional are words kept in mind while designing this theme, hopefully I succeeded now that it’s done. I plan to release a trimmed-down version of this theme under the GPL license (meaning it’s free for public download – yey!) soon.

click on the image for a demo

Description:

Pasture is an environmental-inspired wordpress theme using gradients of black and green as the main color scheme. Widget-ready sidebar and footer on a fixed 2-column spread, with the addition of Ajax-integrated drop-down page submenus.

Pasture is my first official public release theme. I’ve been meaning to make one since a year ago as I’ve had my shot at editing wordpress themes even before the wordpress 2.5 release ( if I’m not mistaken ). Never did quite found the time though, too bad for me… Anyway, Pasture is here and I hope you guys like my first theme.

Thanks and Enjoy!

Download