Basic Usage

Thanks for using Tinker! Here is a guide to the proper setup of a HTML page according to Tinker:

<section>
 <div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <div class="box">
    <p>Content Here</p>
   </div>
  </div>
 </div>
</section>

Tinker is based on a 12 column grid. The box element gives padding to the col element without affecting the overall layout. You can easily find these classes by following the table of contents available in the stylesheet.

/* Tinker
* Created By: J.V Krakowski
* github.com/jvkrakowski/tinker
* Liscense: MIT License
*
* TABLE OF CONTENTS 
* Basics
* Contiainer, Section and Wrapper
* Box
* Header
* Typography
** Paragraph
** Lists
** Pre and Code
** Dictionary 
** Typography Alignment
* Links
* Navigation
* Row
* Column Reverse
* Column XS
* Column XS Offset
* XS Position
* Column Small - For screens with a minimum width of 768px
* Column Medium - For screens with a minimum width of 992px
* Column Large - For screens with a minimum width of 1200px
*/

The section element isn't necessary. It was included to make the page easier to collapse and read. Some design styles may call for the section element, but that's entirely up to the developer. I have poor eyesight, so including section made my life easier. Some elements (like box) were deliberately kept separate for convenience.

I highly recommend combining Tinker with the following projects:

Hover by Ian Lunn

Animate by Daniel Eden