Library of Formatting Examples talk:Main

This page describes how to build an LOFE example page using the templates.

The Example Wrapper

Each example is wrapped in a div tag with one of three classes. Most examples should be wrapped in:

This creates a flexible layout. For examples where you want to force a side by side layout regardless of screen width, instead use:

There is a third type with a floating image and no formatted text that hasn't yet been implemented.

Building the example

There are three templates used to build the example: one at the start of the example, one in the middle, and one at the end. The section below explains how each template works and what goes in between them.

The Start Template

The start template is the most complex and takes a number of arguments. Call it with:

   {{LOFE:Example start |argument=value...}}

The start template takes the following arguments:

image-filename

the wiki filename of the page image. Do not include "File:".

image-max

a class ID representing the maximum image size, in ems.

text-max

a class ID representing the maximum size in ems for the formatted text block

text-min

a class ID representing the minimum size in ems for the formatted text block

The permitted values for the -min and -max values are:

   /* minimums with m */
   
   div.lofe-m20 {min-width:20em;}
   div.lofe-m30 {min-width:30em;}
   div.lofe-m35 {min-width:35em;}
   div.lofe-m40 {min-width:40em;}
   div.lofe-m45 {min-width:45em;}
   div.lofe-m50 {min-width:50em;}
   div.lofe-m60 {min-width:60em;}
   
   /* maximums with x */
   
   div.lofe-x20 {max-width:20em;}
   div.lofe-x30 {max-width:30em;}
   div.lofe-x40 {max-width:40em;}
   div.lofe-x50 {max-width:50em;}

By default, the text block will have a minimum width of 35em, and both elements will have a maximum width of 50em.

The Middle Template

After the formatted text, call the middle template with:

   {{LOFE:Example middle}}

This template does not need any arguments or customisation. It will close the formatted text block and set up for the discussion section.

The End Template

Like the middle template, the

   {{LOFE:Example end}}

Don't forget to place the closing tag for your div at the end of the document, after the end template.