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 >

Buttons

Responsee offers stylish modern buttons, which contain: submit button style, cancel button style, reload button style, disabled button style and default button. The buttons are divided by color.

Default Buttons:

<div class="line">         	          
  <a class="button margin-bottom" href="#">Button</a>			
  <a class="button submit-btn margin-bottom" href="#">Submit Button</a>		
  <a class="button cancel-btn margin-bottom" href="#">Cancel Button</a>
  <a class="button reload-btn margin-bottom" href="#">Reload Button</a>
  <a class="button disabled-btn margin-bottom" href="#">Disabled Button</a>		         
</div>

Buttons with Margins:

<div class="line">         	
  <div class="margin">	           
    <div class="s-12 m-6 l-five">
      <a class="button s-12 margin-bottom" href="#">Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button submit-btn s-12 margin-bottom" href="#">Submit Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button cancel-btn s-12 margin-bottom" href="#">Cancel Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button reload-btn s-12 margin-bottom" href="#">Reload Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button disabled-btn s-12 margin-bottom" href="#">Disabled Button</a>
    </div>  		
  </div>         
</div>

Rounded Corner Buttons:

<div class="line">         	
  <div class="margin">	           
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn s-12 margin-bottom" href="#">Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn submit-btn s-12 margin-bottom" href="#">Submit Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn cancel-btn s-12 margin-bottom" href="#">Cancel Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn reload-btn s-12 margin-bottom" href="#">Reload Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn disabled-btn s-12 margin-bottom" href="#">Disabled Button</a>
    </div>  		
  </div>         
</div>

Full Rounded Corner Buttons:

<div class="line">         	
  <div class="margin">	           
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn s-12 margin-bottom" href="#">Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-full-btn submit-btn s-12 margin-bottom" href="#">Submit Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-full-btn cancel-btn s-12 margin-bottom" href="#">Cancel Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-full-btn reload-btn s-12 margin-bottom" href="#">Reload Button</a>
    </div>			
    <div class="s-12 m-6 l-five">
      <a class="button rounded-full-btn disabled-btn s-12 margin-bottom" href="#">Disabled Button</a>
    </div>  		
  </div>         
</div>

Buttons with Icons:

<div class="line">         	          
  <a class="button rounded-full-btn margin-bottom" href="#"><i class="icon-star_empty"></i> Button</a>			
  <a class="button rounded-full-btn submit-btn margin-bottom" href="#"><i class="icon-check"></i> Submit Button</a>		
  <a class="button rounded-full-btn cancel-btn margin-bottom" href="#"><i class="icon-cross_mark"></i> Cancel Button</a>
  <a class="button rounded-full-btn reload-btn margin-bottom" href="#"><i class="icon-reload"></i> Reload Button</a>
  <a class="button rounded-full-btn disabled-btn margin-bottom" href="#"><i class="icon-chevron_left"></i> Disabled Button</a>		         
</div>
Responsee Showcase

Responsee is still developing

Receive news about this development