Toggle Background Grid On or Off
The CSS for the UAlberta Grid is controlled by the grid_24c_960.css file.
CSS Explained
Why use class?
Classes are used so that multiple values can be applied to any container and so that values for widths and heights are pre-defined in units of the grid. This sets up the system so that css properties to define dimensions do not have to be created for each individual container.
.griditem
The griditem class defines the margin, padding and float for each container - called a griditem.
.griditemouter
The same as a griditem, without margins and padding.
.clear
The clear class is used to clear floating griditems and allow for a the container to stretch to the bottom of floated items and to create the break needed to start a new row of container(s).
The numbers in the classes
All the classes that define width, height and position have a number value. This number is the position or size for the grid.
For dimension, the number defines how many columns the container will span.
Example: class="w4 griditem" applied to a a container will create a container that spans 4 columns.
NOTE: With the 24 column grid, all items spanning the page must add up to 24.
For x and y position, the number corresponds to the position on the grid relative to the container the item is in. x0 y0 will place an item at the very left and very top of the containing div or section.
/* widths */
The 'w' indicates a class to define the width of a .griditem. The values in the 'w#' classes correspond to the width of the content area + the padding + the margin.
The 'w#' classes should always be used with the .griditem class.
/* outerwidths */
Outer widths 'w#outer' are used to define the width of a container without margins and paddings. Outer widths can be used to hold a number of containers using inner widths.
Outer widths can be used on their own. If you need to create a number of outer containers that float beside each other, use in conjunction with the .griditemouter class.
Positioning values
Positioning values can be used in certain cases where items need to be absolute positioned. x corresponds to the horizontal. y corresponds to vertical. Positioning values must be used with the .gridposition class.
/* CSS file for grid */
.griditem {
padding:5px;
margin:10px;
float:left;
}
.griditemouter {
float:left;
}
#PageContainer {
margin:auto;
}
#container, #container1, #container2 {
margin:auto;
}
.clear {
clear:both;
}
.gridposition {
position: absolute;
}
/* widths */
.w1{width:10px;}
.w2{width:50px;}
.w3{width:90px;}
.w4{width:130px;}
.w5{width:170px;}
.w6{width:210px;}
.w7{width:250px;}
.w8{width:290px;}
.w9{width:330px;}
.w10{width:370px;}
.w11{width:410px;}
.w12{width:450px;}
.w13{width:490px;}
.w14{width:530px;}
.w15{width:570px;}
.w16{width:610px;}
.w17{width:650px;}
.w18{width:690px;}
.w19{width:730px;}
.w20{width:770px;}
.w21{width:810px;}
.w22{width:850px;}
.w23{width:890px;}
.w24{width:930px;}
/* outer widths */
.w1outer {width:40px;}
.w2outer {width:80px;}
.w3outer {width:120px;}
.w4outer {width:160px;}
.w5outer {width:200px;}
.w6outer {width:240px;}
.w7outer {width:280px;}
.w8outer {width:320px;}
.w9outer {width:360px;}
.w10outer {width:400px;}
.w11outer {width:440px;}
.w12outer {width:480px;}
.w13outer {width:520px;}
.w14outer {width:560px;}
.w15outer {width:600px;}
.w16outer {width:640px;}
.w17outer {width:680px;}
.w18outer {width:720px;}
.w19outer {width:760px;}
.w20outer {width:800px;}
.w21outer {width:840px;}
.w22outer {width:880px;}
.w23outer {width:920px;}
.w24outer {width:960px;}
/* Horizontal positioning */
.x0{left: 0px;}
.x1{left: 40px;}
.x2{left: 80px;}
.x3{left: 120px;}
.x4{left: 160px;}
.x5{left: 200px;}
.x6{left: 240px;}
.x7{left: 280px;}
.x8{left: 320px;}
.x9{left: 360px;}
.x10{left: 400px;}
.x11{left: 440px;}
.x12{left: 480px;}
.x13{left: 520px;}
.x14{left: 560px;}
.x15{left: 600px;}
.x16{left: 640px;}
.x17{left: 680px;}
.x18{left: 720px;}
.x19{left: 760px;}
.x20{left: 800px;}
.x21{left: 840px;}
.x22{left: 880px;}
.x23{left: 920px;}
.x24{left: 960px;}
/* Vertical positioning */
.y0{top: 0px;}
.y1{top: 40px;}
.y2{top: 80px;}
.y3{top: 120px;}
.y4{top: 160px;}
.y5{top: 200px;}
.y6{top: 240px;}
.y7{top: 280px;}
.y8{top: 320px;}
.y9{top: 360px;}
.y10{top: 400px;}
.y11{top: 440px;}
.y12{top: 480px;}
.y13{top: 520px;}
.y14{top: 560px;}
.y15{top: 600px;}
.y16{top: 640px;}
.y17{top: 680px;}
.y18{top: 720px;}
.y19{top: 760px;}
.y20{top: 800px;}
.y21{top: 840px;}
.y22{top: 880px;}
.y23{top: 920px;}