Code Monkey home page Code Monkey logo

tuktuk's Introduction

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

Button to trigger:

<button data-tuktuk-modal="big_modal">Styling modal</button>

Styled modal template:

<div id="big_modal" data-tuktuk="modal" class="column_8 active">
    <header class="bck alert">
        <h4 class="text thin inline">Header with <strong>.bck .alert</strong> class</h4>
        <button data-modal="close" class="transparent small on-right inline icon remove"></button>
    </header>
    <article class="text big">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="button large secondary"><span class="icon ok"></span>Accept</button>
        <button data-modal="close" class="button  alert"><span class="icon remove"></span>Cancel</button>
    </footer>
</div>

Icons

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

<div class="column_12">
    <span class="icon glass"></span>
    <span class="icon music"></span>
    <span class="icon search"></span>
    <span class="icon envelope"></span>
    <span class="icon heart"></span>
    <span class="icon star"></span>
    <span class="icon star-empty"></span>
    <span class="icon user"></span>
    <span class="icon film"></span>
    <span class="icon grid-large"></span>
    <span class="icon grid"></span>
    <span class="icon list-th"></span>
    <span class="icon ok"></span>
    <span class="icon remove"></span>
    <span class="icon zoom-in"></span>
    <span class="icon zoom-out"></span>
    <span class="icon off"></span>
    <span class="icon signal"></span>
    <span class="icon cog"></span>
    <span class="icon trash"></span>
    <span class="icon home"></span>
    <span class="icon file"></span>
    <span class="icon time"></span>
    <span class="icon road"></span>
    <span class="icon download"></span>
    <span class="icon download-circle"></span>
    <span class="icon upload-circle"></span>
    <span class="icon inbox"></span>
    <span class="icon play-circle"></span>
    <span class="icon repeat"></span>
    <span class="icon refresh"></span>
    <span class="icon list-alt"></span>
    <span class="icon lock"></span>
    <span class="icon flag"></span>
    <span class="icon headphones"></span>
    <span class="icon volume-off"></span>
    <span class="icon volume-down"></span>
    <span class="icon volume-up"></span>
    <span class="icon qrcode"></span>
    <span class="icon barcode"></span>
    <span class="icon tag"></span>
    <span class="icon tags"></span>
    <span class="icon book"></span>
    <span class="icon bookmark"></span>
    <span class="icon print"></span>
    <span class="icon camera"></span>
    <span class="icon font"></span>
    <span class="icon bold"></span>
    <span class="icon italic"></span>
    <span class="icon text-height"></span>
    <span class="icon text-width"></span>
    <span class="icon align-left"></span>
    <span class="icon align-center"></span>
    <span class="icon align-right"></span>
    <span class="icon align-justify"></span>
    <span class="icon list"></span>
    <span class="icon indent-left"></span>
    <span class="icon indent-right"></span>
    <span class="icon video"></span>
    <span class="icon picture"></span>
    <span class="icon pencil"></span>
    <span class="icon map-marker"></span>
    <span class="icon adjust"></span>
    <span class="icon tint"></span>
    <span class="icon edit"></span>
    <span class="icon share"></span>
    <span class="icon check"></span>
    <span class="icon move"></span>
    <span class="icon step-backward"></span>
    <span class="icon fast-backward"></span>
    <span class="icon backward"></span>
    <span class="icon play"></span>
    <span class="icon pause"></span>
    <span class="icon stop"></span>
    <span class="icon forward"></span>
    <span class="icon fast-forward"></span>
    <span class="icon step-forward"></span>
    <span class="icon eject"></span>
    <span class="icon chevron-left"></span>
    <span class="icon chevron-right"></span>
    <span class="icon plus-sign"></span>
    <span class="icon minus-sign"></span>
    <span class="icon remove-sign"></span>
    <span class="icon ok-sign"></span>
    <span class="icon question-sign"></span>
    <span class="icon info-sign"></span>
    <span class="icon screenshot"></span>
    <span class="icon remove-circle"></span>
    <span class="icon ok-circle"></span>
    <span class="icon ban-circle"></span>
    <span class="icon arrow-left"></span>
    <span class="icon arrow-right"></span>
    <span class="icon arrow-up"></span>
    <span class="icon arrow-down"></span>
    <span class="icon share-alt"></span>
    <span class="icon resize-full"></span>
    <span class="icon resize-small"></span>
    <span class="icon plus"></span>
    <span class="icon minus"></span>
    <span class="icon asterisk"></span>
    <span class="icon exclamation-sign"></span>
    <span class="icon gift"></span>
    <span class="icon leaf"></span>
    <span class="icon fire"></span>
    <span class="icon eye-open"></span>
    <span class="icon eye-close"></span>
    <span class="icon warning-sign"></span>
    <span class="icon plane"></span>
    <span class="icon calendar"></span>
    <span class="icon random"></span>
    <span class="icon comment"></span>
    <span class="icon magnet"></span>
    <span class="icon chevron-up"></span>
    <span class="icon chevron-down"></span>
    <span class="icon retweet"></span>
    <span class="icon shopping-cart"></span>
    <span class="icon folder-close"></span>
    <span class="icon folder-open"></span>
    <span class="icon resize-vertical"></span>
    <span class="icon resize-horizontal"></span>
    <span class="icon bar-chart"></span>
    <span class="icon twitter-sign"></span>
    <span class="icon facebook-sign"></span>
    <span class="icon camera-retro"></span>
    <span class="icon key"></span>
    <span class="icon cogs"></span>
    <span class="icon comments"></span>
    <span class="icon thumbs-up"></span>
    <span class="icon thumbs-down"></span>
    <span class="icon star-half"></span>
    <span class="icon heart-empty"></span>
    <span class="icon signout"></span>
    <span class="icon linkedin-sign"></span>
    <span class="icon pushpin"></span>
    <span class="icon external-link"></span>
    <span class="icon signin"></span>
    <span class="icon trophy"></span>
    <span class="icon github-sign"></span>
    <span class="icon upload"></span>
    <span class="icon lemon"></span>
    <span class="icon phone"></span>
    <span class="icon check-empty"></span>
    <span class="icon bookmark-empty"></span>
    <span class="icon phone-sign"></span>
    <span class="icon twitter"></span>
    <span class="icon facebook"></span>
    <span class="icon github"></span>
    <span class="icon unlock"></span>
    <span class="icon credit-card"></span>
    <span class="icon rss"></span>
    <span class="icon hdd"></span>
    <span class="icon bullhorn"></span>
    <span class="icon bell"></span>
    <span class="icon certificate"></span>
    <span class="icon hand-right"></span>
    <span class="icon hand-left"></span>
    <span class="icon hand-up"></span>
    <span class="icon hand-down"></span>
    <span class="icon left-sign"></span>
    <span class="icon right-sign"></span>
    <span class="icon up-sign"></span>
    <span class="icon down-sign"></span>
    <span class="icon globe"></span>
    <span class="icon wrench"></span>
    <span class="icon tasks"></span>
    <span class="icon filter"></span>
    <span class="icon briefcase"></span>
    <span class="icon fullscreen"></span>
    <span class="icon group"></span>
    <span class="icon link"></span>
    <span class="icon cloud"></span>
    <span class="icon beaker"></span>
    <span class="icon cut"></span>
    <span class="icon copy"></span>
    <span class="icon paper-clip"></span>
    <span class="icon save"></span>
    <span class="icon sign-blank"></span>
    <span class="icon menu"></span>
    <span class="icon list-ul"></span>
    <span class="icon list-ol"></span>
    <span class="icon strikethrough"></span>
    <span class="icon underline"></span>
    <span class="icon table"></span>
    <span class="icon magic"></span>
    <span class="icon truck"></span>
    <span class="icon pinterest"></span>
    <span class="icon pinterest-sign"></span>
    <span class="icon google-plus-sign"></span>
    <span class="icon google-plus"></span>
    <span class="icon money"></span>
    <span class="icon caret-down"></span>
    <span class="icon caret-up"></span>
    <span class="icon caret-left"></span>
    <span class="icon caret-right"></span>
    <span class="icon caret-sort"></span>
    <span class="icon caret-sort-down"></span>
    <span class="icon caret-sort-up"></span>
    <span class="icon columns"></span>
    <span class="icon envelope-alt"></span>
    <span class="icon linkedin"></span>
    <span class="icon undo"></span>
    <span class="icon legal"></span>
    <span class="icon dashboard"></span>
    <span class="icon comment-alt"></span>
    <span class="icon comments-alt"></span>
    <span class="icon bolt"></span>
    <span class="icon sitemap"></span>
    <span class="icon umbrella"></span>
    <span class="icon paste"></span>
    <span class="icon lightbulb"></span>
    <span class="icon exchange"></span>
    <span class="icon cloud-download"></span>
    <span class="icon cloud-upload"></span>
    <span class="icon user-md"></span>
    <span class="icon stethoscope"></span>
    <span class="icon suitcase"></span>
    <span class="icon bell-alt"></span>
    <span class="icon coffee"></span>
    <span class="icon food"></span>
    <span class="icon file-alt"></span>
    <span class="icon building"></span>
    <span class="icon hospital"></span>
    <span class="icon ambulance"></span>
    <span class="icon medkit"></span>
    <span class="icon fighter-jet"></span>
    <span class="icon beer"></span>
    <span class="icon h-sign"></span>
    <span class="icon sign"></span>
    <span class="icon double-angle-left"></span>
    <span class="icon double-angle-right"></span>
    <span class="icon double-angle-up"></span>
    <span class="icon double-angle-down"></span>
    <span class="icon angle-left"></span>
    <span class="icon angle-right"></span>
    <span class="icon angle-up"></span>
    <span class="icon angle-down"></span>
    <span class="icon desktop"></span>
    <span class="icon laptop"></span>
    <span class="icon tablet"></span>
    <span class="icon mobile-phone"></span>
    <span class="icon circle-blank"></span>
    <span class="icon quote-left"></span>
    <span class="icon quote-right"></span>
    <span class="icon spinner"></span>
    <span class="icon circle"></span>
    <span class="icon reply"></span>
    <span class="icon github-alt"></span>
    <span class="icon folder-close-alt"></span>
    <span class="icon folder-open-alt"></span>
    <small>Based on <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank" class="text bold color theme">Font Awesome</a> Project</small>
</div>

tuktuk's People

Contributors

1m4n0l avatar aberigle avatar copiousfreetime avatar james2doyle avatar jjmaestro avatar jsmanrique avatar piniphone avatar soyjavi avatar v3ct0r avatar vonpmg avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

jjmaestro karliky skeiter9 abelnnieva shitilike vonpmg javiercrocco dparcerisa biocross lindosekai sanyaade-mobiledev bethleppard lucas77x jarboleya2 helmercol bazzinga james2doyle 3l3n01 myusernamejeep spinikr grimor aabril v3ct0r halfnhav4 stubben iyogeshjoshi preclowski rockyhuang itsmanuelrc aberigle ville1834 johnnyduo shybovycha pushingego a973c pau87x kentdoppelganger julioghisloti amanikamail paolotugano25 bordemof superactive johnnycatsf apnerve oihi08 bleemd fatihgol iraycd serzn1 gabrielalmeida cascalheira montazze 2325407504 miyukki 1m4n0l devmerz xazzz daviesdf cybernetics indisc kirpen mjpinto acidstorm linox ki1l3r javiermendez thujohn leksa pangyre silas85levi cljoly nelyj xiaoguan2014 kingmario ughnettdev davletvm tuslo simcn liuguofeng719 umarmughal ravinthranath studiocreate ifa6 joket1999 zgpg kosmika gatesam zpcooper lemontechsa beingsane docworld adri273 kvzivn grahack apextw findanish allen1973 austinvernsonger modulexcite mbatalla

tuktuk's Issues

Clearfix method

The use of overflow: hidden as the clearfix method for a layout has many problems. For example, you can not use elements with position: absolute or negative margins because it will not display outside the bounds of the container (dropdown menus, tooltips,...). I think that the most up to date clearfix method is http://nicolasgallagher.com/micro-clearfix-hack/

Web application example usable only on Chrome !

The Scroll bars are not working as they should in firefox 18 ! . The web application template rendering in ie 9 and 10 is just not right . Ive attached images . atleast 25% of the visitors use ie 9,10 so thats huge .

ff18
ie9
ie10

Convert to Styl

Is there any thought to converting the project to Styl?

Mainly I ask because of this issue.

Also Styl is about 10 times faster to compile.

Modal window doesn't open in Safari

Tried to debug this but I am lost as to what is going on. It just doesn't seem to want to show. The active class gets added but it still seems to be hiding somewhere on the page.

questions about selector .row in tuktuk.grid.styl

located in the file /stylesheets/tuktuk.grid.styl this line 261 as follows:

.row
    margin: 0 auto
    width: 456px
    overflow: hidden

  .row .row
    margin: 0
    width: auto
    display: inline-block

Believe and if I'm not wrong should be 👍 :

.row
    margin: 0 auto
    width: 456px
    overflow: hidden

    &.row
      margin: 0
      width: auto
      display: inline-block

can not run in IE

It's too bad run in IE with the new example of Web Application!!!
Can you Help me ?

CSS file line 246 failing with Heroku

Line 246 in the tuktuk.css file of the .zip download has no values for the box-flex property. This caused an error when deploying to Heroku on a Rails app. Removing this text from the line

-webkit-box-flex:;-moz-box-flex:;-ms-box-flex:;-o-box-flex:;box-flex:;

resolved the issue with Heroku deployment.

Bower compatibility

Can you make your library (I mean the .styl files) available for bower?

Thank you.

Button on landing is not fully aligned with the input.

In landing.html example, the button do not align with the input.
En ejemplo landing.html, el boton no aparece alineado con el input.

    <div class="row">
        <div class="column_6 offset_3 form subscribe">
            <input type="email" id="mail" class="large" placeholder="Your email address">
            <button class="button large icon envelope"></button>
        </div>
    </div>

Ese comportamiento es normal? o se trata de un error? gracias
That behavior is normal? or is it a mistake? thanks
captura de pantalla de 2013-06-07 16 29 39

.psd file

Any plans to support this with .psd grid files? Love the layout of this RWD grid system.

Simplify grid

I saw ungrid.css and I thought tuktuk could implement the grid like that, is much easier for developers and is less code.

Do you know what are the pros and cons of implementing a grid like that?

Requesting a howto to build with grunt.

Hi.

I'm trying to generate the css code from the basic tuktuk package,
as far as I know I should use the gruntfile.coffee.

With the premises I have nodejs and grunt / grunt-cli installed,
I use the 'grunt' command on the root of the project, but I have this error message.

albert@griset:~/dev/tuktuk$ grunt
grunt-cli: The grunt command line interface. (v0.1.6)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

It could be possible to attach some build instructions in the ReadMe file for newbies as me?

So much thanks in advance.

Package folder empty

When you download master zip file, the package folder is empty. I guess this is the place where all the stylesheets would need to be, so I guess that it shouldn't be empty:)

IE 9 & 10 Icon Problem

Hello, the icons don't appear in Internet Explorer 9 and 10. What can I do to see the icons?.
Thank you.

Override iOS native styling for input submit buttons

I'm using tuktuk with great success in a Rails app.

The one stumbling block so far has been with the iOS native styling of <input> submit buttons.

I found this fix in a zurb/foundation issue and it worked great for me:

input[type=submit].button {
-webkit-appearance: none;
}

For Rails users you can just add this to the end of your application.css file. Other users should just add it as late in the cascade as possible.

Seems this should already be in tuktuk somewhere?

app themplate dont work

i downloaded the complete project, but when i open app.htm file, the links are broken and file has no style. can you explain me about .styl files?

also package folder is empty and has no style file. tnx

Get error on tuktuk.button.styl

I try to compile css from folder styl, but error on tuktuk.button.styl with variable UNIT. I'm newbie on stylus and I don't know how to compile __init.style with tuktuk.button.styl.

Can advice me, please.

Grunt task copy not working

When launch grunt 'site/package/tuktuk.icon.css' is not generated, the fix is to set copy.main.files as an array:

copy: main: files:[src: '<%= source.icons %>',dest: "<%= meta.endpoint %>/<%=meta.file%>.icons.css" ]

Browser compatibility + documentation + examples

Hi, guys! Great project you are mading, here, congrats!

In the the site, we can read "Don't try to use Tuktuk in your hated IE6", right? But I can't find some type of "compatibility table" to know in which browser I can use Tuktuk at all (or if it's consistent in the browsers with support).

I also tried to find some documentation in the site, but without success. Do you guys intend do put that in a near future? As I said, I really appreciated Tuktuk and, with some more infos and documentation and examples, I could contribute with the divulgation of Tuktuk translating the web site to brazilian portuguese and trying to spread the project from here. :-)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.