TAKO

Tako Documentation

Welcome to the Tako documentation, here you will find what you need to create your web app.

HTML What must be written in your HTML

Article

Article is the main container, it can contain header, footer, sections, and nav.

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>TaKo</title>
<meta name="description" content="Tako framework for mobile webapps">
<meta name="author" content="Inigo Gonzalez - @haas85">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="stylesheets/tako.css">
<link rel="stylesheet" href="stylesheets/tako.theme.css">
</head>
<body>
    <article id="main">
        <header></header>
        <section id="section1"></section>
        <section id="section2"></section>
        <footer></footer>
    </article>
</body>
</html>

Section

The sections are inside the articles, and contain the code the user will interact with

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>TaKo</title>
<meta name="description" content="Tako framework for mobile webapps">
<meta name="author" content="Inigo Gonzalez - @haas85">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="stylesheets/tako.css">
<link rel="stylesheet" href="stylesheets/tako.theme.css">
</head>
<body>
    <article id="main">
        <header></header>
        <section id="section1">
            <p>This code will be shown to the user</p>
        </section>
        <footer></footer>
    </article>
</body>
</html>

Header

The header is positioned at the top of the article. It contains a title, and can contain elementsthat ar positioned at the left and right of it

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>TaKo</title>
<meta name="description" content="Tako framework for mobile webapps">
<meta name="author" content="Inigo Gonzalez - @haas85">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="stylesheets/tako.css">
<link rel="stylesheet" href="stylesheets/tako.theme.css">
</head>
<body>
    <article id="main">
        <header>
            <nav class="left">
                <button class="icon ellipsis-vert" data-action="aside">Aside</button>
            </nav>
            <h1>Main</h1>
            <nav class="right">
                <button class="icon ellipsis-vert button" data-action="aside">Aside</button>
            </nav>
        </header>
        <section id="section1">
            <p>This code will be shown to the user</p>
        </section>
        <footer></footer>
    </article>
</body>
</html>

Footer

The footer is positioned at the bottom of the article. It can contain anythin you want, but the best combination is to add buttons that are automatically resized to fit perfectly to the app

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>TaKo</title>
<meta name="description" content="Tako framework for mobile webapps">
<meta name="author" content="Inigo Gonzalez - @haas85">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="stylesheets/tako.css">
<link rel="stylesheet" href="stylesheets/tako.theme.css">
</head>
<body>
    <article id="main">
        <header>
            <nav class="left">
                <button class="icon ellipsis-vert" data-action="aside">Aside</button>
            </nav>
            <h1>Main</h1>
            <nav class="right">
                <button class="icon ellipsis-vert button" data-action="aside">Aside</button>
            </nav>
        </header>
        <section id="section1">
            <p>This code will be shown to the user</p>
        </section>
        <footer>
            <nav>
                <div><button class="icon ok">Button1</button></div>
                <div><button>Button2</button></div>
            </nav>
        </footer>
    </article>
</body>
</html>

Aside

Your app can also contain an aside menu that can contain navigation links or anything you want

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>TaKo</title>
<meta name="description" content="Tako framework for mobile webapps">
<meta name="author" content="Inigo Gonzalez - @haas85">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="stylesheets/tako.css">
<link rel="stylesheet" href="stylesheets/tako.theme.css">
</head>
<body>
    <aside>
        <header>
            <h1>Tako trial</h1>
        </header>
        <ul>
            <li>Forms</li>
            <li class="icon box" data-section="lists">Lists</li>
            <li data-section="buttons">Buttons</li>
            <li data-section="layouts">Layouts</li>
        </ul>
    </aside>
    <article id="main">
        <header>
            <nav class="left">
                <button class="icon ellipsis-vert" data-action="aside">Aside</button>
            </nav>
            <h1>Main</h1>
            <nav class="right">
                <button class="icon ellipsis-vert button" data-action="aside">Aside</button>
            </nav>
        </header>
        <section id="section1">
            <p>This code will be shown to the user</p>
        </section>
        <footer></footer>
    </article>
</body>
</html>

The aside can have the full class to make the aside fill the full height of the app

<aside class="full">
    <header>
        <h1>Tako trial</h1>
    </header>
    <ul>
        <li>Forms</li>
        <li class="icon box" data-section="lists">Lists</li>
        <li data-section="buttons">Buttons</li>
        <li data-section="layouts">Layouts</li>
    </ul>
</aside>

List

Tako contains several list styles

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>TaKo</title>
<meta name="description" content="Tako framework for mobile webapps">
<meta name="author" content="Inigo Gonzalez - @haas85">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="stylesheets/tako.css">
<link rel="stylesheet" href="stylesheets/tako.theme.css">
</head>
<body>
    <article id="main">
        <header>
            <nav class="left">
                <button class="icon ellipsis-vert" data-action="aside">Aside</button>
            </nav>
            <h1>Main</h1>
            <nav class="right">
                <button class="icon ellipsis-vert button" data-action="aside">Aside</button>
            </nav>
        </header>
        <section id="section1">
            <ul>
                <li class="icon box"><strong>Elem 1</strong><small>small elem</small></li>
                <li><img class="small" src="assets/img/tako-logo.png" alt=""><strong>Elem 1</strong><small>small elem</small></li>
                <li><img src="assets/img/tako-logo.png" alt=""><strong>Elem 1</strong><small>small elem</small></li>
                <li><img class="big" src="assets/img/tako-logo.png" alt=""><strong>Elem 1</strong><small>small elem</small></li>
                <li><strong>Elem 1</strong><small>small elem</small></li>
                <li><strong>Elem 1</strong><small>small elem</small></li>
                <li><strong>Elem 2</strong></li>
                <li class="separator">Elem3</li>
                <li>Elem 4</li>
                <li>Elem 5</li>
            </ul>
        </section>
        <footer></footer>
    </article>
</body>
</html>

Buttons

There are many kind of buttons, colored, wide, with icon, animated, with image... The sizes (smalles, small, big, biggest o wide) can be applicated on any button

<button>Normal</button>
<button class="wide">Wide</button>
<button class="wide accept">Accept</button>
<button class="wide cancel">Cancel</button>

<button class="smallest">Smallest</button>
<button class="small">Small</button>
<button >Normal</button>
<button class="big">Big</button>
<button class="biggest">Biggest</button>

<button class=""><span class="icon spin3 animated"></span><span>Animated</span></button>

<button class="icon ok">Ok</button>

<button class="icon ok"></button>

<button class="button smallest"><img src="assets/img/tako-logo.png" alt=""><span>Image</span></button>

<button class="button"><img src="assets/img/tako-logo.png" alt=""></button>

Layouts

Tako has 3 kind of layouts

Vertical grid

It uses flexbox. Add vertical grid to the container's class. An use the box_number in the elements to set the value (0 for free)

<div style="height:300px;">
    <div class="vertical grid">
        <div class="box_2 ">box_2</div>
        <div class="box_0 ">box_0</div>
        <div>none</div>
        <div class="box_5">box_5</div>
        <div class="box_4">box_4</div>
        <div>none</div>
    </div>
</div>

Horizontal grid

It uses flexbox. Add horizontal grid to the container's class. An use the box_number in the elements to set the value (0 for free)

<div>
    <div class="horizontal grid">
        <div class="box_2 ">box_2</div>
        <div class="box_0 ">box_0</div>
        <div>none</div>
        <div class="box_5">box_5</div>
        <div class="box_4">box_4</div>
        <div>none</div>
    </div>
</div>

Columns

Each line is represented with 10 columns, you can use them as you want using columns and gaps

<div class="line">
    <div class="two_column">2</div>
    <div class="one_column two_gap">1+2</div>
    <div class="one_column">1</div>
    <div class="four_column">4</div>
</div>

Form elements

Tako has its own styled form elements. This elements can be inside form tag or element with class form. It also includes the fieldset as W3C specificates

<form>
    <fieldset>
        <legend>Text inputs</legend>
        <label for="input">Default</label>
        <input type="text" id="input">
        <label for="line">Line input</label>
        <input type="text" id="line" class="line">
        <label for="background">No background input</label>
        <input type="text" id="background" class="no_background">
        <label for="border">No border input</label>
        <input type="text" id="border" class="no_border">
        <label for="border">Textarea</label>
        <textarea placeholder="The textarea can have the input texts' styles"></textarea>
    </fieldset>
    <fieldset>
        <legend>Checkboxes & Radiobuttons</legend>
        <label for="square">Square shaped</label>
        <input type="checkbox" id="square" class="square">
        <input type="radio" id="square_r" name="radio" class="square">
        <div class="clear"></div>
        <label for="circle">Circle shaped</label>
        <input type="checkbox" id="circle" class="circle">
        <input type="radio" id="circle_r" name="radio" class="circle">
        <div class="clear"></div>
        <label for="switch">Squre Shaped Switch</label>
        <input type="checkbox" id="switch" class="switch">
        <input type="radio" id="switch_r" name="radio" class="switch">
        <div class="clear"></div>
        <label for="switch_c">Circle Shaped Switch</label>
        <input type="checkbox" id="switch_c" class="switch circle">
        <input type="radio" id="switch_c_r" name="radio" class="switch circle">
    </fieldset>
    <fieldset>
        <legend>Others</legend>
        <label for="select_box">Select</label>
        <label class="select">
            <select name="" id="select_box">
                <option value="elem1">Elem1</option>
                <option value="elem2">Elem2</option>
                <option value="elem3">Elem3</option>
                <option value="elem4">Elem4</option>
                <option value="elem5">Elem5</option>
            </select>
        </label>
        <label for="range">Range</label>
        <input type="range" id="range">
    </fieldset>
</form>

Colors

Tako has in its theme a default color and accept and cancel one, but you can also use other colours

<p class="blue">blue</p>
<p class="red">red</p>
<p class="yellow">yellow</p>
<p class="black">black</p>
<p class="white">white</p>
<p class="grey">grey</p>
<p class="green">green</p>
<p class="pink">pink</p>
<p class="purple">purple</p>
<p class="brown">brown</p>
<p class="orange">orange</p>

Modificators

Tako has several modificators, these modificators allows to change the interface or add some functionality

data-article=article_"id"

Add data-article with the article id to listen to the tap event and navigate to the article

<button data-article="article2">Go to article2</button>

data-section="section_id"

Add data-section with the section id to listen to the tap event and navigate to the section

<button data-section="section2">Go to section2</button>

data-action="aside"

Add data-action="aside" to listen to the tap event and toggle the aside

<button data-action="aside">Toggle aside</button>

data-visible="section_id"

Add data-visible with the section id to make an element only visible when a particular section is active

<span data-visible="section4">This will only be shown when section4 is active</span>

data-device="phone/tablet"

Add data-device="phone" to make something visible only in phones (phone view) and data-device="tablet" to make visible for tablet and desktop view

<p data-device="phone">This is only seen in phone mode</p>
<p data-device="tablet">This is only seen in tablet mode</p>

Counters

This is not really a modificator is an element that you can add inside header and footer buttons or aside li elements

<header>
    <nav class="left">
        <button>Unread<span class="counter">5</span></button>
    </nav>
    <h1>TaKo</h1>
</header>
<footer>
    <nav>
        <div><button>Messages<span class="counter">84</span></button></div>
    </nav>
</footer>
<aside>
    <ul>
        <li>Friends <span class="counter">125</span></li>
    </ul>
</aside>

Icons

Tako has an icon library, you can see all the icons here

<button class="icon ok">Success</button>

The icons can also be animated by adding the animated class, spin named icons will spin while the others will blink

<button><span class="icon spin1 animated"></span><span>Spin</span></button>
<button><span class="icon ok animated"></span><span>Blink</span></button>

Javascript Tako javascript API

.init()

Tako initializer function

Type Description
Object(Optional) An object with the init options: articles property contains the list of articles to load asynchronously. 
Tako.init({"articles": ["article2.html"]});

.onReady()

This function receives function that will be loaded when Tako has finished loading.

Type Description
Function A callback function to launch when Tako has finished loading. 
Tako.onReady(function(){
    console.log("LOADED");
});

.Article()

Method to handle articles.

Type Description
String(Optional) The id of the article to load, if there is no string it returns the current article node. 
Tako.Article("main");
console.log(Tako.Article()); //prints the current article node

.Article.title()

Changes the title of an article

Type Description
String The html code that will go inside the article title's h1 tag.
String(Optional) The article id, if is not provided it will change the current one. 
Tako.Article.title("Hello Tako", "main");
Tako.Article.title("Hello Tako");

.Section()

Method to handle sections

Type Description
String(Optional) The id of the section to load, if there is no string it returns the current section node. 
Tako.Section("buttons");
console.log(Tako.Section()); //prints the current section node

.Aside.show()

Shows the aside

Type Description 
Tako.Aside.show());

.Aside.hide()

Hides the aside

Type Description 
Tako.Aside.hide());

.Aside.toggle()

Toggles the aside

Type Description 
Tako.Aside.toggle());

.Connection.isOnline()

Returns if there is connection to internet or not

Type Description
Return Boolean object, true if there is connection and false if there is not 
console.log(Tako.Connection.isOnline()); //Connection state

.Connection.onChange()

Listener to connection change

Type Description
Function Callback function that will receive a boolean parameter representing if current state is online or not. 
var connectionChange = function(online){
    if(online){
        alert("App now is online");
    }else{
        allert("App now is offline");
    }
};
Tako.Connection.onChange(connectionChange);

.Storage & .Session

LocalStorage and SessionStorage engine for key/value storage

.set()

Store data in the storage

Type Description
String A string representing the key of the object
Data The data to store, it can be number, string, object... 
Tako.Storage.set("name", "Inigo Gonzalez");
Tako.Session.set("name", "Inigo Gonzalez");

.get()

Retrieve data from storage

Type Description
String A string representing the stored key
Return An object or String of the data stored 
Tako.Storage.get("name");
Tako.Session.get("name");

.remove()

Delete data from storage

Type Description
String A string representing the stored key 
Tako.Storage.remove("name");
Tako.Session.remove("name");

.clear()

Clear all the storage

Type Description 
Tako.Storage.clear();
Tako.Session.clear();

.ProgressBar()

Add a progressbar wherever you want

Create

Create the progressbar

Type Description
String The id of the container you want to contain the progressbar.
Number(Optional) The initial percent, 0 by default. 
var progress = new Tako.ProgressBar("progress", 10);

Percent

Set the progressbar's percent, usng the created object

Type Description
Number The percent value to set. 
progress.percent(50);

Remove

Remove the progressbar

Type Description 
progress.remove();

Notifications

You can show diferent kind of notifications

.success()

A success notification

Type Description
String(Optional) A string specifying the icon to use, if null it uses ok
String The title for the notification
String The message to display
Number(Optional) The number of seconds to show the notification, if null it will be shown until the user hits it
Function(Optional) A callback function to load after hiding the notification 
Tako.Notification.success("ok", "Success!!","Everything worked fine", null, function(){console.log("SUCCESS CB");});

.error()

An error notification

Type Description
String(Optional) A string specifying the icon to use, if null it uses cancel
String The title for the notification
String The message to display
Number(Optional) The number of seconds to show the notification, if null it will be shown until the user hits it
Function(Optional) A callback function to load after hiding the notification 
Tako.Notification.error(null, "Error!!","Something went wrong", 3, function(){console.log("ERROR CB");})

.confirm()

A notification that asks user to confirm or deny

Type Description
String(Optional) A string specifying the icon to use, if null it uses help-circled
String The title for the notification
String The message to display
String(Optional) The text to show in the accept button, null value will show Accept
String(Optional) The text to show in the cancel button, null value will show Cancel
Function A callback function to load after clicking a choice, it will receive a boolean result with true if the user hits accept and false if he doesn't 
var callback = function(result){
    if(result){
        alert("I know you like them!!");
        console.log("I know you like them!!");
    }else{
        alert("Well, I hope at least you like our TaKo");
        console.log("Well, I hope at least you like our TaKo");
    }
};
Tako.Notification.confirm(null, "Question", "Do you like TaKos", "Of course", "Not much", callback);

.loading()

A loading notification

Type Description
String(Optional) A string specifying the text to show, if title is specified the notification show everything in a box, if not only shows a spinner
Number(Optional) The number of seconds to show the notification, if null it will be shown until hide function is called
Function(Optional) A callback function to load after hiding the notification 
Tako.Notification.loading("Loading", 5, function(){console.log("LOADING CB");})

.progress()

A notification with a progressbar

Type Description
String(Optional) A string specifying the icon to use
String The title for the notification
String The message to display
Number(Optional) The number of seconds to show the notification, if null it will be shown until the user hits it
Function(Optional) A callback function to load after hiding the notification
Return An instance of ProgresBar to set the percent, if the percent is 100 the notification will be hidden 
var progress = Tako.Notification.progress("spin1 animated", "Downloading", "Please wait until your download is completed");
progress.percent(20);
progress.percent(60);
progress.percent(100);

.custom()

A customizable notification notification

Type Description
String The title for the notification
String The message to display
Boolean If true it will show a close button, alse the way to hide it is with the hide function, true by default
String A list of classes to add to the notification
Number(Optional) The number of seconds to show the notification, if null it will be shown until the user hits it
Function(Optional) A callback function to load after hiding the notification 
var title = "Custom";
var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus auctor convallis. Aliquam eget ipsum a velit pulvinar elementum vitae non dolor. Nullam dui metus, tincidunt non dolor eu, laoreet auctor tellus. Suspendisse vestibulum scelerisque nibh non scelerisque. Cras eget lobortis orci. Vestibulum ultrices enim mattis fermentum tristique. Nunc ultricies feugiat tellus, ut facilisis est dignissim nec. Vivamus molestie sem vel euismod vestibulum.";

var callback = function(){
    console.log("Custom is closed")});
};

Tako.Notification.custom(title, content, true, "", null, callback);

.hide()

Hide the current notification

Type Description 
Tako.Notification.hide();

.Pull_Refresh()

Add Pull & Refresh to an element

Type Description
String The id of the container.
Object An object with the options for the pull & refresh:

pullLabel: String to show when pulling down, "Pull to refresh" by default

releaseLabel: String to show when the user can release to refresh, "Release to refresh" by default

refreshLabel: String to show when refreshing, "Loading..." by default

onRefresh: Function to launch when refresh is launched
Return An instance of the Pull & Refresh with the hide method (to hide it after refreshing) 
 var options = {
    onRefresh:function(){
        setTimeout(function(){
            alert("Refresh finished");
            puller.hide()}, 3000);
    }
};
var puller = Tako.Pull_Refresh("main", options);

Database

To handle the databases, Tako uses webdb

But instead of creating a new instance, you can find all the methods (create, select, insert, update, delete, drop...) under Tako.DB namespace

Dom & Ajax

To handle Dom & Ajax Tako uses zepto.js

Gestures

To handle gestures Tako uses hammer.js