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

Layout module

Ah, layout. Every web designers' favorite part.

To use the layout module you will need:

Or alternatively the full versions of each file:

Grid based column system

To layout our user interface, we use a grid. The grid depends on the application. We know a few things: we want to keep things within a 960px wide frame; we want enough space (>20px) between columns; and we want the reading length of text to be proper.

This is what the CSS for the default 10 column grid looks like:

			.col { width: 72px; margin-right: 24px; float: left; }
			.col-2 { width: 168px; }
			.col-3 { width: 264px; }
			.col-4 { width: 360px; }
			.col-5 { width: 456px; }
			.col-6 { width: 552px; }
			.col-7 { width: 648px; }
			.col-8 { width: 744px; }
			.col-9 { width: 840px; }
			.col-10 { width: 936px; }
			.last { margin-right: 0 !important; }

In Winston all columns live in a <div> with a .cols class.

The system uses floats to define columns. Because of this it is necessary to wrap the floats in a container that gets cleared.

Winston uses the clearfix method. Some people prefer to clutter their markup with nonsense like <br style="clear: both" />. Don't do this.

Here's an example of three columns:

This is column A.
This is column B.
This is column C.

And the code for this:

			<div class="cols">
				<div class="col col-2">
					This is column A.
				</div>
				<div class="col col-2">
					This is column B.
				</div>
				<div class="col col-2">
					This is column C.
				</div>
				<div class="col col-2 last">
					This is column D.
				</div>
			</div>

Percentage based column system

The grid system is an easy way to create layouts. However, not everything fits on the grid. Websites and web applications are not a piece of paper: we can't go Joseph Muller Brockmann-style when rewiring the latest Wordpress interface. Depending on the situation, you might consider working with another type of column system, based on percentages.

Winston provides such a system: structurally it works like the grid system but it uses different class names.

Here's the 3 columns again, but with the percentage based system:

This is column A.
This is column B.
This is column C.

This is what the code looks like:

		

			

				This is column A.
			

			

				This is column B.
			

			

				This is column C.

1d3 stands for 1/3. Since we can't use slashes in class names, we use 'd'. So if you wanted to have 2 columns, each 50/50, then you would code it like this:

		

			

				This is column A.
			

			

				This is column B.

Which would result in:

This is column A.
This is column B.

If you want some spacing inside those columns, you can use the provided classes to do this:

			.cols .spacingLeft { margin-left: 24px; }
			.cols .spacingLeftHalf { margin-left: 12px; }
			.cols .spacingRight { margin-right: 24px; }
			.cols .spacingRightHalf { margin-right: 12px; }
			.cols .spacingBothHalf { margin-right: 12px; margin-left: 12px; }

Using these classes you can get a result like this:

Percentage Columns example
This is column A. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id magna. Proin euismod vestibulum tortor. Vestibulum eget nisl. Donec interdum quam at nunc. In laoreet orci sit amet sem. In sed metus ac nunc blandit ultricies. Maecenas sed tortor.
This is column B. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id magna. Proin euismod vestibulum tortor. Vestibulum eget nisl. Donec interdum quam at nunc. In laoreet orci sit amet sem. In sed metus ac nunc blandit ultricies. Maecenas sed tortor.
This is column C. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id magna. Proin euismod vestibulum tortor. Vestibulum eget nisl. Donec interdum quam at nunc. In laoreet orci sit amet sem. In sed metus ac nunc blandit ultricies. Maecenas sed tortor.

Center anything horizontally

This is a div structure that you can use to center anything horizontally. Normally block elements need a defined width to center them in CSS. Using this div structure you can center anything. It's ugly but it works.

Some extra measures have to be taken for older browsers like IE6 and Firefox though, so use with caution (see: test_suite/layout/).

		

			

				


					Center anything horizontally...!

Center anything vertically

This is a div structure that you can use to center anything vertically without resorting to a table.

		

			

				


					Center anything vertically...!

Make sure to define a height on the element that wraps around the div structure. Example with inline CSS to make this point clear:

		

			

				

					


						Center anything vertically...!