Grid System

The grid system is built to scale and adjusts automatically to the screen width of the viewing device. You are encouraged to use the grid system to create customized page layouts within the University’s standard header and footer.

Layout

The layout CSS classes below contain the necessary padding for mobile view.

/* No constrains containers 
   Meaning that they can be used as full-width backgrounds
   Using these classes will guarantee that you have enough
   padding in mobile versions
*/
.tcu-layoutwrap--dark {}
.tcu-layoutwrap--dark--border {}
.tcu-layoutwrap--purple {}
.tcu-layoutwrap--hornedfrog-grey {} 
.tcu-layoutwrap--transparent {}
.tcu-layoutwrap--grey {}

Layout Helper Classes

Use the classes below to help with layout issues like clearing your floats.


/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix, .cf {}

/* Contains contrains of 1100px */
.tcu-layout-constrain {}

/* full width */
.tcu-full-width { width: 100% !important; }

/* Centers a block element */
.tcu-layout-center {}

Grid Sizes

Size 1 of 1

1/1

Size 1 of 2

1/2

1/2

Size 1 of 3

1/3

1/3

1/3

Size 1 of 4

1/4

1/4

1/4

1/4

Size 1 of 8

1/8

1/8

1/8

1/8

1/8

1/8

1/8

1/8


	<div class="cf">
		<div class="unit size1of2"></div>
		<div class="unit size1of2"></div>
	</div>

When using the grid, wrap the columns using cf class and add the unit class to each column. Make sure you wrap the columns in a tcu-layoutwrap class.

Mixed Grids

The grid layout is easily extended by nesting and mixing different column sizes.

3/8

5/8

1/3

2/3

1/4

3/4

1/8

7/8

Group

50%

50%

Group

50%

50%


<div class="cf">
	<div class="group unit size1of2">
		<div class="size1of2 unit"></div>
		<div class="size1of2 unit"></div>
	</div>
	<div class="group unit size1of2">
		<div class="size1of2 unit"></div>
		<div class="size1of2 unit"></div>
	</div>
</div>

When nesting grids use the group class to eliminate gutters on the parent element of the columns that are being nested. Wherever possible, limit nesting grids to 2 levels deep. Anything more than that would require the use of nopadding on grid columns or units for correct grid alignment and indentation