Template is a class-based library of CSS layout techniques and JavaScript behaviours. It features flexible columns with arbitrary content order, thumbnails with hidden text, horizontal lists, dialogs that adapt to the size of their contents, dropdowns, tabs and slides, layers that fill the window... and more.

It is conceived to make writing CSS easier in teams and across projects, and to reduce code by sharing common CSS and JS. Template's classes can be used in OOCSS-style development, or as mixins in a LESS or SCSS workflow.

Hello. This documentation is in the process of being written. As such, it's incomplete, and changing.

.wrap

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

.col

The .col class is used to make grids of columns. Columns in template have been developed for making flexible and responsive layouts. They are not constrained by a pixel grid (unless you want them to be). They feature:

Here's the basic grid spacings:

no1

no2

no1

no2

no3

no1

no2

no3

no4

no1

no2

no3

no4

no5

no1

no2

no3

no4

no5

no6

no1

no2

no3

no4

no5

no6

no7

no1

no2

no3

no4

no5

no6

no7

no8

no1

no2

no3

no4

no5

no6

no7

no8

no9

no1

no2

no3

no4

no5

no6

no7

no8

no9

no10

no1

no2

no3

no4

no5

no6

no7

no8

no9

no10

no11

no1

no2

no3

no4

no5

no6

no7

no8

no9

no10

no11

no12

Spanning columns in a six column grid:

no1

no2

no3

no4

no5

no6

no1

span2

span3

span4

no6

Nesting columns in a four column grid:

no1

no2

no3

no4

no1

no1

no2

no3

no4

no1

no2

no2

no3

no4

Combining spanning and nesting to create cross-rhythms:

no1

no2

no3

no4

no5

no6

no1

no2

span4

no1

no2

no1

no2

no3

Ok, let's see some code.

One of the major problems encountered in time travel is not that of becoming your own father or mother. There is no problem in becoming your own father or mother that a broad-minded and well-adjusted family can't cope with. There is no problem with changing the course of history—

the course of history does not change, because it all fits together like a jigsaw. All the important changes have happened before the things they were supposed to change and it all sorts itself out in the end.

<div class="2_col_wrap col_wrap wrap">   <div class="no1_col col">{{ content }}</div   ><div class="no2_col col">{{ content }}</div> </div>

The major problem is simply one of grammar, and the main work to consult in this matter is Dr. Dan Streetmentioner's Time Traveler's Handbook of 1001 Tense Formations. It will tell you, for instance, how to describe something that was about to happen to you in the

past before you avoided it by time-jumping forward two days in order to avoid it. The event will be descibed differently according to whether you are talking about it from the standpoint of your own natural time, from a time in the further future, or a

time in the further past and is futher complicated by the possibility of conducting conversations while you are actually traveling from one time to another with the intention of becoming your own mother or father.

<div class="3_col_wrap col_wrap wrap">   <div class="no1_col col">{{ content }}</div   ><div class="no2_col col">{{ content }}</div   ><div class="no3_col col">{{ content }}</div> </div>

Most readers get as far as the Future Semiconditionally Modified Subinverted Plagal Past Subjunctive Intentional before giving up; and in fact in later aditions of the book all pages beyond this point have been left blank to save on printing costs.

<div class="3_col_wrap col_wrap wrap">   <div class="no1_col span2_col col">{{ content }}</div   ><div class="no3_col col">{{ content }}</div> </div>

.layer

A layer is an absolutely positioned element that fills its parent's width and height:

<div class="layer" style="background-color: grey;"></div>

Layers can be used to create screens behind loading icons and popups, and for transparent overlays that capture mouse events. Several of template's plugins rely on them. Click on a line of JavaScript to run it:

jQuery('#layer_example').addLoadingIcon(); jQuery('#layer_example').removeLoadingIcon(); jQuery('<p>Poetry!</p>').popup();

.index

<ul class="index">   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li> </ul>

<ul class="striped_index index">   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li> </ul>

.button

Do not press
<a class="button" href="#">Do not press</a>

.thumb

Marvin
<a class="thumb" href="#" style="background-image: url('images/marvin.png');">Marvin</a>

.slide

One of the major problems encountered in time travel is not that of becoming your own father or mother. There is no problem in becoming your own father or mother that a broad-minded and well-adjusted family can't cope with. There is no problem with changing the course of history—the course of history does not change because it all fits together like a jigsaw. All the important changes have happened before the things they were supposed to change and it all sorts itself out in the end.

next

The major problem is simply one of grammar, and the main work to consult in this matter is Dr. Dan Streetmentioner's Time Traveler's Handbook of 1001 Tense Formations. It will tell you, for instance, how to describe something that was about to happen to you in the past before you avoided it by time-jumping forward two days in order to avoid it. The event will be descibed differently according to whether you are talking about it from the standpoint of your own natural time, from a time in the further future, or a time in the further past and is futher complicated by the possibility of conducting conversations while you are actually traveling from one time to another with the intention of becoming your own mother or father.

prev | next

Most readers get as far as the Future Semiconditionally Modified Subinverted Plagal Past Subjunctive Intentional before giving up; and in fact in later aditions of the book all pages beyond this point have been left blank to save on printing costs.

prev

<ul class="horizontal index">   <li><a class="slide_button button" href="#slide1">Slide 1</a></li   ><li><a class="slide_button button" href="#slide2">Slide 2</a></li   ><li><a class="slide_button button" href="#slide3">Slide 3</a></li> </ul> <div class="slide" id="slide1">   {{ content }}   <a href="#next">next</a> </div ><div class="slide" id="slide2">   {{ content }}   <a href="#prev">prev</a> | <a href="#next">next</a> </div ><div class="slide" id="slide3">   {{ content }}   <a href="#prev">prev</a> </div>

.tab

Time is an illusion.

Lunchtime, doubly so.

<ul class="tabs_index index">   <li><a class="tab_button button" href="#tab1">Tab 1</a></li   ><li><a class="tab_button button" href="#tab2">Tab 2</a></li> </ul> <div class="tab" id="tab1">   <p>Time is an illusion.</p> </div ><div class="tab" id="tab2">   <p>Lunchtime, doubly so.</p> </div>

.tip

Tips can be created using the data-tip attribute:

Hover over me.

<p data-tip="{{ content }}">…</p>

Tips can also be referenced by id, allowing you to place entire DOM structures inside them:

Hover over me.

Ok, you can stop now.

<p><a href="#example_tip">Hover over me</a>.</p> <div class="tip" id="example_tip">{{ content }}</div>

.popdown

Popdowns are a little more persistent. They are used to make menus, drawers, and elements that require explicit deactivation - they only deactivate when the user touches outside them. Clicks inside it are ignored.

Popdown
<a class="button" href="#example_popdown">Popdown</a> <ul class="popdown index" id="example_popdown">   <li><a class="menu_button button">First button</a></li>   <li><a class="menu_button button">Second button</a></li>   <li><a class="menu_button button">Third button</a></li> </ul>

tap

A 'tap' event is triggered on touchend. This is often more useful than the simulated click events on touch devices, which wait ~300ms before firing, in case they should be interpreted as double clicks. If a tap event is bound to a node, the device's simulated click event is suppressed.

Template's tap event is multitouch-aware, ie. a second touch can generate a tap event even if a first touch is already generating one.

Tap here

jQuery('#tap_example').bind('tap', fn);
Fork me on GitHub