SkillAgentSearch skills...

Tuktuk

Simple (but powerful) RWD Framework

GenerateConvertImprove

Install / Use

/learn @soyjavi/Tuktuk
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

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

soyjavi

View profile

View on GitHub
GitHub Stars530
CategoryDevelopment
Updated14d ago
Forks103
soyjavi/tuktuk

Languages

CSS

Security Score

95/100

Audited on Mar 14, 2026

No findings