Simple. Lightweight. Beautiful

Examples:

• Responsiva - Simple Grid system
• Responsiva - Simple Grid [RTL]
• Responsiva - Stuck Grid system
• Responsiva - Stuck Grid system [RTL]
• Responsiva - MOB Grid system
• Responsiva - MOB Grid system [RTL]

Responsiva Extra Examples:

• Responsiva - Accordion

Features

• lightweight
• simple & clear
• 12 columns layout
• helper classes
• rtl support (responsiva.rtl.css [under development])
• created by developers for developers
• very clear grid system

Usage

Install with bower:

bower install responsiva

1) include Responsiva in your HTML/Theme

<link rel="stylesheet" type="text/css" href="responsiva.css">

2) to add RTL support to your HTML/Theme, add responsiva.rtl.css after the main responsiva.css file:

<link rel="stylesheet" type="text/css" href="responsiva.rtl.css">

3) Basic layout example:

<div class="main_container">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
</div>

4) Mobile & Desktop Grid system [Example]:

<div class="main_container">
<div class="row">
<div class="col-8 mob-6"></div>
<div class="col-4 mob-6"></div>
</div>
<div class="row">
<div class="col-7 mob-8"></div>
<div class="col-5 mob-4"></div>
</div>
</div>

5) Grid row without 'margin-bottom'

<div class="row end">

6) Display elements on desktop only

<div class="desktop_only">

7) Display elements on mobile devices only

<div class="mobile_only">

Helper classes

<div class="error error-border"> error error-border </div>

<div class="warning warning-border"> warning warning-border </div>

<div class="success success-border"> success success-border </div>

4) align-center, align-left, align-right

5) bold, italic, underline

6) h1 - h6

6) class "hide" - hide contents from desktop & mobile screens

6) class "show" - show contents from desktop & mobile screens

ToDo List

• simple social icon pack
• jQuery functionality (accordion, popups etc...)
• helper classes to fetch specific mobile devices

Responsiva recommends

For more responsive & mobile friendly code we recommend:

• DEVICE.JS [GITHUB]

Authors and Contributors

Developed by Alexander Volkov