p51 Labs » Experiments

Upgraded Typography with sIFR3

Kevin — Fri, 19 Dec 2008 10:16:38 +0000

I work from day to day on a mac. That being said, web pages look much better on my screen than say on a windows machine. Well the other day I saw my site on a windows machine… what a horrid pixelated mess the type is on Windows XP. That being said I upgraded much of the typography on the site with sIFR3, I am not sure if this is how it will end up but for now I think it works rather well.

Spread the Word

Holy Grail Layout

Kevin — Tue, 09 Dec 2008 04:49:50 +0000

TESTED IE6 IE7 FF(PC/MAC) Safari Opera(PC/MAC)

So what do we have here?

There a number of ‘Holy Grail’ layouts out there:

The problem with them is that they are usually only for one purpose, or they have validation problems. Way back I was presented with a problem, I needed a multi-column layout for a CMS engine that could allow infinite design possibilities with only one template. I needed a true ‘Holy Grail’ layout. Hence the following was born.

p51’s Holy Grail Layout

Now I know the name is suggestive, I apologize, its more me trying to be sarcastic. However this is a pretty mean-lean-green little layout in its own right. Let’s see how we can have some fun with it.

The Guts

The layout starts out as a 3 column layout with optional navigation bars as such:

The Markup

The CSS

*,
html,
body {
	margin: 0;
	padding: 0;
}

/* NN6/7 min-width is needed for scrollability when wrapper is centered */
body {
	min-width: 770px;
}

/* Use wrapper for Left Faux Column */
#wrapper {
	text-align: left;
	width: 770px;
	margin: 0 auto;
}

#header,
#navigation-container-lower,
#navigation-container-upper,
#masthead,
#footer {
	clear: both;
	width: 100%;
}

#navigation-container-lower,
#navigation-container-upper,
#masthead,
#footer {
	padding: 1px 0;
}

/* Use main for Right Faux Column */
#main {
	float: left;
	width: 100%;
}

#main:after {
 	/* Clear floating elements for NN6/7 */
    content: ".";
    display: block;
	height: 0px;
    clear: both;
    visibility: hidden;
}

#center {
	margin: 0 170px 0 170px;
}

#content {
  	float: left;
  	width: 100%;
	margin: 0 -95% 0 0;
}

#left {
  	float: left;
  	width: 170px;
}

#right {
  	float: right;
  	width: 170px;
	margin: 0;
}

/* IE Fixes for Win/Mac */
* html div#content {
	margin: 0 -100% 0 0;
}

Now three things of note:

The entire layout is wrapped in a div called ‘wrapper’.
‘left’ and ‘center’ are wrapped in a container called ‘content’ while ‘right’ is after the ‘content’ container.
All of the #2 containers are wrapped in the ‘main’ container.

How to achieve other layouts

Ok, so we see on the demo page that we have some nice javascript links to change the layout. We have started with the core and added a basic theme. The following modifications show how we can make this layout anything we want, as the javascript shows off.

Fluid Layout

#wrapper {
	width: 100%;
	margin: 0 auto 0 auto;
}

Fixed Layout

body {
	min-width: 770px;
}

#wrapper {
	width: 770px;
	margin: 0 auto 0 auto;
}

Fixed Left Layout

body {
	min-width: 770px;
}

#wrapper {
	width: 770px;
	margin: 0 0 0 0;
}

One Column Layout

#right, #left {
	display: none;
}

#center {
	margin: 0 0 0 0;
}

Two Column Layout

#right {
	display: none;
}

#center {
	margin: 0 0 0 175px;
}

Three Column Layout

#right, #left {
	width: 175px;
}

#center {
	margin: 0 175px 0 175px;
}

NOTE When creating the columns here, the margin on the left and right of the ‘center’ column needs to be equal to or greater than the width set for the respective left and right columns.

For example

#right, #left {
	width: 200px;
}

#center {
	margin: 0 200px 0 200px;
}

NOTE When you change the page width, you should change the body min-width as well.

Get Source Files

Grab the demo and the css files below.

Source Files (zip)

Thoughts?

So there it is, my version of a lean-mean-flexible layout that validates. Thus far it has proven to be pretty handy, however there is always room for improvement, thoughts?

Spread the Word

Simply-Buttons Technique

Kevin — Sun, 07 Dec 2008 01:12:57 +0000

UPDATE! Version 2 is out, check it out ».

TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC)

Background

So I have decided to share a button technique I have been using for awhile with the public. I had some time a while back and read a few interesting articles on buttons:

These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better. After a little work I came up with the “Simply Buttons Technique”.

How it Works

The markup is pretty simple, as you can see below. The thing to notice here is that both the button and link tags each have a nested-nested span tag (…say that 3 times fast!).




  Button

Now there are two parts involved here, the first thing to know here is that this method will work with just CSS. However it works a little better with some Javascript enhancements. Let’s take a look:

Generic (no javascript)

YouTube Style (no javascript)

Now we see the buttons load nicely here, we are using the Sliding Doors Technique. The caveats are:

There are outlines on the buttons.
The text is selectable.
These buttons are not mobile friendly (the button tag).

The Solution

In comes the the Simply Buttons Javascript component. It is currently written using the Prototype framework. I will be writing a version that is framework independent soon, but this works just as well. The library solves the caveats above as you can see below:

Generic (w/ javascript)

YouTube Style (w/ javascript)

Below is the object you can configure to further customize the buttons to suite your design.

this.options = Object.extend({
  hyperlinkSelector: 'a.button',
  activeButtonClass: 'button_active',
  states: {
    outer: {
      active: {
        backgroundPosition: 'bottom left'
      },
      inactive: {
        backgroundPosition: 'top left'
      }
    },
    inner: {
      active: {
        backgroundPosition: 'bottom right'
      },
      inactive: {
        backgroundPosition: 'top right'
      }
    }
  }
}, options || {});

Download the Code/Sample

Below you can download not only the core CSS and Javascript files but you also will get a few samples. I am not the greatest at tutorials so I will update this post as feedback comes in, however there are quite a few comments throughout the files. The important files are: stylesheets/buttons.css, javascripts/buttons.js.

Download Simply Buttons (zip)

Thoughts

I will be updating the Javascript in the weeks to come with a version that is not framework dependent. Other than that I would love to hear thoughts, suggestions, or even new takes on this technique. Let’s bring the button back!

NOTE To see this button style in action, check out the Contact Page.

Spread the Word

YES API PHP Wrapper

Kevin — Sat, 06 Dec 2008 09:46:48 +0000

I had some time and so I whipped up a quick PHP wrapper for the YES.com API. This is a pretty cool api if you haven’t seen it, check it out! Anyways, you can get the wrapper from the download link below or just copy/paste it.

YES API PHP Wrapper

< ?php

//  YES API Wrapper version 1.0
//  (c) 2008 Kevin Miller
//
//  This script is freely distributable under the terms of an MIT-style license.

class YESAPIWrapper
{

	const API_URL = "http://api.yes.com";
	const API_VERSION = "1";

	public function __construct()
	{
	}

	public function execute($method = null, $options = array())
	{
		if ($this->allowed_method($method))
		{
			return $this->fetch(self::API_URL . "/" . self::API_VERSION . "/" . $this->method . "?" . $this->options_string($options));
		}
	}

	protected $method;

	protected $allowed_paramaters = array(
		"station" => array(
			"name" => true,
			"callback" => false
		),
		"stations" => array(
			"match" => false,
			"freq" => false,
			"media" => false,
			"genre" => false,
			"loc" => false,
			"max" => false,
			"callback" => false
		),
		"log" => array(
			"name" => true,
			"ago" => false,
			"callback" => false
		),
		"recent" => array(
			"name" => false,
			"max" => false,
			"callback" => false
		),
		"chart" => array(
			"name" => false,
			"date" => false,
			"genre" => false,
			"hot" => false,
			"max" => false,
			"callback" => false
		),
		"media" => array(
			"q" => false,
			"mid" => false,
			"callback" => false
		),
		"related" => array(
			"mid" => true,
			"max" => false,
			"callback" => false
		),
		"artist" => array(
			"artist" => true,
			"callback" => false
		)
	);

	private function allowed_method($method)
	{
		foreach ($this->allowed_paramaters as $key => $value)
		{
			if ($key == $method)
			{
				$this->method = $method;
				return true;
			}
		}

		throw new Exception($key . " is a required parameter for the method (" . $this->method . ")!");
	}

	private function validate_options($options)
	{
		foreach ($this->allowed_paramaters[$this->method] as $key => $value)
		{
			if ($value && !array_key_exists($key, $options))
			{
				throw new Exception($key . " is a required parameter for the method (" . $this->method . ")!");
			}
		}		

		foreach ($options as $key => $value)
		{
			if (!array_key_exists($key, $this->allowed_paramaters[$this->method]))
			{
				throw new Exception($key . " is not an valid parameter for the method (" . $this->method . ")!");
			}
		}		

		return true;
	}

	private function options_string($options = array())
	{
		if ($this->validate_options($options))
		{
			return http_build_query($options);
		}
	}

	private function fetch($url = "")
	{
		return ($contents = file_get_contents($url)) ? json_decode($contents) : null;
	}

}

?>

Spread the Word