DOCUMENTATION

Everything you need to create a website with Taffy

GETTING STARTED

If you are working on a new project you can use this HTML5 Boilerplate to get started faster.

To add Taffy to your project simply download it, add it to your project folder, and then link it in the head of your document.

    
<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>PROJECT TITLE HERE</title>

        <!--LINK TAFFY STYLESHEET-->
        <link rel="stylesheet" href="css/taffy.min.css">
    </head>

    <body>
      <!--CONTENT GOES HERE-->
    </body>

</html>

CONTAINER

The .container class is a simple container built to center your content horizontally.

This is how the container will behave:

  • On mobile and tablet, it will have a margin of 20px on both the left and right sides.
  • On desktop (>= 1000px), it will have a maximum width of 960px and will be horizontally centered.
  • On widscreen (>= 1192px), it will have a maximum width of 1152px.
  • On fullhd (>= 1384px), it will have a maximum width of 1344px.

The values 960, 1152, and 1344 have been chosen because they are divisble by both 12 and 16.

GRID

The .grid class is a simple way to build responsive columns.

To build a grid start by:

  • 1. Add a .grid container.
  • 2. Once you add the .grid container all immediate children of that container will become columns. It's that easy!

Each column will have an equal width, no matter how many columns you have.

The .grid element is set so when the device viewport is 768px or smaller the column elements will stack and each become full-width(100%).

NOTE: You may also use .grid__colas a class name for the columns if you feel it is needed. The column will act the same whether the .grid__colclass is added or not.

    
<div class="grid">
  <div>
    <div class="example-stuff">
      Column 1
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 2
    </div>
  </div>
</div>
<div class="grid">
  <div>
    <div class="example-stuff">
      Column 1
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 2
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 3
    </div>
  </div>
</div>
Column 1
Column 2
Column 1
Column 2
Column 3

GRID CHILDREN SIZING

If you don't want each column to have an equal width you can use grid sizes to change them.

Classes for different sizes:

  • .is-25p (fills 25% of the grid space)
  • .is-50p (fills 50% of the grid space)
  • .is-75p (fills 75% of the grid space)
  • .is-33p (fills 33% of the grid space)
  • .is-66p (fills 66% of the grid space)
  • .is-100p (fills 100% of the grid space)

The other columns will fill up the remaining space automatically.

    
<div class="grid">
  <div class="grid__col is-25p">
    <div class="example-stuff">
      Column 25%
    </div>
  </div>
  <div class="grid__col">
    <div class="example-stuff">
      Auto
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-50p">
    <div class="example-stuff">
      Column 50%
    </div>
  </div>
  <div class="grid__col">
    <div class="example-stuff">
      Auto
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-75p">
    <div class="example-stuff">
      Column 75%
    </div>
  </div>
  <div class="grid__col">
    <div class="example-stuff">
      Auto
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-33p">
    <div class="example-stuff">
      Column 33.33%
    </div>
  </div>
  <div class="grid__col">
    <div class="example-stuff">
      Auto
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-66p">
    <div class="example-stuff">
      Column 66.66%
    </div>
  </div>
  <div class="grid__col">
    <div class="example-stuff">
      Auto
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-100p">
    <div class="example-stuff">
      Column 100%
    </div>
  </div>
</div>
Column 25%
Auto
Column 50%
Auto
Column 75%
Auto
Column 33.33%
Auto
Column 66.66%
Auto
Column 100%

12 COLUMNS

The Taffy grid can be broken down into 12 columns for percise sizing.

Classes for different sizes:

  • .is-1 (is 1 column of 12 column grid)
  • .is-2 (is 2 columns of 12 column grid)
  • .is-3 (is 3 columns of 12 column grid)
  • .is-4 (is 4 columns of 12 column grid)
  • .is-5 (is 5 columns of 12 column grid)
  • .is-6 (is 6 columns of 12 column grid)
  • .is-7 (is 7 columns of 12 column grid)
  • .is-8 (is 8 columns of 12 column grid)
  • .is-9 (is 9 columns of 12 column grid)
  • .is-10 (is 10 columns of 12 column grid)
  • .is-11 (is 11 columns of 12 column grid)
  • .is-12 (is 12 columns of 12 column grid)

To use the 12 column grid you need to add the class to the column element.

    
<div class="grid">
  <div class="grid__col is-1">
    <div class="example-stuff">
      is-1
    </div>
  </div>
  <div class="grid__col is-11">
    <div class="example-stuff">
      is-11
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-2">
    <div class="example-stuff">
      is-2
    </div>
  </div>
  <div class="grid__col is-10">
    <div class="example-stuff">
      is-10
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-3">
    <div class="example-stuff">
      is-3
    </div>
  </div>
  <div class="grid__col is-9">
    <div class="example-stuff">
      is-9
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-4">
    <div class="example-stuff">
      is-4
    </div>
  </div>
  <div class="grid__col is-8">
    <div class="example-stuff">
      is-8
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-5">
    <div class="example-stuff">
      is-5
    </div>
  </div>
  <div class="grid__col is-7">
    <div class="example-stuff">
      is-7
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-6">
    <div class="example-stuff">
      is-6
    </div>
  </div>
  <div class="grid__col is-6">
    <div class="example-stuff">
      is-6
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-12">
    <div class="example-stuff">
      is-12
    </div>
  </div>
</div>
is-1
is-11
is-2
is-10
is-3
is-9
is-4
is-8
is-5
is-7
is-6
is-6
is-12

RESPONSIVE CHILDREN SIZING

The Taffy grid can be used to allow for specific column sizing for different screen sizes.

Currently when sizing a column you would use something like, .is-5 or .is-25p. These sizing methods would make the column stay that size all the way down to mobile(< 768px), where it would then change to full-width columns.

However if you would want to make a column different sizes depending on what device it is being displayed on like: .is-5 for desktops, .is-7 for tablets, and .is-9 for mobile, you can now do that using the following classes.

To make columns a specific size for different viewports add:

  • --small (screen size 0px to 768px)
  • --medium (screen size 768px to 1000px)
  • --large (screen size 1000px up)

By adding the --small, --medium, or --large modifier to the end of any .is-x or .is-xp class you can specify the exact size of a column depending on the size of the viewport.

    
<div class="grid">
  <div class="grid__col is-5--large is-3--medium is-11--small">
    <div class="example-stuff">
      5 large, 3 medium, 11 small
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-50p--small is-66p--medium is-75p--large">
    <div class="example-stuff">
      75% large, 66% medium, 50% small
    </div>
  </div>
  <div class="grid__col">
    <div class="example-stuff">
      Auto
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col">
    <div class="example-stuff">
      I am always full-width
    </div>
  </div>
</div>

NOTE: Resize your browser window to view the columns changing sizes at different breakpoints

5 large, 3 medium, 11 small
75% large, 66% medium, 50% small
Auto
I am always full-width

GRID COLUMN COUNT

You may specify how many columns should be per row by adding the .grid-x class to the .grid container.

Classes for different sizes:

  • .grid-1 (1 column per row)
  • .grid-2 (2 columns per row)
  • .grid-3 (3 columns per row)
  • .grid-4 (4 columns per row)
  • .grid-5 (5 columns per row)
  • .grid-6 (6 columns per row)
  • .grid-7 (7 columns per row)
  • .grid-8 (8 columns per row)
  • .grid-9 (9 columns per row)
  • .grid-10 (10 columns per row)
  • .grid-11 (11 columns per row)
  • .grid-12 (12 columns per row)

Once a row reaches the specified number of columns, the columns will then stack underneath the previous row, keeping the same size specified.

    
<div class="grid grid-3">
  <div>
    <div class="example-stuff">
      Column 1
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 2
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 3
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 4
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 5
    </div>
  </div>
</div>
Column 1
Column 2
Column 3
Column 4
Column 5

COLUMN COUNT - GROW

You may use the class .grid-grow on the same element that has the class .grid and .grid-x to make the remaining columns grow to take up the remaining space.

Column 1
Column 2
Column 3
Column 4
Column 5

COLUMN COUNT - CENTER

You may also use the class .grid-center on the same element that has the class .grid and .grid-x to make the remaining columns center in the remaining space.

Column 1
Column 2
Column 3
Column 4
Column 5

COLUMN COUNT - RESPONSIVE

When using Grid Column Count you can specify what amount of columns should be per row depending on the screen size.

To specify the column count for different viewports add one of the following to the end up a .grid-x class:

  • --small (screen size 0px to 768px)
  • --medium (screen size 768px to 1000px)
  • --large (screen size 1000px up)
    
<div class="grid grid-3--small grid-2--medium grid-4--small">
  <div>
    <div class="example-stuff">
      Column 1
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 2
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 3
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 4
    </div>
  </div>
</div>

NOTE: Resize your browser window to view the columns changing sizes at different breakpoints

Column 1
Column 2
Column 3
Column 4

GRID OFFSET

The Taffy grid can be used to add offset columns.

To make a column offset you must add the class .is-x-offset.

For example: .is-4--offset or .is-25p--offset.

The offset class must be added to a column element.

WARNING: When using offsets, if the column is not auto, make sure to specify the column size for small screens or it will auto change to full-width and break your setup!

    
<div class="grid">
  <div class="grid__col is-50p is-25p--offset is-50p--small">
    <div class="example-stuff">
      is-50p, is-25p--offset
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-4 is-6--offset is-4--small">
    <div class="example-stuff">
      is-4, is-6--offset
    </div>
  </div>
</div>

<div class="grid">
  <div class="grid__col is-2--offset">
    <div class="example-stuff">
      Auto, is-2--offset
    </div>
  </div>
</div>
is-50p, is-25p--offset
is-4, is-6--offset
Auto, is-2--offset

GRID GAPLESS

Add the .grid-gapless class to an element with the .grid class to remove padding around the columns.

    
<div class="grid grid-3 grid-gapless">
  <div>
    <div class="example-stuff">
      Column 1
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 2
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 3
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 4
    </div>
  </div>
  <div>
    <div class="example-stuff">
      Column 5
    </div>
  </div>
</div>
Column 1
Column 2
Column 3
Column 4
Column 5

TYPOGRAPHY

Taffy comes with built in fluid typography, to allow for perfectly responsive type.

The font size is set on the html element:

  • When the device screen is above 1000px wide the root font size will be 22px
  • When the device screen is below 320px wide the root font size will be 16px
  • When the device screen is between 320px and 1000px wide the root font will scale proportionally from 22px to 16px

Heading and Paragraph Tags are set to be proportionally scaled with each other using the Major Third scaler (1.250). Where each heading is 0.8em larger or smaller than the pervious one.

  • h1 is set to be 2.441em
  • h2 is set to be 1.953em
  • h3 is set to be 1.563em
  • h4 is set to be 1.25em
  • p is set to be 1em
  • small or .font_small is set to be .8em

If you would like to use a larger or smaller font size, not used within the framework, you can keep it within the scale by taking the previous font size and either multiplying by .8 for a smaller number on the scale, or dividing by .8 for a larger number on the scale.

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph

Small

BUTTONS

Our buttons are set up to allow for easy styling.

To use our buttons you must place one of the following classes on either an a, button, input[type="submit"], or input[type="button"] element:

  • .btn (Makes a rounded edge, filled in button)
  • .btn--ghost (Makes a rounded edge, transparent body button with a solid border)
  • .btn--sharp (Makes a squared edge, filled in button)
  • .btn--ghost--sharp (Makes a squared edge, transparent body button with a solid border)

From there you should be able to style and customize the button to fit the style of your website.

    
<a class="btn">Link</a>

<input class="btn--ghost" type="submit" value="Submit">

<input class="btn--sharp" type="button" value="Input">

<button class="btn--ghost--sharp">Button</button>
Link
Link
Link
Link

FORMS

Our forms are set up to allow for easy styling.

Default forms will have full-width, block level label, input, select, and textarea elements.

    
<form>
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="ex. John Doe">
  <label for="email">Email</label>
  <input type="email" id="email" placeholder="ex. JohnDoe@gmail.com">
  <label for="options">Select</label>
  <select>
    <option disabled selected>Select Option</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="message">Message</label>
  <textarea id="message"></textarea>

  <input class="btn" type="submit" value="Submit">>
</form>

TABLES

Our tables are set up to allow for easy styling.

Default table will be full width, with a bottom border and bold headings.

Taffy has some built in modifers you can add to your tables:

  • .table-striped (adds a zebra striping to every other table row)
  • .table-bordered (adds a border around the whole table, enclosing it)
  • .table-highlight (adds a hover effect to each table row when hovered over)
  • .table-selected (add to a tr to make the table row selected and stand out)
    
<table class="table-striped table-bordered table-highlight">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>John</td>
      <td>Stamos</td>
      <td>53</td>
    </tr>
    <tr class="table-selected">
      <td>Bob</td>
      <td>Saget</td>
      <td>61</td>
    </tr>
    <tr>
      <td>Candace</td>
      <td>Cameron-Bure</td>
      <td>41</td>
    </tr>
    <tr>
      <td>Jodie</td>
      <td>Sweetin</td>
      <td>35</td>
    </tr>
    <tr>
      <td>Dave</td>
      <td>Coulier</td>
      <td>57</td>
    </tr>
    <tr>
      <td>Lori</td>
      <td>Loughlin</td>
      <td>52</td>
    </tr>
  </tbody>
</table>
First Name Last Name Age
First Name Last Name Age
John Stamos 53
Bob Saget 61
Candace Cameron-Bure 41
Jodie Sweetin 35
Dave Coulier 57
Lori Loughlin 52

MEDIA

You can use Taffy to make your images and videos responsive.

The media element you are making responsive must be either:

  • img
  • video
  • iframe

To make an img or video responsive simply add the .media class to either the img tag or the video tag

To make an embeded iframe video responsive you must add a div around the iframe element and give that div the class .media--embed.

    
<img class="media" src="http://via.placeholder.com/750x300" alt="example">

<video class="media" controls>
  <source src="vid/placeholder-vid.mp4" type="video/mp4">
</video>

<div class="media--embed">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/XQu8TTBmGhA" frameborder="0" allowfullscreen></iframe>
</div>
example

HELPERS

Our helper classes are used to allow for easy formating of text and content.

Our helpers include:

Text Helpers
.text-center Align content center
.text-left Align content left
.text-right Align content right
.text-justify Align content justify
.text-lowercase Make text lowercase
.text-uppercase Make text uppercase
.text-capitalize Capitalize text
.text-normal Make text font weight normal
.text-bold Make text font weight bold
.text-italic Make text styled italic
Positioning Helpers
.vertically-center Centers content horizontally and vertically
.float-left Float content left
.float-right Float content right
.no-margin Remove any margins
.no-padding Remove any padding
.block Display content block
.inline-block Display content inline block
.inline Display content inline
.show Show content
.hide Hide content
Other Helpers
.screen-reader Makes text hidden, but readable to screen reader users
.content-buffer Adds a top and bottom padding of 40px (20px on mobile)

SASS VARIABLES

Taffy is built on Sass to allow you to easily customize it to match your design.

Currently what variables you can change in Taffy are the following:

  • variables for different sizing
  • variables for fluid typography
  • variables for colors
  • variables for grid gutters

When you download Taffy make sure to use the scss files and link them to your project if you want to use variables!