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.
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:
<link rel="stylesheet" href="style/robo.css" type="text/css"/>
<script src="js/robo.js" type="text/javascript"></script>
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
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:
<div class="row">
<div class="column width-2"> ... </div>
<div class="column width-10"> ... </div>
</div>
Easily division the columns to create complex layouts. To divide the columns with using class .width-x For 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>
With the using class .offset-x you can move the sections from the this location to other up to eleven columns. For 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>
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:
<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>
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:
<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>
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:
<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>
Creating a tabbed component is actually a simple task. If you want create tabs add the class .tabs to the <div> For example:
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.
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.
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.
<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>
If you can alter the vertical and horizontal of position of tabs add the classes .right to tabs. For example:
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.
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.
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.
<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>
Default position is horizontal but if you want vertical position add the class .vertical to tabs For example:
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.
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.
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.
<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>
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:
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.
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.
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.
<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>
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:
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.
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.
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.
<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>
By using the class .icon-toggle in a li > a you will add the icons ► - when section closed and ▼ - when section opens.
For example:
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.
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.
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.
<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>
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:
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.
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.
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.
<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>
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
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.
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.
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.
<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>
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 |
<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>
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 |
<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 |
<table class="table zebra un-border">
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
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:
<button> ... </button>
<button class="medium">...</button>
<a href="#" class="btn">...</a>
<a href="#" class="btn medium">...</a>
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:
<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>
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:
<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>
You can create your style for checkboxes via JS plugin very easy with us framework. For 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>
You can create your style for radio buttons via JS plugin very easy with us framework. For 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>
You can use our UI design of select box instead standard html design of select box.
And also you can adding own class on select this automatic will be adding creating dropdown
and "SELECT" must write name attribute because this name will be dropdown ID
For example: Dropdown ID Will be so #dropdown-[SELECT NAME]
<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>
The use our custom switch more suitable for all websites. Our framework has 2 styles of switches: circle (default) and square. For 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>
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:
<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>
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.
<i class="icon-lab medium"></i>
<h5 class="icon-location">Location</h5>
<h4 class="icon-mail icon-right">Send mail</h4>
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:
<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>
You can choose your favorite icon class in this icon list and add to elements.
<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>
<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>
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:
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" />
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:
<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>
If you want to insert audio add the class .audio to div. For 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>
If you want to insert video add the class .video to div. For 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>
In which div you want looks the loading to this div add the class .loading For example:
<div class="loading">
</div>
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
<blockquote>
...
<cite> ... </cite>
</blockquote>
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:
Lorem ipsum dolor sit amet, netus justo, sed volutpat at et. Posuere at dictum sollicitudin...
<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>
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
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