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](http://tuktuk.tapquo.com/microsites/tuktuk_blog.html)
[Landing Page](http://tuktuk.tapquo.com/microsites/tuktuk_landing.html)
[Profile Page](http://tuktuk.tapquo.com/microsites/tuktuk_profile.html)
[Web Application](http://tuktuk.tapquo.com/microsites/tuktuk_app.html)


### 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](https://github.com/soyjavi/tuktuk/blob/master/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.

	

    	
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
	
	

   		Label example
        
            
		

        	Drop down:Select option
            
                
                    HTML5 Jedi
                    Two
                    Three
                
            
        

        

            Required:field
            
        

        

            Feedback:Comments here
            
        

        

            SwitchesTouch lover
            

                
                
            
        

        

            Radiobuttons
            Yes
            No
        

        

            Checkbox:Styled
            One
            Two
        
	

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

        Large
        Normal
        Small
        Tiny
    

    

        Large
        Normal
        Small
        Tiny
    
    
    

        
        
        
        
    
    
    

        Anchor
    
    
##### 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
    

        
.white
        
.normal
        
.theme
    
##### Background   
    

        
.light
        
.color
        
.dark
        
.theme
    
##### Text    
    

        
thin
        
book
        
normal
        
bold
        
italic
        
underline
    
##### Align    
    

        
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
    

        
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.
    
#### 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.
    
#### Squeare 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.

    

        

            
            
        
        

            
            
        
        

            
            
        
    
    
### Navigation
Navigation menu that works both in a desktop and a mobile
	
	

        

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

Remind: Dont forget to load the tuktuk javascript

	
	 
#### Default
Button to trigger:

	Default

Modal default template

    

        

            
Default modal window
        
        

            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.
        
        
    
    
Remind: active class makes modal visible

#### Styling Modal
Button to trigger:

	Styling modal

Styled modal template:

    

        

            
Header with .bck .alert class
            
        
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.
        
    
    
### Icons
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