Table of Contents

  1. Introduction
    1. What is Winston?
    2. Download
    3. Why?
    4. Usage
    5. Test suite
    6. Thanks!
  2. Conventions
    1. Commenting
    2. Indentation
    3. Handling the default content problem
    4. On presentational markup
  3. Documentation by module
    1. Module: Layout
      1. Grid based columns
      2. Percentage based columns
      3. Center anything (horizontally)
      4. Center anything (vertically)
    2. Module: Reset
    3. Module: Avatars
    4. Module: General
    5. Module: Typography
    6. Module: Links
    7. Module: Buttons
    8. Module: Simple pagination
    9. Module: Forms

Buttons module

Use the following HTML to create a regular button:

			<div class="buttonHolder">
				<a href="#" class="button">
					<b>&nbsp;</b>
					<span>Button text</span>
					<i>&nbsp;</i>
				</a>
			</div>

This will result in a button:

  Button text  

Now sometimes you want to have 2 buttons next to each other. Simply add another <a> inside the buttonHolder-div.

			<div class="buttonHolder">
				<a href="#" class="button">
					<b>&nbsp;</b>
					<span>Button text</span>
					<i>&nbsp;</i>
				</a>
				<a href="#" class="button">
					<b>&nbsp;</b>
					<span>Button text</span>
					<i>&nbsp;</i>
				</a>
			</div>

This will add some spacing between the two buttons. Tight.

  Button text     Button text