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 >

Responsive Tabs

Thanks to Responsive Tabs you easily distribute the content to particular sections without necessity of switching among sub-websites. Responsive Tabs have well-arranged structure and their activation is very intuitive and simple.

Important classes:

.tabs – selector for Responsive Tabs container
.tab-item – selector for one tab item
.tab-active – selector for active tab item
.tab-label – selector for tab item label (tabs navigation label)
.tab-active – selector for active tab item label
.tab-content – selector for tab content

Correct structure of Responsive Tabs:

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn">First Tab</a>
    <div class="tab-content">
      <h2>First Tab Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label">Second Tab</a>        
    <div class="tab-content">
      <h2>Second Tab Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label">Third Tab</a>
    <div class="tab-content">
      <h2>Third Tab Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>
First Tab

First Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Second Tab

Second Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Third Tab

Third Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Responsive Tabs with icon in navigation:

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn"><i class="icon-message"></i> First Tab</a>
    <div class="tab-content">
      <h2>First Tab Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label"><i class="icon-star"></i> Second Tab</a>        
    <div class="tab-content">
      <h2>Second Tab Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label"><i class="icon-heart"></i> Third Tab</a>
    <div class="tab-content">
      <h2>Third Tab Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>
First Tab

First Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Second Tab

Second Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Third Tab

Third Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Responsee Showcase

Responsee is still developing

Receive news about this development