Advice for Contributors for the layout of pages

The current skin for the Transition Website is responsive, ie it is designed to look great depending on your screen size.

On small screens, like a phone, the site menu will be minimized, and the content will stack - i.e. things that were side by side go one after the other instead.

The css framework used is bootstrap

Block divs

We are using divs instead of tables for layouts, as is current best practice. You can't make responsive layouts work with tables because they are too rigid.

Divs in pmwiki are made like this: (:div:) some content (:divend:)

When you are nesting divs, it is very important to number them correctly, because pmwiki thinks that if you start a div it closes the previous one with the same number.

(:div1:) 
 (:div2:)
    some content 
 (:div2end:)
(:div1end:

Styling

These divs can have classnames, like (:div class="classname":)

You can give a div several classes by separating them with a space (:div class="class1 class2":)

Decorative features

To make the pages easier to read, try to group and frame related content in boxes. The grey page background is not designed to have text on top - it would be hard to read. You should use boxes if you can. eg

(:div1 class="box":)
this is a box
(:div1end:)

...will create

this is a box

You can make it highlighted with "highlight" class in addition to "box". This is useful for a box that appears inside a box, and you want to draw attention to it - like a special note

(:div1 class="box highlight":)
this is a highlighted box
(:div1end:)

this is a highlighted box

Tables

Tables are for data. Use divs in the grid system for layout. Currently there is one style available for tables, class="tabulated" which adds borders and padding. We will be adding more.

If you want a header cell in your table (eq of th in html) use (:head:)and (:headnr:)

(:table class="tabulated":)
(:headnr:)headnr
(:head:)head
(:cellnr:)cellnr
(:cell:)cell
(:tableend:)
headnr head
cellnr cell

Grid system

When you want to lay the page out with items side by side (which we previously did using a table), we now use divs but with classes that denote rows and columns.

row is for rows , cols are for cols. so in terms of tables, row is the equivalent of a row in a table, col is like (:cell:).

Col widths

The width of a containing block is split into 12. as long as the total col values add up to 12, you should be golden. If you want 2 cols that are the same width, ie 50% of the containing block, use col-[size]-6 for both. ie 12/2 = 6. If you wanted 3 cols of the same size, 12/3 = 4 so all would be col-[size]-4. More complicated layouts are possible by nesting the rows and splitting the containing block with cols. you can nest happily, and the layout should not break note: using additional highlight styled divs here so you can see the structure. eg 1: 2 cols, same size (the text in each section shows the class you need to give for each div).

col-sm-6

col-sm-6

OR 3 cols, same size

col-sm-4

col-sm-4

col-sm-4

OR 5 cols, different size

col-sm-1

col-sm-2

col-sm-3

col-sm-4

col-sm-2

Grid breakpoints

Sizing [size] - on smaller screens, you want the grid layout to degrade, and content cols to stack (reorder into one column). You can decide what the size break point is for the grid . There are 3 possibilities: small (sm - phones), medium (md - tablets) and large (lg - small laptop - desktops tend for extra large). The classnames for a grid layout block that will break at tablet size (and stack) will be col-md-6. These breakpoints should not be mixed within the same row. You can nest different behaving rows and cols, but I would do it mindfully.

Content block ordering

The order of blocks after the grid size break are the order they are on the page usually, but sometimes you want it to be different. IE images on the left on bigger screens you want to be below the text. change the order of the blocks in the code, then use "pull-right" on the relevant cols. I imagine on this page, a judiciously placed pull-right would be best, to give prominence to the content on small screens.

Images

You can wrap images on the page in different class divs depending on how you want them to behave across screen sizes. %class="img-sm"% [img] Small, like a thumbnail, and float. max-size (width): 150px

%class="img-md"% [img] Medium. Will be 100% of containing block until max size of 300px and centred.

%class="img-lg"% [img] Large. 100% of containing block. You need to create image quite big (as large as its maximum size), but it's the best one for responsive layouts

Floats / Alignment

You can align images or blocks to the left or the right with a float using "pull-left" or "pull-right", particularly useful when overwriting default behaviour for img-sm. However be cautious as this can have some unintended effects on different sized layouts. Some elements have quite fine tuned float behaviour for different screen sizes.

%class="img-sm pull-right"% [img] or pull-left

[[<<]]Clear floats with pmwiki markup

Icons

There are some icons that you can use, instantiate on the page with (~:icon [name]:). These are used for box bases, buttons and general visual interest

.icon-home

.icon-image

.icon-calendar

.icon-twitter .icon-twitter2 .icon-twitter3

.icon-facebook .icon-facebook2 .icon-facebook3

.icon-googleplus .icon-googleplus2

.icon-share

.icon-earth

.icon-location

.icon-compass

.icon-book

.icon-bubble

.icon-attachment

.icon-link

.icon-connection

.icon-stats

.icon-leaf

.icon-mail

.icon-checkbox-unchecked

.icon-checkbox-partial

.icon-play

.icon-newspaper

.icon-user

.icon-search

Notes on the names of the different parts of the web-page

These can only be accessed by web admins as they are easy to mess up and include different types of coding.

The top bar can be accessed as follows: Site.TopBar.

The side bar is group specific e.g. food side bar TTFood.Navigation

The navigation for each group of pages can be changed as follows e.g. TTWhatWeDo.navigation (you can see the other titles of these groups within the Site.TopBar page.

Share this page