tf.css demo

tf.css - small, responsive boilerplate.

Download

Typography

 
<h1>Heading<span class="subtle"> <code>&lt;h1&gt;</code> 3.6rem</span></h1>
<h2>Heading<span class="subtle"> <code>&lt;h2&gt;</code> 3.0rem</span></h2>
<h3>Heading<span class="subtle"> <code>&lt;h3&gt;</code> 2.4rem</span></h3>
<h4>Heading<span class="subtle"> <code>&lt;h4&gt;</code> 1.8rem</span></h4>
<h5>Heading<span class="subtle"> <code>&lt;h5&gt;</code> 1.5rem</span></h5>
<h6>Heading<span class="subtle"> <code>&lt;h6&gt;</code> 1rem</span></h6>

<p>Lorem ipsum <strong>dolor sit amet</strong>,
consectetur <em>adipiscing elit</em>, 
sed do <a>eiusmod tempor</a> incididunt ut labore 
et <u>dolore magna aliqua</u>.

<p class="subtle">Lorem ipsum...

Buttons

Button Button Button Button Button Button

 
<a class="button" href="">Button</a>
<a class="button-shadow" href="">Button</a>            
<a class="button-blue-shadow" href="">Button</a>
<a class="button-blue" href="">Button</a>
<a class="button-disabled" href="">Button</a>
<a class="button-blue-disabled" href="">Button</a>

Forms


<form action="/action_page.php">
    <fieldset>
        <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname" value="John">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Smith">
        <br><br>
        <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
        <input type="checkbox" name="vehicle2" value="Car"> I have a car 
        <br><br>
        <input type="submit" class="button-shadow" value="Submit">
        <input type="reset" class="button-shadow">
    </fieldset>
</form>

Lists

Coffee
Tea
- Black tea
- Green tea
Milk


<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>

Tables

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

 
<div style="overflow-x:auto;">
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
            ...

Navigation

Intro
Elements
Examples
Github

 
<div class="nav">
    <ul>
        <li><a href="#intro">Intro</a></li>
        <li><a href="#elements">Elements</a></li>
        <li><a href="#examples">Examples</a></li>
        <li><a href="#github">Github</a></li>
...

Grid

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-12

 
<div class="row">
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
</div>

Utilities


        .centered - centers element
        hr - draws horizontal line