lightweight responsive css frameworkWhat's New in Version 4

lightweight responsive css framework

Responsive sidebar navigation

We added option to switch on responsive sidebar navigation. You will manage it with addition of “minimize-on-small” class to “.aside-nav” element and adding a new “<p class="aside-nav-text">Sidebar navigation</p>” element. Thanks to it items of the sidebar navigation will be hiding on smaller mobile devices. The sidebar navigation will then behave as well as the main navigation.
read more >

lightweight responsive css framework

New margin2x size

We added option to set larger gap between particular columns. In case you want to use this setting, substitute “margin” class with new “margin2x” class. Thus you will set gap between columns for 2.5rem (when using standard “margin” class, the gap between columns will be only 1.25rem). Respective classes can be combined optionally.
read more >

lightweight responsive css framework

New maximum width size 1280px

We added new size of maximum width - 1280px (80rem). Thanks to this setting your content will have more space. This setting is ideal for websites with two sidebar panels, blogs on online shops.
read more >

lightweight responsive css framework

New fancy Icon Set

We added the second icon set - Simple Line Icons. The first icon set MFG Labs, however, remained sustained. Simple Line Icons offers set of 182 stylish icons formed from thin lines. Both sets can be optionally combined on a website. Total amount of icons you will find in Responsee is considerable 361 ones now.
read more >

lightweight responsive css framework

Amazing Tooltips

We added Tooltips! Thanks to Tooltips you can display auxiliary jumping content which will be displayed after mouse passes over particular text. Tooltips may contain ordinary text, picture, button, and its content can be divided into columns.
read more >

lightweight responsive css framework

Typography

We added styles for more complex typography. It contains titles, paragraphs, lists, blockquote, and many other elements. An interesting option is word wrap (text alignment) to the middle or to the right by simple adding of “text-center” class or “text-right” class.
read more >

lightweight responsive css framework

We are rem now

We changed primary units from “em” to “rem” (“rem” unites are relative to the root/body font-size). Thereby we finished support of older IE browsers.


lightweight responsive css framework

Optimization

We made several optimizations in code, we transferred responsee.js file into footer (for faster loading of a website), and we removed downloading of files needed for older IE browsers.


lightweight responsive css framework

Unfortunately, still older version of OWL Carousel

We tried to make update of OWL Carousel for version 2, however, we encountered several serious problems, which would delay appearance of a new Responsee version. Nevertheless we will proceed in work on incorporation of a new better OWL Carousel 2 version into our framework.
read more >

lightweight responsive css framework

Eleganter

Completely new template named Eleganter comes together with new edition of Responsee. As the name itself suggests, it is most elegant template. You can look forward to excellent design with as usually, fully free of charge! We also upgraded all the other templates for Responsee 4.
read more >

Grid System

Responsee is based on 12-column grid. For work with columns it uses classes “s-1” up to “s-12”, “m-1” up to “m-12” and “l-1” up to “l-12”. By means of those classes Responsee divides website for particular columns (“s” – display on small-size screen, “m” – display on medium-size screen, “l” – display on large-size screen). In case you want to display element differently on small-size, medium-size and large-size screen, use three classes – e.g. “s-12 m-6 l-4”. Thus the element will utilize 4 columns of 12 on large-size screen, 6 columns of 12 on medium-size screen and 12 columns of 12 on small-size screen. In case the element shall utilize equal number of columns in both sizes, use class “s” – e.g. “s-4”.
The classes “s-five”, “m-five” and “l-five” represent a special category. Those classes have exactly the same functions as “s-…”, “m-…” and “l-…” classes however, thanks to their application you will manage to display content on website in five equally wide columns.

Correct structure of website with Responsee framework is:

<div class="size-960">
<div class="line">
<div class="margin">
<div class="s-12 m-6 l-4"><div class="some class with background and padding">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="some class with background and padding">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="some class with background and padding">s-12 / m-6 / l-4</div></div>
</div>
</div>
</div>

Practical example of grid working (number 1 = class “s-1”):

s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4
1
1
1
1
1
1
1
1
1
1
1
1

Simple application of grid:

<div class="line">
<div class="s-12 m-6 l-4"><div class="box-dark">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="box-dark">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="box-dark">s-12 / m-6 / l-4</div></div>
</div>
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4

Application of grid with utilization of “margin” class.
Blank space between particular DIVs is 1.25rem:

<div class="line">
<div class="margin">
<div class="s-12 l-4"><div class="box-dark">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark">s-12 / l-4</div></div>
</div>
</div>
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4

Application of grid with utilization of “margin2x” class.
Blank space between particular DIVs is 2.5rem:

<div class="line">
<div class="margin2x">
<div class="s-12 l-4"><div class="box-dark">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark">s-12 / l-4</div></div>
</div>
</div>
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4

Combination of “margin” and “margin2x” classes.

<div class="line">
<div class="margin2x">
<div class="s-12 m-4 l-3">
<div class="aside-nav">
<ul>
<li><a>Home</a></li>
<li><a>Product</a></li>
<li><a>Company</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</div>
<div class="s-12 m-8 l-9">
<div class="margin">
<div class="s-12 l-4"><div class="box-dark margin-bottom">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark margin-bottom">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark margin-bottom">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark margin-bottom">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark margin-bottom">s-12 / l-4</div></div>
<div class="s-12 l-4"><div class="box-dark margin-bottom">s-12 / l-4</div></div>
</div>
</div>
</div>
</div>
s-12 / l-4
s-12 / l-4
s-12 / l-4
s-12 / l-4
s-12 / l-4
s-12 / l-4

Offset of columns:

In case you want to offset columns, use the following entry:
<div class="size-960">
<div class="line">
<div class="margin">               
<div class="s-12 m-4 l-3"><div class="some class with background and padding">l-3 / m-4</div></div>
<div class="s-12 m-4 l-3 m-offset-4 l-offset-3"><div class="some class with background and padding">l-3 / m-4 / l-offset-3 / m-offset-4</div></div>
<div class="s-12 m-12 l-3"><div class="some class with background and padding">l-3 / m-12</div></div>                  
</div>
</div>
</div>
l-3 / m-4
l-3 / m-4 / l-offset-3 / m-offset-4
l-3 / m-12

Align content to left:

In case you want to align website to the left edge of screen, use the following entry:
<div class="size-960 align-content-left">
<div class="line">
<div class="margin">
<div class="s-12 m-6 l-4"><div class="some class with background and padding">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="some class with background and padding">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="some class with background and padding">s-12 / m-6 / l-4</div></div>
</div>
</div>
</div>
It is no magic. It is sufficient to add class “.align-content-left” to “body” element or to top “div” element.

Application of “s-five” and “l-five” classes:

<div class="line">
<div class="margin">
<div class="s-12 l-five"><div class="box-dark">s-12 / l-five</div></div>
<div class="s-12 l-five"><div class="box-dark">s-12 / l-five</div></div>
<div class="s-12 l-five"><div class="box-dark">s-12 / l-five</div></div>
<div class="s-12 l-five"><div class="box-dark">s-12 / l-five</div></div>
<div class="s-12 l-five"><div class="box-dark">s-12 / l-five</div></div>
</div>
</div>
s-12 / l-five
s-12 / l-five
s-12 / l-five
s-12 / l-five
s-12 / l-five

Application of “center” class:

<div class="line">
<div class="s-12 l-4 center"><div class="box-dark">s-12 / l-4 / center</div></div>
<div class="s-12 l-6 center"><div class="box-dark">s-12 / l-6 / center</div></div>
<div class="s-12 l-8 center"><div class="box-dark">s-12 / l-8 / center</div></div>
</div>
s-12 / l-4 / center
s-12 / l-6 / center
s-12 / l-8 / center

Application of grid with various widths of columns:

<div class="line">
<div class="margin">
<div class="s-3"><div class="box-dark">s-3</div></div>
<div class="s-6"><div class="box-dark">s-6</div></div>
<div class="s-3"><div class="box-dark">s-3</div></div>
</div>
</div>
s-3
s-6
s-3

Application of grid with nested columns:

<div class="line">
<div class="margin">
<div class="s-3"><div class="box-dark">s-3</div></div>
<div class="s-6">
<div class="margin">
<div class="s-12 m-6 l-4"><div class="box-dark">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="box-dark">s-12 / m-6 / l-4</div></div>
<div class="s-12 m-6 l-4"><div class="box-dark">s-12 / m-6 / l-4</div></div>
</div>
</div>
<div class="s-3"><div class="box-dark">s-3</div></div>
</div>
</div>
s-3
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-3
Responsee Showcase

Responsee is still developing

Receive news about this development