TYPOGRAPHY

H1 HEADLINE

H2 HEADLINE

H3 headline

H4 headline

Paragraph

TEXT COLORS

Default

Primary (teal)

Secondary (CSC blue)

Secondary alternate (lighter blue)

Tertiary (gray)

Dark gray

Gold

Amaranth (pink)

White

Black

Hyperlink blue

BACKGROUND COLORS

Primary (teal)

Secondary (CSC blue)

Secondary alternate (lighter blue)

Tertiary (gray)

Gray

Amaranth (pink)

Light gray

Gold

Green

White

Black

Force transparent background

BUTTONS

Primary - Teal 

Secondary - CSC blue 

Secondary Alt - Lighter blue 

Tertiary - Gray 

ICONS

We use font based icons. To make one show up, you need to apply the correct classes: class="csc-icon c-i-[icon-name]

The above code shows this

Our icon classes for this specific site can be found here.

GRID

We use Materialize to handle our grid. The grid refers to the rows and columns in which we put content. It consists of "rows" and "columns", sort of like a table, but these rows and columns are responsive and flow and wrap with different screen sizes.

You can see the grid working on one of our site pages here. You can also see Materialize's grid page for more options and details.

To Utilize The Grid

1. Create a row:

   <div class="row"></div>

   

2. Create columns within the row:

   <div class="row">
  <div class="m6 l5"></div>

  <div class="m6 l5"></div>

</div>

   

3. Add your content:

   <div class="row">

  <div class="m6 l5">

    <p>This is a column</p>

    <a href="#" class="waves-effect waves-light btn btn-primary btn-arrow btn-arrow-right">a button</a>

  </div>

  <div class="m6 l5">

    <p>This is a column next to it</p>

    <a href="#" class="waves-effect waves-light btn btn-primary btn-arrow btn-arrow-right">another button</a>

  </div>

</div>


   

   This is a column

   a button

   This is a column next to it

   another button
   
   

HELPER CLASSES

The best place to view available helper classes is on Materialize's website. There are also some padding and margin helper classes within our CSC Common stylesheet.

Here are a couple that are frequently used:

• Quick floats

  <div class="left">...</div>
<div class="right">...</div>

  

• Hiding content

  <div class="hide">...</div>
  

• Text alignment

  <div class="left-align">...</div>
<div class="right-align">...</div>
<div class="center-align">...</div>
OR
<div class="center">...</div>

  

• Center content blocks

  <div class="center-block">...</div>
  

• Quick padding

  pt = padding-top
  pr = padding-right
  pb = padding-bottom
  pl = padding-left

  <div class="pt0 pr0 pb0 pl0">...</div>
<div class="pt5 pr5 pb5 pl5">...</div>
<div class="pt10 pr10 pb10 pl10">...</div>
<div class="pt20 pr20 pb20 pl20">...</div>
<div class="pt30 pr30 pb30 pl30">...</div>

  

• Quick margin

  mt = margin-top
  mr = margin-right
  mb = margin-bottom
  ml = margin-left

  <div class="mt0 mr0 mb0 ml0">...</div>
<div class="mt5 mr5 mb5 ml5">...</div>
<div class="mt10 mr10 mb10 ml10">...</div>
<div class="mt20 mr20 mb20 ml20">...</div>
<div class="mt30 mr30 mb30 ml30">...</div>