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>
At m,l, and xl screen sizes, each column has 1% margin left & right.
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">
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"> |
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> |
|
<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> |
|
<ol> |
|
First Name | Last Name | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
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 |
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 |
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 |
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"> |
Code | Example |
---|---|
<select class="select select-sm"> | |
<select class="select select-m"> |
|
<select class="select select-lg"> |
Code | Example |
---|---|
<textarea class="form-control"> |
Code | Example |
---|---|
<label class="container">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> |
Code | Example |
---|---|
<label class="container">One <input type="radio" name="radio"> <span class="checkmark checkmarkRadio"></span> </label> |
Code | Example |
---|---|
<input type="submit" value="Submit"> |
Code | Example |
---|---|
.btn .btn-xs | |
.btn .btn-s | |
.btn .btn-m | |
.btn .btn-l | |
.btn .disabled |
Code | Example |
---|---|
Make image responsive .img-responsive |
|
Image Thumbnail, rounded corners & border .img-thumbnail |
|
Rounded Corners .rounded |
|
Rounded Top .rounded-top |
|
Circular Image .rounded-circle |
|
Colored Border .border .border-red Other available border colors:
.border-blue,
.border-grey,
|
Code | Example |
---|---|
.float-left |
Float Left |
.float-right |
Float Right |
.align-center |
Align Center |
Code | Example |
---|---|
default |
This text will show up in the print mode. |
.no-print |
This text will not show up in the print mode. |
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> |