Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Responsive, configureabe framework for Turbine
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
index.html
readme.md
runway-config.cssp
runway-prototypes.cssp
runway.cssp

readme.md

Runway

A simple, configurable, adaptive framework for Turbine. Doesn't support IE6 and never will. Runway provides an adaptive layout that matches the users screen width in four steps. Each of the step is configurable in detail so you can easily change the order of your layout columns the match the available space on the screen.

Warning

Runway is work in progress. Because of a bug in Turbine it doesn't work perfectly in IE6 and 7 for now.

Usage

Configure the layout cell padding in line 4 of runway-config.cssp and then either

  • Use runway.cssp like any other css framework - include the file and use the classes described below...
  • ...or load runway-prototypes.cssp into your style file using the @load syntax and extend the protypes (same names as the classes, prefixed with ?)

Classes and prototypes

Wrapper: rw-wrapper - Clearfixed, provides the layout width

Rows: rw-row - Clearfixed

Floats: rw-fl (left), rw-fr (right)

Columns/Cells: rw-100, rw-90, rw-80, rw-75, rw-70, rw-66,, rw-65, rw-60, rw-50, rw-40, rw-33, rw-30, rw-25, rw-20, rw-15, rw-10

Extra spacing: rw-esl (left), rw-esr (right)

Remove spacing: rw-nsl (left), rw-nsr (right)

Presets

The four layouts sizes are by default:

  • 1080px (screen size > 1096px)
  • 960px (screen size between 1096 and 972px)
  • 640px (screen size between 972px and 640px)
  • flexible (mobile devices or screen size > 640px)

These values and the sizes of the layout cells can all be configured in the file runway-config.cssp.

Something went wrong with that request. Please try again.