TukTuk

TukTuk is a responsive front-end framework that creates extensible sites easily.

CSS3 powered: The premise is to use as much as possible the features of the latest CSS specification. Don't try to use Tuktuk in IE6.
Lightweight & fast: You don't want to carry heavy stylesheets that only make for a slow loading site. Tuktuk is lightweight at just 9kb gzipped
Object Oriented CSS: The purpose is to encourage code reuse plus faster and more efficient stylesheets that are easier to add to and maintain.

Getting Started

Examples

Check out four examples of what you can do with tuktuk: Blog Page Landing Page Profile Page Web Application

GitHub

This is opensource, so feel free to fork this project to help us improve TukTuk. All source code is developed with CoffeeScript and Stylus.

Licensing

TukTuk is licensed under GPLv3 licensed and a Commercial License for OEM uses. See LICENSE for more information.

How to use

Turn it up to 12 columns

The grid system of Tuktuk is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns.

<div class="row margin-bottom">
	<div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
    <div class="column_1 radius bck light padding-top padding-bottom">1</div>
</div>

<div class="row margin-bottom">
	<div class="column_4 radius bck light padding-top padding-bottom">4</div>
    <div class="column_4 radius bck light padding-top padding-bottom">4</div>
    <div class="column_4 radius bck light padding-top padding-bottom">4</div>
</div>

<div class="row margin-bottom">
	<div class="column_4 radius bck light padding-top padding-bottom ">4</div>
    <div class="column_8 radius bck light padding-top padding-bottom">8</div>
</div>
<div class="row margin-bottom">
	<div class="column_6 radius bck light padding-top padding-bottom">6</div>
    <div class="column_6 radius bck light padding-top padding-bottom">6</div>
</div>

<div class="row">
	<div class="column_12 radius bck light padding-top padding-bottom">12</div>
</div>

Offsetting columns

You have the option to offset a column, which should make life a little bit easier if you you need to add extra spacing between columns.

<div class="row margin-bottom">
	<div class="column_4 offset_4 radius bck color text color white padding-top padding-bottom">4 with 4 offset</div>
</div>
<div class="row margin-bottom">
	<div class="column_3 offset_3 radius bck color text color white padding-top padding-bottom">3 with 3 offset</div>
	<div class="column_3 offset_3 radius bck color text color white padding-top padding-bottom">3 with 3 offset</div>
</div>
<div class="row">
	<div class="column_8 offset_4 radius bck color text color white padding-top padding-bottom">8 with 4 offset</div>
</div>

Forms

Make forms look gorgeous regardless of device and browser

<form id="form" name="form" class="margin-top">
	<label>Label example</label>
    <input type="text" name="default" id="default">
        <!--
        <label>Label example</label>
        <input type="text" name="large" id="large" class="large" />
         -->
	<fieldset>
    	<label>Drop down:<small>Select option</small></label>
        <span class="select">
            <select>
                <option value="1">HTML5 Jedi</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </span>
    </fieldset>

    <fieldset>
        <label>Required:<small>field</small></label>
        <input type="text" name="name" id="name" required="">
    </fieldset>

    <fieldset>
        <label>Feedback:<small>Comments here</small></label>
        <textarea></textarea>
    </fieldset>

    <fieldset>
        <label>Switches<small>Touch lover</small></label>
        <div data-control="checkbox">
            <input type="checkbox" value="None" id="prueba">
            <label for="prueba"></label>
        </div>
    </fieldset>

    <fieldset>
        <label>Radio<small>buttons</small></label>
        <input type="radio" name="radio1"><span>Yes</span>
        <input type="radio" name="radio2" disabled=""><span>No</span>
    </fieldset>

    <fieldset>
        <label>Checkbox:<small>Styled</small></label>
        <input type="checkbox" name="radio1"><span>One</span>
        <input type="checkbox" name="radio2"><span>Two</span>
    </fieldset>
</form>

Buttons

Gallery of styles and sizes that will be enough to interact with your site.

<div class="margin-top">
    <a href="#" class="button large">Large</a>
    <a href="#" class="button secondary">Normal</a>
    <a href="#" class="button success small">Small</a>
    <a href="#" class="button alert tiny">Tiny</a>
</div>

<div class="margin-top">
    <a href="#" class="button large"><span class="icon ok"></span>Large</a>
    <a href="#" class="button secondary"><span class="icon ok"></span>Normal</a>
    <a href="#" class="button success small"><span class="icon ok"></span>Small</a>
    <a href="#" class="button alert tiny"><span class="icon ok"></span>Tiny</a>
</div>

<div class="margin-top">
    <a href="#" class="button large icon ok"></a>
    <a href="#" class="button secondary icon ok"></a>
    <a href="#" class="button success small icon ok"></a>
    <a href="#" class="button alert tiny icon ok"></a>
</div>

<div class="margin-top">
    <a href="#" class="button anchor secondary"><span class="icon ok"></span>Anchor</a>
</div>

Tables

Clean & Flat style for table elements such as TH, TD, odds...

<table class="margin-top">
    <thead>
        <tr>
            <th>Item</th>
            <th>Category</th>
            <th>Version</th>
            <th><span class="right">Price</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>iPhone</td>
            <td>Mobile</td>
            <td>5</td>
            <td><span class="right">$ 699</span></td>
        </tr>
        <tr>
            <td>iPad Mini</td>
            <td>Tablet</td>
            <td>1</td>
            <td><span class="right">$ 399</span></td>
        </tr>
        <tr>
            <td>iPad</td>
            <td>Tablet</td>
            <td>4</td>
            <td><span class="right">$ 499</span></td>
        </tr>
        <tr>
            <td>Macbook Air 13"</td>
            <td>Laptop</td>
            <td>2</td>
            <td><span class="right">$ 1299</span></td>
        </tr>
        <tr>
            <td>Macbook Pro 15"</td>
            <td>Laptop</td>
            <td class="highlight">Retina</td>
            <td><span class="right">$ 2299</span></td>
        </tr>
    </tbody>
</table>

Typography

Discover how you can play with the style of any element using style inheritance.

Color

<div class="offset_1 column_2">
    <h6 class="color white">.white</h6>
    <h6>.normal</h6>
    <h6 class="color theme">.theme</h6>
</div>

Background

<div class="column_2">
    <h6 class="bck light">.light</h6>
    <h6 class="bck color">.color</h6>
    <h6 class="bck dark">.dark</h6>
    <h6 class="bck theme">.theme</h6>
</div>

Text

<div class="column_2">
    <h6 class="text thin">thin</h6>
    <h6 class="text book">book</h6>
    <h6 class="text normal">normal</h6>
    <h6 class="text bold">bold</h6>
    <h6 class="text italic">italic</h6>
    <h6 class="text underline">underline</h6>
</div>

Align

<div class="column_2">
    <h6 class="text left">left</h6>
    <h6 class="text right">right</h6>
    <h6 class="text center">center</h6>
    <h6 class="text justify">justify</h6>
</div>

Headings

<div class="column_2">
    <h1 class="inline">H1</h1>
    <h2 class="inline">H2</h2>
    <h3 class="inline">H3</h3>
    <h4 class="inline">H4</h4>
    <h5 class="inline">H5</h5>
    <h6 class="inline">H6</h6>
</div>

Lists

If buttons are important, so are lists. Tuktuk comes with a group of styles easily usable.

Normal Bullets

<ul>
    <li>Cras mattis consectetur purus sit amet fermentum.</li>
    <li>
        Donec ullamcorper nulla non metus auctor fringilla.
        <ul>
            <li>Aenean eu leo quam.</li>
            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
        </ul>
    </li>
    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ul>

Numbered Bullets

<ol class="square">
    <li>Cras mattis consectetur purus sit amet fermentum.</li>
    <li>
        Donec ullamcorper nulla non metus auctor fringilla.
        <ol>
            <li>Aenean eu leo quam.</li>
            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
        </ol>
    </li>
    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>

Circle Bullets

<ul class="circle">
    <li>Cras mattis consectetur purus sit amet fermentum.</li>
    <li>
        Donec ullamcorper nulla non metus auctor fringilla.
        <ul>
            <li>Aenean eu leo quam.</li>
            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
        </ul>
    </li>
    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ul>

Squeare Bullets

<ul class="square">
    <li>Cras mattis consectetur purus sit amet fermentum.</li>
    <li>
        Donec ullamcorper nulla non metus auctor fringilla.
        <ul>
            <li>Aenean eu leo quam.</li>
            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
        </ul>
    </li>
    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ul>

Show & Hide

There are times when you may need to only show something on a desktop and not on a tablet or phone or the other way around. TukTuk will do all the work for you with some extra classes to hide & show content.

<div class="row text center devices">
    <div class="column_4">
        <span class="icon desktop show-screen"></span>
        <span class="icon desktop hide-screen" style="opacity:0.1;"></span>
    </div>
    <div class="column_4">
        <span class="icon tablet show-tablet"></span>
        <span class="icon tablet hide-tablet" style="opacity:0.1;"></span>
    </div>
    <div class="column_4">
        <span class="icon mobile-phone show-phone"></span>
        <span class="icon mobile-phone hide-phone" style="opacity:0.1;"></span>
    </div>
</div>

Navigation

Navigation menu that works both in a desktop and a mobile

<section class="bck dark">
    <div class="row text center">
        <nav data-tuktuk="menu" class="column_12 padding text bold">
            <a href="#" class="active"><span class="icon camera"></span>Shots<small>(100)</small></a>
            <a href="#"><span class="icon heart"></span>Likes<small>(3)</small></a>
            <a href="#"><span class="icon group"></span>Following<small>(192)</small></a>
            <a href="#"><span class="icon star"></span>Debuts<small>(160)</small></a>
        </nav>
    </div>
</section>

Modals

Need popups for interact with the user, tuktuk puts you very easy.

Remind: Dont forget to load the tuktuk javascript

<script src="package/tuktuk.js"></script>

Default

Button to trigger:

<button data-tuktuk-modal="default_modal">Default</button>

Modal default template

<div id="default_modal" data-tuktuk="modal" class="column_5 active">
    <header>
        <h4 class="text thin">Default modal window</h4>
    </header>
    <article>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.
    </article>
    <footer>
        <button data-modal="close" class="anchor"><span class="icon remove"></span>Close</button>
    </footer>
</div>

Remind: active class makes modal visible

Styling Modal