Documentation

Included Files

  • template.html
  • frametastic.css
  • frametastic.min.css
  • frametastic.js
  • frametastic.min.js

Template File

Once you download the Frametastic zip file, open the template.html file and get started!

<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Frametastic</title>

<!-- Link to Frametastic CSS -->
<link rel="stylesheet" href="css/frametastic.min.css" type="text/css">

<!-- Link to jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>

<body>

<!-- Place your code here -->

<!--Link to Frametastic JavaScript-->
<script src="scripts/frametastic.min.js" type="text/javascript"></script>

</body>

Twelve Column Grid System

At m,l, and xl screen sizes, each column has 1% margin left & right.

1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

5

5

2

6

6

7

5

8

4

9

3

10

2

11

1

12

How It Works

1. Choose a wrapper container.

.wrapper, includes 20px padding on right & left.

.wrapper-full, is full width

2. Inside the wrapper, organize content with the .row class

3. Make columns with the .col class

- In each row, there can be up to 12 columns

- Or any combination that adds up to 12 (ex: 6+6, 3+9, 7+5)

4. Mobile First, Assigning the .col class will display content at 100%

Use the screen size prefix (m-, l-, or xl-) and a number (one to twelve, spelled out) to create columns that will take up that number of columns at that media query.

A column that has a class of '.col .m-six' will be 100% width at a small screen, then at the medium breakpoint will be 6 columns, or 50% of the screen.

.wrapper

.row

Default <class="col">

Medium <class="col m-six">

Large <class="col l-four">

Extra Large <class="col xl-three">

Default <class="col">

Medium <class="col m-six">

Large <class="col l-four">

Extra Large <class="col xl-three">

Default <class="col">

Medium <class="col m-twelve">

Large <class="col l-four">

Extra Large <class="col xl-six">

Responsive Breakpoints

Breakpoint Media Code Example
Less than 750px

Small

 .col <class="col">
Greater than 750px

Medium

 .col .m-(#) <class="col m-four">
Greater than 970px

Large

 .col .l-(#) <class="col l-four">
Greater than 1170px

Extra-Large

 .col .xl-(#) <class="col xl-four">

Offsetting Columns

No offsets at small screen view because columns are 100% width.

To offset columns on the left side, at m, l, or xl screen sizes add a class of: (prefix)-space-(# of columns to offset)

No offsets at small screen

<class="col m-eight m-space-two">

Medium: 8 columns wide, offset by 2

<class="col l-six l-space-three">

Large: 6 columns wide, offset by 3

<class="col xl-five xl-space-seven">

Extra Large: 5 columns wide, offset by 7

Code Headings
<h1>

H1 Heading
<h2>

H2 Heading
<h3>

H3 Heading
<h4>

H4 Heading
<h5>
H5 Heading
<h6>
H6 Heading
Code Inline Text Styles
<p>

This is standard styled paragraph.
.left-text

This aligns text left. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident consequatur ipsa, illum harum sapiente ducimus nesciunt iure perspiciatis veniam, distinctio nobis perferendis aut eos maiores vitae, soluta aliquid quis aperiam!
.right-text

This aligns text right. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident consequatur ipsa, illum harum sapiente ducimus nesciunt iure perspiciatis veniam, distinctio nobis perferendis aut eos maiores vitae, soluta aliquid quis aperiam!
.center-text

This aligns text center. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident consequatur ipsa, illum harum sapiente ducimus nesciunt iure perspiciatis veniam, distinctio nobis perferendis aut eos maiores vitae, soluta aliquid quis aperiam!
.bold

This text is bold.
.italic

This text is italicized.
<cite>

The Remarkable Baobab by Thomas Pakenham.
<code>

This is code.
<var>

x + y = 10;
<abbr>

HTML
<address> Text below is an address;
Jane Doe
123 Main Street
San Diego, Ca 92102

<blockquote>

This is a block quote:

The baobab has many useful properties, which explains why it is widely known as the Tree of Life. It behaves like a giant succulent and up to 80% of the trunk is water. San bushmen used to rely on the trees as a valuable source of water when the rains failed and the rivers dried. A single tree can hold up to 4,500 liters (1,189 gallons) The baobab is a life-giver for African wildlife, too, often creating its very own ecosystem. It provides food and shelter for a myriad of species, from the tiniest insect to the mighty African elephant.
.uppercase

This text is has the class of 'uppercase' applied.
.lowercase

This text is has the class of 'lowercase' applied.
.capitalize

This text is has the class of 'capitalize' applied.
Code List Styles
<ul>
  • Item 01
  • Item 02
  • Item 03
<ol>
  1. Item 01
  2. Item 02
  3. Item 03

Default Table

First Name Last Name Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Striped Table

Adds background color to odd numbered rows. Add 'striped' class to table element.

First Name Last Name Age
Jill Smith 50
Eve Jackson 94
John Doe 80
Jane Smith 42

Bordered Table

Adds border to sides and bottom. Add '.border-table' class to table element.

First Name Last Name Age
Jill Smith 50
Eve Jackson 94
John Doe 80
Jane Smith 42

Responsive Table

Adds horizontal scroll bars when table exceeds screen size. Wrap table in a container div with a class of '.table-responsive'

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67

Text Boxes

Code Example
<input type="text" class="form-control">
<input type="text" class="form-control form-control-lg">
<input type="text" class="form-control form-control-sm">

Drop Down Menus

Code Example
<select class="select select-sm">
<select class="select select-m">
<select class="select select-lg">

Text Areas

Code Example
<textarea class="form-control">

Checkboxes

Code Example

<label class="container">One

<input type="checkbox" checked="checked">

<span class="checkmark"></span>

</label>

Radio Buttons

Code Example

<label class="container">One

<input type="radio" name="radio">

<span class="checkmark checkmarkRadio"></span>

</label>

Submit Buttons

Code Example

<input type="submit" value="Submit">

Buttons

Code Example
.btn .btn-xs
.btn .btn-s
.btn .btn-m
.btn .btn-l
.btn .disabled

Images

Code Example

Make image responsive

.img-responsive

 Fox

Image Thumbnail, rounded corners & border

.img-thumbnail

 Fox

Rounded Corners

.rounded

 Fox

Rounded Top

.rounded-top

 Fox

Circular Image

.rounded-circle

 Fox

Colored Border

.border .border-red


Other available border colors:

.border-blue, .border-grey,
.border-green, .border-orange,
.border-red, .border-light,
.border-black, .border-white

Fox

Quick Floats

Code Example
.float-left

Float Left
.float-right

Float Right
.align-center

Align Center

No Print

Code Example
default

This text will show up in the print mode.
.no-print

This text will not show up in the print mode.

Font Awesome

A link to Font Awesome is already included, so start adding any icon from their library right away!

Code Example
<i class="far fa-thumbs-up"></i>
<i class="far fa-star"></i>
<i class="far fa-smile"></i>