Fonts Families and dynamic sizes

Below are the list of default fonts that come with PCF.

body {font-family: 'Helvetica Neue', Helvetica, sans-serif;}

body {font-family: 'open sans', Helvetica Neue', Helvetica, sans-serif;}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Dynamic Font Sizing

Below is an example of the body font size. Most PCF font sizes use the viewport width to determine text size, with a minimum set em size. Viewport width is great, the font size will dynamicly change depending on the screen/device size. No need to write media queries to change fonts in different resolutions.

These size can be changed or overwritten to use pixels, or points if needed.

body {font-size: calc(.7em + .2vw);}

Media Queries Responsive sizing for PCF

@media all and (min-width: 1601px){}

@media all and (max-width: 1600px){}

@media all and (max-width: 1024px){}

@media all and (max-width: 767px){}

@media all and (max-width: 375px){}

Common Classes Some useful classes you can add to elements

Shims Margin and padding shorthand classes

Examples

Here are some representative examples of these classes:

.mt-0 {
	margin-top: 0 !important;
}

.ml-xs {
	margin-left: 4px !important;
}

.m-lg {
	margin: 32px !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

.pr-md {
	padding-right: 16px !important;
}

.p-xl {
	padding: 64px !important;
}

Flex Grid System A More powerful grid system!

Flex Grid System: 12 Column One of the most common grid setups

Below is an example of tweleve columns that will be equal across the area of the container. Remember all the col-(number) need to add up to tweleve since this is using the 12 column grid system.

<div class="flex-grid">
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
</div>										

Responsive 12 Columns

Change grid column sizes depending on screen width, as long as the numbers across each col add up to tweleve it will span perfectly across the space. Below you can see a line up of classes that will change between 4 cols at meduim screen size and a full row of 12 cols at small size. Please click here if you want to see the PCF responsive sizes.

<div class="flex-grid">
	<div class="col-6 col-4-md col-6-sm">.col-6 .col-4-md .col-6-sm</div>	
	<div class="col-3 col-4-md">.col-3 .col-4-md</div>
	<div class="col-3 col-4-md">.col-3 .col-4-md</div>	
</div>									

I have found I sometimes need to divide page items up by 10's and 12's don't seem to accommodate rows of 5 well. Below is an example of ten columns that will be equal across the area of the container just use the extra class .tenths. Remember all the col-(number) need to add up to ten since this is using the 10 column grid system.

<div class="flex-grid tenths">
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
	<div class="col-1">.col-1</div>
</div>									

Responsive 10 Columns

Change grid column sizes depending on screen width, as long as the numbers across each col add up to ten it will span perfectly across the space. Below you can see a line up of classes that will change between tenths, working just like the tweleve column grid. Please click here if you want to see the PCF default sizes.

<div class="flex-grid tenths">
	<div class="col-5 col-5-md col-10-sm">.col-5 .col-5-md .col-10-sm</div>
	<div class="col-2 col-4-md col-10-sm">.col-2 .col-4-md .col-10-sm</div>
	<div class="col-3 col-1-md col-10-sm">.col-3 .col-1-md .col-10-sm</div>
</div>										

All Grids are Nestable

Use grids within grids for more complicated layouts.

<div class="flex-grid ">
	<div class="col-6 col-4-md col-12-sm">
		.col-6 .col-4-md .col-12-sm
		<div class="flex-grid  grid-example">
			<div class="col-6 col-4-md col-12-sm">.col-6 .col-4-md .col-12-sm</div>
			<div class="col-3 col-4-md col-12-sm">.col-3 .col-4-md .col-12-sm</div>
			<div class="col-3 col-4-md col-12-sm">.col-3 .col-4-md .col-12-sm</div>
		</div>
	</div>
	<div class="col-3 col-4-md col-12-sm">.col-3 .col-4-md .col-12-sm</div>
	<div class="col-3 col-4-md col-12-sm">.col-3 .col-4-md .col-12-sm</div>
</div>										

Grid Ordering

Change grid column ordering by adding a style or class. This is usually good to use in media queries to change the order of sections. Simply use one of our pre-built classes for each column with sizing optionslike this: .order-2-md. This will set the column to be in the second spot in the medium resolution setting.

Resize your browser to see the orders change depending on resolution.

<div class="flex-grid">
	<div class="col-4 order-2 order-3-md order-1-sm">
		First DIV on page
		<div class="line"></div> 
		.col-4 .order-2 .order-3-md .order-1-sm
	</div>
	<div class="col-4 order-1 order-1-md order-2-sm">
		Second DIV on page
		<div class="line"></div> 
		.col-4 .order-1 .order-1-md .order-2-sm
	</div>
	<div class="col-4 order-3 order-2-md order-3-sm">
		Third DIV on page
		<div class="line"></div> 
		.col-4 .order-3 .order-2-md .order-3-sm
	</div>
</div>										

Column Offsets

You can offset columns from the left by adding .col-offset and the number of cols you wouldlike to offset, see below.

<div class="flex-grid ">
	<div class="col-4">.col-4</div>
	<div class="col-4 col-offset-4">.col-4 .col-offset-4</div>
</div>
<div class="flex-grid  grid-example">
	<div class="col-3 col-offset-3">.col-3 .col-offset-3</div>
	<div class="col-3 col-offset-3">.col-3 .col-offset-3</div>
</div>
<div class="flex-grid  grid-example">
	<div class="col-6 col-offset-3">col-6 col-offset-3</div>
</div>										

Responsive Offsets and Offset Clearing

Offsets can be used responsively as well, like for example change the offset when showing in a small viewport: class="col-3 col-offset-3-sm"

Sometimes you may want to clear an offset completely rather than change it responsively, to do this use this class and add the viewport size you would like it eliminated in. The class below clears the offest in small viewports: .col-offset-clear-sm

Headers

Below are just the PCF standard header tag defaults. PCF sets all header to a normal font weight, if you wouldlike bolder headers just add the bold class <h1 class="bold"></h1>

<div class="dbl-lined-header">
	<h1>H1 Header being used</h1>
	<small>When and H1 header tag is being used the span tag that contains the second line will be matched.</small>
</div>										

Indents

Add any of the indent classes below to any block or inline-block element.

Tables

Basic Table

Put this class in the table tag <table class="tbl">

<table class="tbl"> 
	<thead> 
		<tr> 
			<th>ID</th> 
			<th>First Name</th> 
			<th>Last Name</th> 
			<th>Level</th> 
			<th>Active</th> 
		</tr> 
	</thead> 
	<tbody> 
	<tr> 
		<th>1</th> 
		<td>John</td> 
		<td>Doe</td> 
		<td>Noob</td> 
		<td>✔ Active</td> 
	</tr>
	<tr> 
		<th>2</th> 
		<td>David</td> 
		<td>Ryan</td> 
		<td>Veteran</td> 
		<td>✔ Active</td> 
	</tr>
	<tr> 
		<th>3</th> 
		<td>Eric</td> 
		<td>Stevenson</td> 
		<td>Novice</td> 
		<td>✘ Not Active</td> 
	</tr> 
	</tbody> 
</table>										

Bordered Table

Put this class in the table tag <table class="tbl bordered">, You can also add a background color to the table headings by adding the class "th-bg" like the table below. This will give background colors to any <th> tag within the table. The class code looks like this: <table class="tbl bordered th-bg">

Stripe Table Rows

Making striped tables is easy, just decide if you would like stripes to be on even rows or odd rows. Even row stripes <table class="tbl striped-even"> or odd colored rows <table class="tbl striped-odd">

Hover Row Table

Put this class in the table tag <table class="tbl row-hover">

Responsive Table

Simply put a div with this class in it around your table <div class="tbl-responsive">. The table will gain a horizontal scroll bar when not wide enough,on mobiledevices it will be swipable.

<div class="tbl-responsive">
	<table class="tbl"> 
		<thead> 
		<tr> 
			<th>ID</th> 
			<th>First Name</th> 
			<th>Last Name</th> 
			<th>Level</th> 
			<th>Active</th>
			<th>More Stuff</th>
			<th>More Stuff</th>
			<th>More Stuff</th>
			<th>More Stuff</th>
			<th>More Stuff</th>
			<th>More Stuff</th> 
		</tr> 
		</thead> 
		<tbody> 
		<tr> 
			<th>1</th> 
			<td>John</td> 
			<td>Doe</td> 
			<td>Noob</td> 
			<td>✔ Active</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
		</tr>
		<tr> 
			<th>2</th> 
			<td>David</td> 
			<td>Ryan</td> 
			<td>Veteran</td> 
			<td>✔ Active</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td> 
		</tr>
		<tr> 
			<th>3</th> 
			<td>Eric</td> 
			<td>Stevenson</td> 
			<td>Novice</td> 
			<td>✘ Not Active</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td>
			<td>More Stuff</td> 
		</tr> 
		</tbody> 
	</table>
</div>										

Forms

Add class="form-elements" to wrapping containers, this will position and style elements correctly. By default all form basic elements are set to 100% width which you can change depending on a container they are in. You can add rounded edges to your form inputs by adding <input type="text" class="rounded-corners"> or <input type="text" class="rounded-more-corners">, by default all form elements are squared.

Basic Form Most common form design

<form>
	<div class="form-elements">
		<label for="email">Email address</label>
		<input type="email" id="email" placeholder="Email">
	</div>
	<div class="form-elements">
		<label for="password">Password</label>
		<input type="password" id="password" placeholder="Password">
	</div>
	<div class="form-elements">
		<label for="select_drop">Select</label>
		<div class="select-element">
			<select id="select_drop">
				<option>Select</option>
				<option>Select</option>
				<option>Select</option>
				<option>Select</option>
				<option>Select</option>
			</select>
			<div class="select-arrow"></div>
		</div>
	</div>
	<div class="form-elements">
		<label for="file">File input</label>
		<input type="file" id="exampleInputFile">
	</div>
	<div class="form-elements">
		<label class="form-check-radio">
		  <input type="checkbox"> Add a check box
		</label>
	</div>
	<div class="form-elements">
		<label class="form-check-radio toggle-check">
			<input type="checkbox">
			<span class="toggle-check-box"></span> 
			<span class="toggle-check-text">Add a fancy toggle check box</span>
		</label>
	</div>
	<input type="submit" class="btn primary" value="Submit">
	<input type="reset" class="btn" value="Reset">

</form>										

Form Horizontal Design Using Flex Grid

If you want to put labels in front of the inputs to they are horizontal you can use the grid along with the form clasess from the basic for to creat this look. Just add this class <form class="form-horizontal"> to the form tag surrounding the form or any tag containing the form. Update the col classes aon the grid to change how much space you would like each element to use on the page and change them as you feel fit responsively. See the example below for more information.

<form class="form-horizontal">
	<div class="flex-grid  form-elements">
		<div class="col-2 col-12-sm">
			<label for="email2">Email address:</label>
		</div>
		<div class="col-10 col-12-sm">
			<input type="email" id="email2" placeholder="Email">
		</div>
		<div class="col-2 col-12-sm">
			<label for="password2">Password:</label>
		</div>
		<div class="col-10 col-12-sm">
			<input type="password" id="password2" placeholder="Password">
		</div>
		<div class="col-2 col-12-sm">
			<label for="comments">Comments:</label>
		</div>
		<div class="col-10 col-12-sm">
			<textarea id="comments" placeholder="Comments"></textarea>
		</div>
		<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">
			<label class="form-check-radio">
			  <input type="checkbox"> Add a check box
			</label>
		</div>
		<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">
			<div class="form-elements">
				<label class="form-check-radio toggle-check">
					<input type="checkbox">
					<span class="toggle-check-box"></span> 
					<span class="toggle-check-text">Add a fancy toggle check box</span>
				</label>
			</div>
		</div>
		<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">											
			<input type="submit" class="btn primary" value="Submit">
			<input type="reset" class="btn" value="Reset">
		</div>
	</div>	
</form>										

Condensed Horizontal Form

If you like the horizontal form but want it condensed for a different look or just to save space you can use the condensed form below. Just apply the horizontal class along with the condensed class like this to the form tag or any container tag wrapped around the form <form class="form-horizontal form-condensed">. In mobile sizes the input labels will hide to keep true to the condensed feel.

<form class="form-horizontal form-condensed">
	<div class="flex-grid  form-elements">
		<div class="col-2 col-12-sm sm-hide">
			<label for="email3">Email address:</label>
		</div>
		<div class="col-10 col-12-sm">
			<input type="email" id="email3" placeholder="Email">
		</div>
		<div class="col-2 col-12-sm sm-hide">
			<label for="password3">Password:</label>
		</div>
		<div class="col-10 col-12-sm">
			<input type="password" id="password3" placeholder="Password">
		</div>
		<div class="col-2 col-12-sm sm-hide">
			<label for="pick4">Select:</label>
		</div>
		<div class="col-10 col-12-sm select-element">	
			<select id="pick4">
				<option>Select</option>
				<option>Select</option>
				<option>Select</option>
				<option>Select</option>
				<option>Select</option>
			</select>
			<div class="select-arrow"></div>
		</div>
		<div class="col-2 col-12-sm sm-hide">
			<label for="comments">Comments:</label>
		</div>
		<div class="col-10 col-12-sm">
			<textarea id="comments" placeholder="Comments"></textarea>
		</div>
		<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">
			<label class="form-check-radio">
			  <input type="checkbox"> Add a check box
			</label>
		</div>
		<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">
			<div class="form-elements">
				<label class="form-check-radio toggle-check">
					<input type="checkbox">
					<span class="toggle-check-box"></span> 
					<span class="toggle-check-text">Add a fancy toggle check box</span>
				</label>
			</div>
		</div>
		<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">											
			<input type="submit" class="btn primary" value="Submit">
			<input type="reset" class="btn" value="Reset">
		</div>
	</div>
</form>										

Inline Form

To create an inline form, a form in one row, Just apply the inline class like this to the form tag or any container tag wrapped around the form <form class="form-inline">. In mobile sizes form will stack. To make sure the button height matches the form add one extra class .form-inline-btn.

<form class="form-inline form-elements">
	<input type="email" placeholder="Email">
	<input type="password" placeholder="Password">
	<label class="form-check-radio">
		<input type="checkbox"> Add a check box
	</label>
	<input type="submit" class="btn primary form-inline-btn" value="Submit">
</form>										

Read Only

Example of a read only input, just add readonly and class .form-read-only to the input and make sure you use the class .form-elements on the wrapping element.

Disabled

Example of a disabled input, just add .disabled to the element.

<form class="form-elements">
	<div class="form-elements">
		<input type="text" class="disabled" placeholder="Disabled" disabled>
	</div>
</form>										

Example handling a full form being disabled you will need to use the fieldset tag around the form <fieldset disabled>.

<form class="form-horizontal form-condensed">
	<fieldset disabled>
		<div class="flex-grid  form-elements">
			<div class="col-2 col-12-sm sm-hide">
				<label for="name4">Name:</label>
			</div>
			<div class="col-10 col-12-sm">
				<input type="text" id="name4" placeholder="Name">
			</div>
			<div class="col-2 col-12-sm sm-hide">
				<label for="pick6">Select:</label>
			</div>
			<div class="col-10 col-12-sm select-element">	
				<select id="pick6">
					<option>Select</option>
					<option>Select</option>
					<option>Select</option>
					<option>Select</option>
					<option>Select</option>
				</select>
				<div class="select-arrow"></div>
			</div>
			<div class="col-2 col-12-sm sm-hide">
				<label for="email4">Email address:</label>
			</div>
			<div class="col-10 col-12-sm">
				<input type="email" id="email4" placeholder="Email">
			</div>

			<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">
				<label class="form-check-radio">
					<input type="checkbox"> Add a check box
				</label>
			</div>
			<div class="col-10 col-offset-2  col-12-sm col-offset-clear-sm">											
				<input type="submit" class="btn primary" value="Submit">
				<input type="reset" class="btn" value="Reset">
			</div>
		</div>	
	</fieldset>
</form>										

Form Input Sizing

Put the size class in with the form-elements class to change input and label sizes class="form-elements elements-lg".

Extra Large: class="form-elements elements-xl"

Large: class="form-elements elements-lg"

Small: class="form-elements elements-sm"

Extra Small: class="form-elements elements-xs"

Form Line Design

Add class form-line-design to any wraping element to make the form look like the one below. I have put the class in the form tag in the example <form class="form-line-design">.

Buttons

Button classes can be applied to any HTML tags. Add extra classes for sizes,colors and styles,learn more below.

Default Button

Example code for default size and colored button: <a href="#" class="btn"></a>

Ghost Button

Example code for a ghost button onlight background: <a href="#" class="btn-ghost"></a>

Ghost Button Inverted

Example code for a ghost button on dark backgrounds: <a href="#" class="btn-ghost inverted"></a>

Ghost Button Dynamic Color

Example code for a ghost button that will switch to work on light or dark backgrounds depending on a parent .dark class backgrounds: <a href="#" class="btn-ghost dynamic"></a>

Button Colors

Example code for button with the primary color: <a href="#" class="btn primary"></a>

I always seem need a black, white or transparent button options as well.

Button Sizes

Example code for extra small button: <a href="#" class="btn primary btn-xs"></a>

Button Active State

If you wouldlike a button to look like it is set to active: <a href="#" class="btn primary active"></a>

Button Full Width

Example code for full width button (100% width): <a href="#" class="btn primary full-width"></a>

Button with Arrows

Example code for arrows: <a href="#" class="btn"><i class="arrow-down"></i></a>

Glowing Buttons

Below are examples of buttons that glow. You must use one of the standard button color classes. <a href="#" class="btn primary glow"></a>

Contextual Colors

All colors are based on these colors which you can modify from the themes.css file. Below are the default colors for the framework, all default colors use RGBA this way it is easy to change alpha transparency.

Background Colors | Solid colors are given set font color

Background Colors at 25% Strength | Font colors not set for these backgrounds

Use Light Versions for Table Rows or Cells

Example code: <tr class="success-light"> or <td class="success-light"> or <th class="success-light">

Text Colors

Example code: <span class="text-primary">text</span>

Colored Borders

Call Outs / Call Out Colors

<div class="call-out">
	<h4 class="bold">Call Out Title</h4>
	Just use a div tag with class <code>.call-out</code> along with an h4 header tag inside.
</div>										

Breadcrumbs

Examples of breadcrumb menus, not really much to this compenent. The "/" are in span tags and make the section seperators easy to change up with any other character.

<div class="breadcrumbs">
	<a href="#">Home</a>
	<span>/</span>
	<a href="#">Products</a>
	<span>/</span>
	Hockey Sticks
</div>

Icons

PCF uses a few css built in designed icons which are super light weight but can't be sized or colored as easily as font type icons. CSS icons in PCF are found in the responsive header (hamburger and profile icons) along with drop button arrow icons and standard alerts. All PCF icons can easily be switched out with any of the third party icons below.

IcoMoon

Font Awesome

As of now you have to download the whole library which has more icons than anyone can need for one site which is a big load. There is some good news, many sites do use font awesome so there is a good chance users have all ready downloaded the fonts.