Brand Colors


PFF Brand colors used through out the app

PFF Green

#2c8e00

$brand-primary

Fantasy Red

#a30b3a

$brand-secondary

#2

#089B4E

$brand-success

#3

#02a0a3

$brand-info

#4

#FFB640

$brand-warning

#5

#FF4351

$brand-danger

Black

#232428

$gray-base

Gray #2

#46474f

$gray-darker

Gray #3

#686b77

$gray-dark

Gray #3

#8d909c

$gray

Gray #4

#b5b7be

$gray-light

Gray #5

#dcdde1

$gray-lighter

Gray #6

#f5f5f6

$gray-lightest

White

#FFFFFF

$white


Typography


Typography and how to use it through out the app. The PFF Font is Gotham, various weights are included in the app. (We need to document how to use.)

Gotham Bold

H1 Big Headline

H2 Headline

H3 Headline

H4 Headline

H5 Headline
Gotham Thin, .15em letter-spacing

Headline with secondary text

Gotham Book

Body copy - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora hic quia et eaque eum sit beatae alias dolorum voluptatem impedit minima soluta in molestias, sapiente dignissimos odio nemo qui repudiandae.

Gotham Thin

Lead Body copy - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora hic quia et eaque eum sit beatae alias dolorum voluptatem impedit minima soluta in molestias, sapiente dignissimos odio nemo qui repudiandae.

Small Body copy - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora hic quia et eaque eum sit beatae alias dolorum voluptatem impedit minima soluta in molestias, sapiente dignissimos odio nemo qui repudiandae.


Actions


How to button. We want to limit the use of primary actions per page, so we can make the most important action clear.

<button class="btn btn-primary"></button>
<button class="btn btn-secondary"></button>
<button class="btn btn-secondary disabled"></button>
<button class="btn btn-primary-outline"></button>
<button class="btn btn-secondary-outline"></button>
<button class="btn btn-link">Button</button>
<button class="btn btn-primary btn-sm">Button</button>
<button class="btn btn-icon"><i class="m-icons">&#xE87A;</i></button>


Forms


The Dos and Don'ts of forms.

We'll never share your email with anyone else.
$
.00
<form>
  <div class="form-group">
  	<label class="form-control-label">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      <small class="text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
      <label class="form-control-label" for="exampleInputAmount">Amount (in dollars)</label>
      <div class="input-group">
          <div class="input-group-addon">$</div>
          <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
          <div class="input-group-addon">.00</div>
      </div>
  </div>
  <div class="checkbox">
      <label>
          <input type="checkbox"> Check me out
      </label>
  </div>
  <div class="form-group has-danger">
      <label class="form-control-label" for="UN">User Name</label>
      <input type="email" class="form-control form-control-danger" id="UN" placeholder="User Name">
  </div>
</form>
<div class="checkbox--fancy">
    <input class="boolean optional" type="checkbox" value="1" name="prefer_high_upside" id="draft_style_prefer_high_upside">
    <label class="boolean optional" for="draft_style_prefer_high_upside">
        Fancy Checkbox
    </label>
</div>

Data


Show me the numbers. Tables have different different modifiers.

Standard Table

Rank Player Position ADP
1 Mark RB 1.1
2 Jacob QB 1.7
3 Larry WR 2.1

Small Table

Rank Player Position ADP
1 Mark RB 1.1
2 Jacob QB 1.7
3 Larry WR 2.1

Quick List

<ul class="quick-list">
    <li>
        <em class="quick-list__rank">1.</em>
        <a href="#">Cam Newton</a>
        <span class="text-muted">QB / CAR</span>
        <a class="quick-list__action">
            <i class="m-icons">&#xE87A;</i>
        </a>
    </li>
</ul>

						

Icons


We are using Google's Material Icons, you can find a full list of available icons here. Please use the numeric character to support IE9 and below.

<i class="m-icons">&#xE87A;</i>
					

Layout


We are using one layout for most pages.

Main Page Layout
Layout
<div class="content-container">
    <div class="page-header">
        <div class="container">
            <div class="row flex-center">
                    <div class="col-md-8">
                        <h1>Headline</h1>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="btn btn-link">Action</a>
                    </div>
            </div>
        </div>
    </div>
    <div class="container">
    ...
    </div>
</div>

						

Helpers


Helpers / Utilities. We have a few different things available to help with spacing and positioning

Spacing

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, 1rem.

The classes are named using the format: .m-a-3 {property}-{sides}-{size}

Property
m = margin, p = padding

Sides
Sides (top, right, bottom, left, all, x and y). t = top, etc.

Size
Accepts integers 0-5. This integer will be multipied by 1.5 to produce the amount in rem.

Flexbox

Positioning things can be hard, flex box makes it easier. If you would like to align a column with in a .row you can use flexbox. The support for flexbox is limted to Internet Explorer 10+

Flex Center
.flex-center will vertically center elements with in the parent container. class="row flex-center" will center the children or columns with in the row!

.flex-center

Flex Start
The .flex-start class is similar to .flex-center. This class allows you to anchor elements to the top of their parent container.

.flex-start

Flex End
This class allows you to anchor element to the bottom of their parent container.

.flex-end