Category Archives: CSS

Buttons

CSS

<input type="button" value="submit" class="redHightlightButton" />

<a class="redHightlightButton" />link</a>

link

<a class="redHightlightButton" />link</a>

link

<a class="highlightedLink" />link</a>

link

<a class="highlightedLink disabled" />link</a>

link

Message Boxes

CSS

Message Title

<div class=”GoodMessageBox”><h3>Message Title</h3>Message text</div>

Message Title

<div class=”WarningMessageBox”><h3>Message Title</h3>Message text</div>

Message Title

<div class=”ErrorMessageBox”><h3>Message Title</h3>Message text</div>

Message Title

<div class=”NoteMessageBox”><h3>Message Title</h3>Message text</div>

Grid system

CSS

To implement, use the class names from below. Ex: <div class="grid6">. For the first column in a row (the left-most column), you must add the class first. Ex: <div class="grid6 first">

 

grid1
grid11
grid2
grid10
grid3
grid9
grid4
grid8
grid4
grid4
grid4
grid5
grid7
grid6
grid6
grid3
grid3
grid1
grid5
grid1
grid5
grid3
grid3
3
3
3
3
5
2
2
3
3
2
1
1
6
4

 

Examples:

<div class=”grid3 first gridTopBottomPadding”>

This is an example of columns with some padding: gridTopBottomPadding. Margin can also be used: gridTopBottomMargin

<div class=”grid9 gridTopBottomPadding”>

<div class=”grid3 first gridTopBottomPadding”>

This is an example of columns with the divider line gridLeftDividerLine:

<div class=”grid9 gridTopBottomPadding gridLeftDividerLine”>