p51 Labs » CSS

Simply-Buttons v2

Kevin — Wed, 11 Nov 2009 08:36:32 +0000

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

Background

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 all the button tag was created to make really nice buttons for your sites (W3 Button Element). After a little work I came up with the “Simply-Buttons Technique”.

Benefits

Buttons size to fit text.
There are 3 states: Inactive, Active, and Hover.
They look and behave the same way in every browser and operating system.
The do not need the javascript to work, they work with just the css
Way better looking buttons than what anyone else can do with XHTML/CSS, isn’t that reason enough?!

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.

 


  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)

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. The library solves the caveats above as you can see below:

YouTube Style (w/ javascript)

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


  options : {
    hyperlinkClass : 'button' // 'a' tags with this class will be processed
    ,activeButtonClass : 'button_active' // Active class for active buttons
    ,states : { // The various states and css properties, define them as normal
      outer : {
        active : {
          backgroundPosition : 'bottom left'
        }
        ,inactive : {
          backgroundPosition : 'top left'
        }
      }
      ,inner : {
        active : {
          backgroundPosition : 'bottom right'
        }
        ,inactive : {
          backgroundPosition : 'top right'
        }
      }
    }
    ,iphone : {
      replaceButtons : true // if iPhone; replace buttons with inputs?
    }
  }

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/simply-buttons-v2.js.

Download Simply Buttons v2 (zip)

Installation

Simply include the stylesheet and javascript and make sure they can find your images. Then simple call the init function, either using the default options as below or configuring it as show above.

Customize

As shown in the YouTube example, you can easily modify the buttons look and feel. You can do this by creating your own stylesheet and you can use the one supplied as an example, its filled with comments. There are also options that can be changed and configured on the javascript end as show above.

SUPPORT: Feedback and Donations help to support this Plugin and future development.

Spread the Word

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

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

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