Chronos sample site

Some sample text here to display online


Grid Layouts

The Chronos Grid system is based on Bootstrap's grids, but has a few adjustments to ensure a more consistent view.

Note! If you are not comfortable with Dreamweaver's code view or HTML we recommend you do not use this functionality.


Basics

There are two main components to grids, rows and spans. To start off with, we add rows which are essentially just containers. Inside these rows we place blocks called "spans". Inside the spans we have standard snippets. Spans have a number assigned to them which says how wide it is, this number is between 1 and 12, with 1 being the smallest and 12 being the largest.

There are many ways you can organise spans within rows, as long as the total number adds up to 12. See below for an example.

1
1
1
1
1
1
1
1
1
1
1
1
3
3
3
3
4
4
4
4
8
8
4
6
6
12

Show Code

Beyond Basics

Unfortunately things arent always as simple as a row with a few spans in it. Sometimes we need to split up a span into multiple rows, for example, to get something like the following:

6
6
12
4

Show Code

Now, if you have a sharp eye, you will notice that the padding between the two span6 elements is smaller than the padding between the larger two light-grey blocks.
This is because the margin is a percentage of the width of the container, so, if the container is smaller the gap will also be smaller.
In order to rectify this we have added a "row-fixed" element which forces the row to be as wide as the page.

4
4
8
4

Show Code

Explaining the numbers

You will have noticed a lot of numbers being thrown around above. A row is divided up into 12 spans, which together make up its full width.
For example you could have 12 span1 elements to make up a row, or one span6 and two span3. You can mix and match these however you like.
For every new row, you begin the number counting again unless you use a row-fixed, in which case you should continue numbering of the parent as seen above.

Web Support, University of Kent, Canterbury, Kent, CT2 7NF

Enquiries: +44 (0)1227 824851 or contact us

Last Updated: 24/02/2015