Documentation

Robo Framework Version: 1.2

Getting started with RoboFramework very easy. RoboFramework is perfect to create of every difficulty site. RoboFramework is a front-end framework. This page will help you make your site more accessible. RoboFramework is supports modern web browsers like:

  • Safari
  • Firefox
  • Chrome
  • IE 8+
  • Opera
  • Others

Components

Robo framework is included more 20+ components and easy to use.
  • Grid systems
  • Navigation
  • Tabs
  • Icons
  • Buttons
  • Form elements
  • Accordion
  • Table
  • Boxes
  • Audio Player
  • Video Player
  • Loading widget
  • Responsive
  • Retina Ready
  • Blockquote
  • Helper classes
  • Other Elements

Installation

You can see the file scheme below.
File scheme:

  • style ▾
    • robo.css
    • icons.css
    • fonts ▾
      • robo.ttf
      • robo.woff
      • robo.otf
      • robo.svg
      • robo.eot
  • js ▾
    • robo.js
HTML scheme:

<link rel="stylesheet" href="style/robo.css" type="text/css"/>
<script src="js/robo.js" type="text/javascript"></script>

Configuration

By using this file you can choose the default colors of your site.
In robo.css in part 01. Custom Styling you can cuztomizable of style




Columns

A 12 column responsive grid for easy layout creation

The grid is composed of horizontal rows the max-width of the page of container. The rows form the outer layer of the layout and the columns form the inner layer of the layout. For example:

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
HTML Example
<div class="row"> 
   <div class="column width-2"> ... </div>
   <div class="column width-10"> ... </div>
</div> 

Division

The division of columns

Easily division the columns to create complex layouts. To divide the columns with using class .width-x For example:

4.4
4.4
4.4
6
HTML Example
<div class="row">
   <div class="column width-6">
      <div class="column width-4"> ... </div>
      <div class="column width-4"> ... </div>
      <div class="column width-4"> ... </div>
   </div>
   <div class="column width-6"> ... </div>
</div>

Offset

The moving of sections

With the using class .offset-x you can move the sections from the this location to other up to eleven columns. For example:

4w
1w
4w
HTML Example
<div class="row">
   <div class="column width-4"> ... </div>
   <div class="column width-1 offset-1"> ... </div>
   <div class="column width-4 offset-2"> ... </div>
</div>

Position

The rearrange of columns

By using classes .left-x and .right-x you can specify from which columns began or by using classes .centered in columns you can centered columns. For example:

left-10
right-2

Width-7 Centered
HTML Example
<div class="row">
   <div class="column width-2 left-10"> ... </div>
   <div class="column width-10 right-2"> ... </div>
   <div class="column width-7 centered"> ... </div>
</div>

Responsive

You can choose the columns width for any devices

You can choose the columns width for any devices For the tablet and mobile width add the class .auto-width
For the hidden of columns on tablet add the class .tablet-hide
For the hidden of columns on mobile add the class .mobile-hide
For the hidden of columns on mobile and tablets add the class .auto-hide For example:

Auto-width
Tablet hidden
Auto-width
Auto-width
Auto-width
Auto-width
Auto-hide
Auto-hide
HTML Example
<div class="row">
   <div class="column width-6 auto-width"> ... </div>
   <div class="column width-6 tablet-hide"> ... </div>
</div>

<div class="row">
   <div class="column width-6 auto-width"> ... </div>
   <div class="column width-6 auto-width"> ... </div>
</div>

<div class="row">
   <div class="column width-3 auto-width"> ... </div>
   <div class="column width-3 auto-width"> ... </div>
   <div class="column width-3 auto-hide"> ... </div>
   <div class="column width-3 auto-hide"> ... </div>
</div>

Grid items

This kind of columns can use for gallery, item list and etc.

Add the class .grid-items inside row.
If you want create auto margin between columns add only to columns the classes .width-x use only 2,3,4,6. For example:

Width - 6
Width - 6
Width - 4
Width - 4
Width - 4
Width - 3
Width - 3
Width - 3
Width - 3
Width - 2
Width - 2
Width - 2
Width - 2
Width - 2
Width - 2
HTML Example
<div class="row grid-items">
   <div class="column width-3"> ... </div>
   <div class="column width-3"> ... </div>
   <div class="column width-3"> ... </div>
   <div class="column width-3"> ... </div>
</div>



Tabs

Tabs are a very nice way of grouping lots of content into a very small space.

Creating a tabbed component is actually a simple task. If you want create tabs add the class .tabs to the <div> For example:

Data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

Displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

For the displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<div class="tabs"> 
  <ul>
    <li><a href="#tab1">  ... </a></li>
    <li><a href="#tab2">  ... </a></li>
  </ul> 
  
  <div class="content box"> 
    <div id="tab1" class="active"> ... </div>
    <div id="tab2"> ... </div>
  </div>
</div>

Tabs Align

Align & position of tabs

If you can alter the vertical and horizontal of position of tabs add the classes .right to tabs. For example:

Data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

Displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

For the displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<div class="tabs right"> 
  <ul>
    <li><a href="#tab1">  ... </a></li>
    <li><a href="#tab2">  ... </a></li>
  </ul> 
  
  <div class="content align-right"> 
    <div id="tab1" class="active"> ... </div>
    <div id="tab2"> ... </div>
  </div>
</div>
Vertical tabs

Default position is horizontal but if you want vertical position add the class .vertical to tabs For example:

Data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

Displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

For the displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<div class="tabs vertical"> 
  <ul>
    <li><a href="#tab1">  ... </a></li>
    <li><a href="#tab2">  ... </a></li>
  </ul> 
  
  <div class="content box"> 
    <div id="tab1" class="active"> ... </div>
    <div id="tab2"> ... </div>
  </div>
</div>

Tabs Extra Styles

You can to customized style of tabs also

If you want to deafault open view some section in same time add the class .active to section of <li> and to content of this <div>.
You can round the corners and alter size of sections of accordion. For to alter the radius of corners add the class .bradius-x (1,2,3,4) to tab of <li>. For to alter the size of sections add the classes .small , .medium, .large, .xlarge to tabs div
Add the custom icon class to li > a and you must use custom icon class from icon bar. For example:

Data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

Displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

For the displaying of data in tabular form you can use tables.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<div class="tabs medium"> 
  <ul>
    <li><a href="#tab1" class="icon-brain">  ... </a></li>
    <li><a href="#tab2" class="icon-lab">  ... </a></li>
  </ul> 
  
  <div class="content box"> 
    <div id="tab1" class="active"> ... </div>
    <div id="tab2"> ... </div>
  </div>
</div>



Accordion

Displays collapsible content panels for presenting information in a limited amount of space..

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.
For connect accordion to <ul> add the class .accordion For example:

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion"> 
   <li>
      <h3>
         <a href="#section1">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>

Toggle icons

Auto using toggle icon

By using the class .icon-toggle in a li > a you will add the icons ► - when section closed and ▼ - when section opens.
For example:

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion"> 
   <li class="active">
      <h3>
         <a href="#section1" class="icon-toggle">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2" class="icon-toggle">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>

Custom icons

Displays collapsible content

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.
For connect accordion to <ul> add the class .accordion For example:

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion"> 
   <li>
      <h3>
         <a href="#section1" class="icon-brain">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2" class="icon-lab">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>

Extrastyles

Displays collapsible content

If you want to deafault open view some section in same time add the class .active to section of <li>.
You can round the corners and alter size of sections of accordion. For to alter the radius of corners add the class .bradius-x (1,2,3,4) to section of <li>. For to alter the size of sections add the classes .small , .medium, .large, .xlarge to section

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion medium"> 
   <li>
      <h3>
         <a href="#section1">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>



Table

For the displaying of data in tabular form you can use tables.

For the integration of tables with framework tables add the class .table For example:

Number First Name Last Name
01 Leonard Cohen
02 Bob Marley
03 Jhon Lenon
04 Leonard Cohen
HTML Example
<table class="table hover-bg"> 
   <thead>
      <tr>
         <td>...</td>
         <td>...</td>
         <td>...</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>...</td>
         <td>...</td>
         <td>...</td>
      </tr>
   </tbody>
</table>
   

Table Extra Styles

With extra styles you can alter the size, color, rounded corners and borders.

You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag. The classes rounded corners has 5 size from 1 - 5. These classes used for all elements.
For to alter the size of tables add the classes .micro ,.small, .medium, .large or .xlarge to the table tag.
For the using alternating colors tables add the classes .zebra
If you want tables without inside borders add the class .un-border
For example:



Name Surname
Leonard Cohen
Bob Marley
HTML Example
<table class="table large"> 
   <tbody>
      <tr>
         <td>...</td>
         <td>...</td>
         <td>...</td>
      </tr>
   </tbody>
</table>


Number Name Surename
01 Leonard Cohen
02 Bob Marley
03 Jhon Lenon
01 Leonard Cohen
02 Bob Marley
HTML Example
<table class="table zebra un-border"> 
   <tbody>
      <tr>
         <td>...</td>
         <td>...</td>
         <td>...</td>
      </tr>
   </tbody>
</table>



Buttons

Buttons are aways needed on a website.

For creating buttons add the class a .btn or all button will be in this styles. If you want to alter the size of buttons add the classes .small , .medium, .large, .xlarge For example:





HTML Example
<button> ... </button>
<button class="medium">...</button>
<a href="#" class="btn">...</a>
<a href="#" class="btn medium">...</a>

Button Styling

Create buttons in different styles as below

For to alter the radius of corners of buttons add the class .bradius-x (1,2,3,4)
If you want on mouse condition on button it is growing add the class .growing
If you want the light version add the class .light
If want alter the style of border add one of these classes .dotted, .dashed,.thick
If you want the white text style add class .normal For example:

HTML Example
<a href="#" class="btn small bradius-1">...</a>
<a href="#" class="btn growing bradius-4 uppercase">...</a>
<a href="#" class="btn bradius-4 medium dashed light">...</a>
<a href="#" class="btn light large bradius-3">...</a>
<a href="#" class="btn xlarge normal">...</a>
<a href="#" class="btn embossed bradius-1">...</a>
<a href="#" class="btn wide bradius-1">...</a>

Button with icon

Buttons with special icons as in table below

If you can alter the vertical and horizontal of position of tabs add the classes .right to tabs. Default position is horizontal but if you want vertical position add the class .vertical to tabs. For example:

HTML Example
<a href="#" class="btn small icon-location"> ...</a>
<a href="#" class="btn icon-right icon-location"> ...</a>
<a href="#" class="btn embossed icon-charline bradius-1"> ...</a>
<a href="#" class="btn wide icon-close bradius-1"> ...</a>
<a href="#" class="btn medium icon-mail bradius-2 growingt"> ...</a>
<a href="#" class="btn large icon-seo light bradius-4 growing"> ...</a>
<a href="#" class="btn xlarge icon-seo light bradius-3 dashed"> ...</a>



Checkboxes

The special checkbox styles.

You can create your style for checkboxes via JS plugin very easy with us framework. For example:

HTML Example
// Checkbox checked:
<label class="checkbox">
   <input type="checkbox" name="checkbox-1" checked> 
   Checkbox
</label>

// Checkbox Unchecked:
<label class="checkbox">
   <input type="checkbox" name="checkbox-2"> 
   Checkbox checked
</label>

// Checkbox Disabled:
<label class="checkbox">
   <input type="checkbox" name="checkbox-3" checked disabled> 
   Checkbox disabled
</label>

// Checkbox Unchecked and Disabled:
<label class="checkbox">
   <input type="checkbox" name="checkbox-4" disabled> 
   Checkbox checked disabled
</label>

Radio buttons

The special radio button styles.

You can create your style for radio buttons via JS plugin very easy with us framework. For example:

HTML Example
// Radio button checked:
<label class="radio">
   <input type="radio" name="radiogroup1" checked> 
   Radio Button
</label>

// Radio button Unchecked:
<label class="radio">
   <input type="radio" name="radiogroup1"> 
   Radio Button
</label>

// Radio button Disabled:
<label class="radio">
   <input type="radio" name="radiogroup2" checked disabled> 
   Radio Button
</label>

// Radio button Unchecked and Disabled:
<label class="radio">
   <input type="radio" name="radiogroup2" disabled> 
   Radio Button
</label>
HTML Example
<select class="dropdown" name="select1">
   <option value="1">One</option>
   <option value="2" selected>Two</option>
   <option value="3">Three</option>
</select>

// HHTML result :

<div class="dropdown" id="dropdown-select1">
   <span>Two</span>
   <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three</li>
   </ul>
</div>

Switcher

The easy of creation and usage of a custom switch.

The use our custom switch more suitable for all websites. Our framework has 2 styles of switches: circle (default) and square. For example:













Switcher ON

Switcher of

Switcher Disbaled ON

Switcher Disbaled OFF
HTML Example
// Switch ON:
<label class="switch">
   <input type="checkbox" name="checkbox-1" checked> 
</label>

// Switch OFF:
<label class="switch">
   <input type="checkbox" name="checkbox-1"> 
</label>

// Switch ON Disabled:
<label class="switch">
   <input type="checkbox" name="checkbox-1" checked disabled> 
</label>

// Switch OFF Disabled:
<label class="switch">
   <input type="checkbox" name="checkbox-1" disabled> 
</label>

// Switch with text:
<label class="switch">
   <span class="on"> ON </span>
   <input type="checkbox" name="checkbox-1" disabled> 
   <span class="off"> OFF </span>
</label>

// Switch with icons & width:
<label class="switch width-2">
   <span class="on icon-chechk"></span>
   <input type="checkbox" name="checkbox-1" disabled> 
   <span class="off icon-close"></span>
</label>

Inputs

You can change the style of form elements.

To alter the radius of the border of input add the one of these classes .bradius-x (1,2,3,4)
If want alter the style of border of input add one of these classes .dotted, .dashed, .thick
You can alter the text align. For more information about it see the link
If you want the choosing version add the class .focus
If you add the class "input-bg" will be default background color.
IF you want without borders add the class .unborder
For example:











HTML Example
<input type="text" class="bradius-1 focus" placeholder="Name"/> 
<textarea class="bradius-1 focus" placeholder="Text"></textarea>

<input type="text" class="bradius-4 dashed" placeholder="Name"/> 

<div class="input icon-right  bradius-2">
   <span class="icon-search"></span>
   <input type="text" placeholder="Name"/> 
</div>

<div class="input icon-right  bradius-2">
   <span class="icon-location"></span>
   <input type="text" placeholder="Name"/> 
</div>

	



Icon sizes

Roboto font icons includes more 200+ icons.

For using icons add the class .icon-x You can easily alter the style of icons by using classes. Default position of icon left from text, but add the class .icon-right to class of .icon-x the icon will be on right from text.

Location

Send mail

HTML Example
<i class="icon-lab medium"></i>

<h5 class="icon-location">Location</h5>

<h4 class="icon-mail icon-right">Send mail</h4>

Icon Extra Styles

You can alter the some styles of icons

You can alter the size of icons by using one of these classes: .small , .medium, .large, .xlarge
If you want the icons will be inside of box add the .icon-box
If want alter the style of border of icon box add one of these classes .dotted, .dashed, .thick
For version with background add the class .icon-bg, but for without background add the class .normal
To alter the radius of border add the one of these classes .bradius-x (1,2,3,4) to the class of icon.
If you want circle border add the class .bradius-5 to class of icon. For example:

HTML Example
<div class="icon-brain small icon-box bradius-5"></div>
<div class="icon-brain medium icon-box box-bg bradius-5"></div>
<div class="icon-brain large icon-box dotted bradius-5"></div>
<div class="icon-brain xlarge icon-box dashed bradius-5"></div>
<div class="icon-brain xlarge icon-box dashed bradius-4"></div>
<div class="icon-brain xlarge icon-box solid bradius-3"></div>
<div class="icon-brain xlarge icon-box normal"></div>

Icon list

Here our full icon list

You can choose your favorite icon class in this icon list and add to elements.




HTML Example
<ul class="menu centered uppercase">
  <li><a href="#" class="icon-lab">  ... </a></li>
  <li class="sub"><a href="#">  ...  </a>
    <ul>
      <li><a href="#">  ... </a></li>
    </ul> 
  </li>
  <li class="active"><a href="#">  ... </a></li>
</ul> 
Responsive menu.

For responsive menu add to .menu only the class .responsive
And also add the element .compact-menu-icon to page, for hide and show menu For example:

<a class="compact-menu-icon hide tablet-show"> <fugure></fugure> </a> 
<ul class="menu responsive">
  <li><a href="#" class="icon-lab">  ... </a></li>
  <li class="sub"><a href="#">  ...  </a>
    <ul>
      <li><a href="#">  ... </a></li>
    </ul> 
  </li>
  <li class="active"><a href="#">  ... </a></li>
</ul> 



Retina Ready

Retina Ready is a new standard by the company "Apple"

On retina displays in 1 inc has more pixels because we can create retina ready on retina images displays will be more clear
If you want retina ready in robo.js file write the chosen elements or classes in place of example word
When device pixel of ratio is two then function automatic to selected image file names add @2x For example:

HTML Example
var retina_img = ""; // Default all imgs <img src file.jpg" /> 

OR

var retina_img = "img"; // element or class name all imgs will be <img src="file@2x.jpg" />



Boxes

You can easily alter the style of boxes by using classes.

To add the boxes effects add the class .box to elements.
If you want to alter the size of boxes add the classes .small , .medium, .large, .xlarge
If want alter the style of border add one of these classes .dotted, .dashed, .thick
For to alter the radius of corners of boxes add the class .bradius-x (1,2,3,4)
Default align of boxes left. If you want to alter of align of boxes see more the link
To alter the background color of boxes add the class .box-bg default style is background color.
If you want dark border add the class .dark-border For example:

Box
Box dark-border
Box dark-border
Box small
Box box-bg
Box medium
Box large
HTML Example
<div class="box"> ... </div>
<div class="box bradius-2 dark-border dashed"> ... </div>
<div class="box bradius-2 box-bg"> ... </div>
<div class="box bradius-2 medium box-bg icon-location"> ... </div>

Audio

Insert audio player

If you want to insert audio add the class .audio to div. For example:

Led Zeppelin Kashmir
HTML Example
<div class="audio"> 
  <a class="play"></a>
  <a class="stop"></a>

  <audio src="file.mp3"> 
    Your browser does not support HTML5 audio.
  </audio>
</div>

Video

Insert video player

If you want to insert video add the class .video to div. For example:

HTML Example
<div class="video"> 
  <a class="play"></a>
  <divclass="videofooter">
    <a class="stop"></a>
    <a class="pause"></a>
  </div> 
  
  <video src="file.mp4"> 
    Your browser does not support HTML5 video.
  </video>
</div>

Loading

Insert to loading animation

In which div you want looks the loading to this div add the class .loading For example:

HTML Example
<div class="loading"> 
</div>

Blockquote

Insert of blockquote

if you add the tag blockquote all of default blouckquote will be so: For example:

Lorem ipsum dolor sit amet, nulla ut sed dapibus orci suspendisse. Aliquam nulla rutrum at vel gravida orci, quis litora nisl dui blandit. Dolor tellus etiam. Nulla libero amet enim curabitur elit. Interdum ligula ante aenean ut, in at tempus neque morbi, eu ut sed, fringilla placerat inceptos erat, malesuada non congue wisi ut aliquet. Leonard Cohen
HTML Example
<blockquote> 
  ...
  <cite> ... </cite>
</blockquote>



Responsive classes

By using this classes can alter the screen size on others devices.

You can choose the columns width for any devices For the tablet and mobile width add the class .auto-width
For the hidden of columns on tablet add the class .tablet-hide
For the hidden of columns on mobile add the class .mobile-hide
For the hidden of columns on mobile and tablets add the class .auto-hide For example:

German sharped

Lorem ipsum dolor sit amet, netus justo, sed volutpat at et. Posuere at dictum sollicitudin...

HTML Example
<div class="row grid-items">
   <div class="column width-6 auto-width"> 
      <img src="img.jpg" class="full-width"/> 
   </div>
   <div class="column width-6 tablet-center auto-width">  
      ...
   </div>
</div>

Text Align

Using these classes can choose the align of text.

To alter the align of text add the classes .align-left, .align-center, .align-right but for others small screen devices add the classes .tablet-left, .tablet-center, .tablet-right and for mobile version add classes .mobile-left, .mobile-center, .mobile-right

Tablet Right
Align Right

Other classes

By using other classes you can alter others options.

For hide or show any elements add classes .hide, .show
If you want to create padding for all columns inside row add the class .grid-items to row.
If you want to create padding for selected columns inside row add the class .grid-item to column.
If you add class ".grid items" to row for all columns, except selected column add the class .no-padding to selected column.
If you want full width for selected elements add to this elements class .full-width