Style Guide

Color Palette

Primary Colors

 

CSPF BLACK
RGB: 0r 0g 0b
HEX: #000000

both colors are found in all branding materials

 

CSPF GOLD
RGB: 252r 181g 62b
HEX: #FCB53E



(secondary colors)

 

CSPF GREEN
RGB: 133r 196g 70b
HEX: #85C446

 

CSPF BLUE
RGB: 91r 183g 231b
HEX: #5BB7E7



(secondary colors)

 

CSPF RED
RGB: 211r 34g 421b
HEX: #D3222A

 

CSPF BROWN
RGB: 133r 99g 67b
HEX: #856343



Grid Specifications

Specs. @ Full Width
Max-Width:1000px
Number of Columns:12
Max-Column Width:65px
Max-Gutter:20px

These specifications are mainly for Desktop view of our site. The @media queries will take care of the layout and widths for tablet and mobile views of this site.

CSS Grid Breakdown @ Full Width
.grid_1{ width: 6.5%;}/* 65px */
.grid_2{ width: 15%;}/* 150px */
.grid_3{ width: 23.5%;}/* 235px */
.grid_4{ width: 32%;}/* 320px */
.grid_5{ width: 40.5%;}/* 405px */
.grid_6{ width: 49%;}/* 490px */
.grid_7{ width: 57.5%;}/* 575px */
.grid_8{ width: 66%;}/* 660px */
.grid_9{ width: 74.5%;}/* 745px */
.grid_10{ width: 83%;}/* 830px */
.grid_11{ width: 91.5%;}/* 915px */
.grid_12{ width: 100%;}/* 1000px */


Grid System

Click on the grid blocks to get snippets of code

grid_12(refers to the class name)
grid_1
grid_11
grid_2
grid_10
grid_3
grid_9
grid_3
grid_3
grid_3
grid_3
grid_4
grid_4
grid_4
grid_4
grid_8
grid_5
grid_7
grid_6
grid_6



Headers & Buttons

Main Header

Above is a main header. These appear on all pages, as the main title for that page.

<h1>enter header text here</h1>

Section Header

Above is a section header. These pages where we are defining a specific section.

<h2>enter header text here</h2>

Sub Section Header

Above is a sub section header. This header is used where we are defining a specific sub section.

<h3>enter header text here</h3>

Main Button

Above is an example of our Main Button.
This button will change depending what the background color is of the container div.

Simply add the class greenButton to any link you want to make a button.
<a href="**LINK GOES HERE**" class="greenButton">enter call to action here</a>

Main Button

Above is an example of our Secondary Button.
Designed to be used for secondary call to actions.

Simply add the class simpleButton to any link you want to make a button.
<a href="**LINK GOES HERE**" class="simpleButton">enter call to action here</a>



Iconography

These icons are courtsey of iconmoo.io. These icons are apart of the IcoMoo - Free Icon Pack by Keyamoon. Any of these icons can be used interchangable within our website. The most important thing is consistency. If we use a certian icon to represent an email, we should use that same email icon throughout the site.

Icon Implementation

How to implement

aria-hidden="true" data-icon=" *icon code* "

Inject this code in any block or inline element
for example:



Renders as:  

Plus these icons are scalable just like normal text

1em

2em

3em

4em

California State Parks Foundation

Please update your browser.

Our website does not support your browser because it is out of date.
Please update to a newer version of Internet Explorer (IE 8 or higher) here.
Check your version here. If you have a Internet Explorer 9 or newer and you are still receiving this message.
You may be have COMPATIBILITY VIEW enabled, read about that here to fix.
Or, for the best web experience, we recommend using Chrome, Firefox or Safari.