lightweight responsive css frameworkWhat's New in Version 5

lightweight responsive css framework

New Owl Carousel v2.2.1

We added completely new Owl Carousel v2.2.1. The new version comes with lots of new features and even more user friendly API.
read more >

lightweight responsive css framework

Tabs with URL hash

This is great for when you want to open a specific tab by the URL. This feature can be turned off or on for each tab separately.
read more >

lightweight responsive css framework

New maximum width size 1520px

We added new size of maximum width - 1520px (95rem). 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

Breadcrumb

The breadcrumb allows users easy to keep track of their locations within websites. And now, you can find it in Responsee framework.
read more >

lightweight responsive css framework

More sizes for your layouts

We added two new sizes xl and xxl for better works with a layout for different types of a devices and a screens. Now Responsee contains sizes s, m, l, xl and xxl.
read more >

lightweight responsive css framework

Virtua and Designery

Completely new 2 templates named Virtua and Designery comes together with new edition of Responsee. You can look forward to excellent design and as usually completely free! We also upgraded all the other templates for Responsee 5.
read more >

lightweight responsive css framework

Sliding navigation panel

We added new great feature! Thanks to the sliding navigation panel, you can place the web site menu outside of the browser screen. This solution is fancy and very effective.
read more >

lightweight responsive css framework

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>
Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase

Responsee is still developing

Receive news about this development