A new kid on the block

Not trying to compete with Bootstrap or Foundation because they play in another league. Just worry about creating responsive and fully 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 your hated 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.

Community Project

Each new line of code is welcomed, I hope that developers and restless minds help me improve this humble project day by day.

Download

Sounds cool? Checkout 0.7.4 version

Examples

As a picture is worth a thousand words (or hundreds of lines of code), check out four examples of what you can do with tuktuk:

Blog Page
Landing Page
Profile Page
Web Application NEW!

Turn it up to 12 columns

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.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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.

4 with 4 offset
3 with 3 offset
3 with 3 offset
8 with 4 offset

Forms

Make forms look gorgeous regardless of device and browser.

Yes No
One Two

Buttons

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

Tables

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

Item Category Version Price
iPhone Mobile 5 $ 699
iPad Mini Tablet 1 $ 399
iPad Tablet 4 $ 499
Macbook Air 13" Laptop 2 $ 1299
Macbook Pro 15" Laptop Retina $ 2299

Typography

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

.color class

.white
.normal
.theme

.bck class

.light
.color
.dark
.theme

.text class

thin
book
normal
bold
italic
underline

.align class

left
right
center
justify

headings

H1

H2

H3

H4

H5
H6

Lists

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

Normal Bullets

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

Numbered Bullets

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

Circle Bullets

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

Square Bullets

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

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.

hide-screen hide-tablet hide-phone
show-screen show-tablet show-phone

Navigation

Need a navigation menu that works both in a desktop and a mobile?

Modals

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

tuktuk.icons.css

Seize the @font-face feature to have a large repository of vectorized icons ready to use on your site or application.

Based on Font Awesome Project

Author

Javi Jimenez is the CTO and co-founder of tapquo. A restless mind that always strives for continuous improvement, able to create frameworks like Lungo, QuoJS, Monocle used by thousands of developers around the world.

Default modal window

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.

Header with .bck .alert class

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.