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

Avatars module

Lists of users are a common thing in web applications, especially the so-called “social” ones.

Example
Example: circle style avatars
Example: different sizes (24, 48, 96 and 128 sq.)

And a code example (this is for one avatar only, of course):

If you want to use funky overlays (e.g. add a bit of gloss to each avatar) you can use the avOverlay class. The default images for avOverlay turn square avatars into round ones. Note that this only works on a white (#FFF) background. For other colors, you're going to have to roll your own images.