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 >

Top Nav

Application of Responsee navigation is very simple and intuitive, while result is fully operational on large-size as well as small-size screens. The main navigation bar supports 3 levels of branching. In case parent item has any child item, number of child item amount is added after name of parent item. If the main navigation bar is displayed on small-size screens, navigation icon is displayed and its items are automatically displayed as accordion. For correct working of navigation it is necessary to use entry:

<nav>
<p class="nav-text"></p> 
<div class="top-nav">
... 
</div>
</nav>

Thanks to application of “nav-text” class navigation icon will be displayed on small-size screens. In case you want to display besides icon also description of navigation, use the following entry:

<nav>
<p class="nav-text">Custom nav text</p> 
<div class="top-nav">
... 
</div>
</nav>

In case the navigation item is active (particular sub-website with identical url address as reference in menu is displayed), “active-item” class is automatically allocated to active “li” tag.

Basic navigation bar with three levels of branching

<div class="line">
<nav>
<p class="nav-text">Custom menu text</p> 
<div class="top-nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Product</a>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a>
<ul>
<li><a href="">Product 3-1</a></li>
<li><a href="">Product 3-2</a></li>
<li><a href="">Product 3-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Company</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
</div>

Icon Chevron down

In case, you want to display arrow instead of figure illustrating number of submenu items, use the following entry:
<div class="line">
<nav>
<p class="nav-text">Custom menu text</p> 
<div class="top-nav">
<ul class="chevron">
<li><a href="">Home</a></li>
<li><a href="">Product</a>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a>
<ul>
<li><a href="">Product 3-1</a></li>
<li><a href="">Product 3-2</a></li>
<li><a href="">Product 3-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Company</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
</div>
It is sufficient to add class “.chevron” to the main “ul” element of navigation.

Navigation bar with search form

<div class="line">
<nav>
<p class="nav-text">Custom menu text</p>
<!--Left side-->
<div class="s-12 l-9">
<div class="top-nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Product</a></li>
<li><a href="">Company</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<!--Right side-->
<div class="s-12 l-3">
<form class="customform" style="padding: 0.625em;" action="http://google.com/">
<div class="s-7"><input type="text"  value="Search form" title="Search form"/></div>
<div class="s-5"><button type="submit">Search</button></div>
</form>
</div>
</nav>
</div>
Responsee Showcase

Responsee is still developing

Receive news about this development