Yardstick ThemeKit

A tiny app that makes designing Yardstick Measure themes a whole lot more enjoyable.

Setup

After cloning the repo, just install the gem:

$ sudo gem install themekit-[version].gem

Then define the environment variable YS_SYSTEM_CSS. This tells ThemeKit where on your computer the Yardstick system.css file is located:

export YS_SYSTEM_CSS="/absolute/path/to/yardstick/screen.css"

Tip: Add this line to your ~/.profile

Creating a Theme

Create a new Theme by passing the name (alphanumeric) to ThemeKit:

$ themekit my_awesome_theme

This will create a new directory, my_awesome_theme, which is a fully-functioning skeleton Theme that can be customized.

The first thing you should do is edit your theme's name in info.yml.

The following files are required:

  • info.yml - Defines your Theme's name & available variations.
  • theme.html - Theme's markup & template tags.
  • styles.css - Theme's stylesheet. This should contain the styles for all variations.

Running the server

To start ThemeKit, just change into your theme directory and run it:

$ cd ~/yardstick/themes/my_awesome_theme
$ themekit

Then head to http://localhost:4567/

Theme Variations

To test different theme variations, pass in the variations(s) as a space-separated list in the querystring:

http://localhost:4567/?green people

or if you've got OCD:

http://localhost:4567/?green%20people

These variations will be tacked onto the <body> tag:

<body class="green people">

If no variation is specified, the value "default" will be used. You can use the body.[variation] [selector] technique to style elements differently depending on the active variation:

body.people { background: url(people.jpg); }
body.medical { background: url(medical.jpg); }

body.green h1 { color: green; }
body.blue h1 { color: blue; }

Supported Tags

  • theme_variation }
  • title }
  • page.title }
  • image image_data_id [default image path] %
  • text text_data_id [default text] %
  • page_meta %
  • menu main %
  • menu account %
  • page.content }
  • system_stylesheet_path }
  • stylesheet_path }

Automatic Screenshots

Requires PyYaML

ThemeKit can automatically take screenshots of your Theme, in all its variations. For example, if info.yml contains:

variations:
  colors:
    red: Red
    green: Green
    grey: Grey
    blue: Blue
  industries:
    industrial: Industrial
    medical: Medical

ThemeKit will take 8 screenshots (4 colors x 2 industries).

Setup

You must symlink two executables from ThemeKit into your path:

$ sudo ln -s ~/yardstick/themekit/bin/webkit2png /usr/bin/webkit2png
$ sudo ln -s ~/yardstick/themekit/bin/screenshots /usr/bin/screenshots

Taking Screenshots

From within your Theme directory, just type:

$ screenshots

This will read info.yml and determine all the possible variations your theme has and save a screenshot of each. Screenshots are saved to a subdirectory of your theme, aptly named screenshots.

Each time you generate screenshots, existing screenshots will be deleted.