lightweight responsive css frameworkWhat's New in Version 6

lightweight responsive css framework

Layout based on CSS Grid

CSS Grid is a revolutionary tool for creation of responsive layouts which is accessible right in CSS. We have implemented several accomplishments to Responsee which CSS Grid offers (real number of solutions and possibilities offered by CSS Grid is, however, broader). By means of CSS Grid Responsee gains possibilities which were not possible before and now more flexible layouts can be created.
read more >

lightweight responsive css framework

New free templates Bricker and Bricker lite

Completely new 2 templates named Bricker and Bricker lite comes together with new edition of Responsee. The templates are based on new CSS Grid system. You can look forward to excellent design and as usually completely free! We also upgraded all the other templates for Responsee 6.
read more >

lightweight responsive css framework

Completely redesigned main navigation for small screens.

We have completely remade layout of navigation for displaying on mobile devices.
Now the navigation rolls out of a left side of a display which is by users’ experience more handy and intuitive solution.
read more >

lightweight responsive css framework

Aside Nav

Side 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. Side navigation bar uses simple accordion effect. For correct working of navigation it is necessary to use entry:

<div class="aside-nav">
... 
</div>

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

Basic side navigation bar with three levels of branching together with illustrative main content of website.

<div class="line">
<div class="margin">
<div class="s-12 l-4">
<div class="aside-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>
</div>
<div class="s-12 l-8">
<h1>Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
</p>
</div>
</div>
</div>

Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Hidden items of aside navigation on mobile device
(like the Top navigation).

It is no magic. It is sufficient to add class “.minimize-on-small” to element “div” with class “.aside-nav”” and add new element “<p class=”aside-nav-text”>Sidebar navigation</p>”.


<div class="line">
<div class="margin">
<div class="s-12 l-4">
<div class="aside-nav minimize-on-small">
<p class="aside-nav-text">Sidebar navigation</p>
<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>
</div>
<div class="s-12 l-8">
<h1>Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
</p>
</div>
</div>
</div>

Try resize your browser window.

Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase