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

Class Library

Responsee uses for work with content several classes with specific properties. Application of classes is very intuitive, and thanks to them the website is fully responsive. The classes are chronologically arranged according to significance and location in structure in the table listed under. More about structure you will find in Grid System section.

Class name Description
size-960
size-1140
size-1280
size-1520
sets width of website to 59.75rem or 71rem or 80rem or 95rem respectively
line sets width of row in accordance with applied class “size-960” or “size-1140” or “size-1280” or “size-1520”
margin adds blank space 1.25rem between particular elements
margin2x adds blank space 2.5rem between particular elements
align-content-left align website content to the left edge of screen
s-1 up to s-12 defines number of element columns on small-size screens
m-1 up to m-12 defines number of element columns on medium-size screens
l-1 up to l-12 defines number of element columns on large-size screens
xl-1 up to xl-12 defines number of element columns on xlarge-size screens
xxl-1 up to xxl-12 defines number of element columns on xxlarge-size screens
s-five, m-five, l-five, xl-five, xxl-five Those classes have exactly the same functions as “s-…”, “m-…” and “l-…” classes however, thanks to their application you will manage to display content on website in five equally wide columns.
s-offset-1 up to s-offset-12 element offset (number of empty columns) from left on small-size screens
m-offset-1 up to m-offset-12 element offset (number of empty columns) from left on medium-size screens
l-offset-1 up to l-offset-12 element offset (number of empty columns) from left on large-size screens
xl-offset-1 up to xl-offset-12 element offset (number of empty columns) from left on xlarge-size screens
xxl-offset-1 up to xxl-offset-12 element offset (number of empty columns) from left on xxlarge-size screens
s-offset-five, m-offset-five, l-offset-five, xl-offset-five, xxl-offset-five element offset (number of empty columns) from left on xxlarge-size screens
nav-text on small-size screens it displays navigation icon in the main navigation bar, eventually optional description of navigation
active-item 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 added to active “li” tag.
minimize-on-small hidden items of aside navigation on small-size screens
aside-nav-text on small-size screens it displays navigation icon in the aside navigation bar, eventually optional description of navigation (when you are using class “.minimize-on-small”)
hide-xxl hides element on xxlarge-size screens
hide-xxl hides element on xlarge-size screens
hide-l hides element on large-size screens
hide-m hides element on medium-size screens
hide-s hides element on small-size screens
right moves element to the right side from position, which has in html structure. It is applicable e.g. for displacement of sidebar, which you want to display above the main content on small-size screen, however on large-size screen you want to display it on left side. In such case you can use “right” class for designation of the main content, which is to be displaced to the right of the sidebar, although it is located above the sidebar in html structure (and on small-size screen).
left The element floats to the left (like a columns)
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
text-center align text to center
text-right align text to right
button sets to element the button styles
submit-btn green button style
cancel-btn red button style
reload-btn orange button style
disabled-btn light gray button style and set cursor to not-allowed
rounded-btn sets border radius to 4px
rounded-full-btn sets border radius to 100px (full rounded)
chevron should menu item has other submenus, it can be marked either with preset figure expression of number of items in submenu, or it can be marked with arrow by simple adding-in “chevron” class to “ul” element.
padding adds to element padding 10px
center aligns element, which has less than 12 columns, to the center.
full-img set image to “max-width: none; width:100%;”
box adds to element padding 1.25em, sets colour of background for #fff, sets width of element for 100% value. The class serves only for exhibition of element distribution without any other classes or properties :)
margin-bottom Name of the class fully depicts property of the class :) The class adds margin-bottom 1.25rem property to element. Practical utilization of the class you can find in template Business
margin-bottom2x Name of the class fully depicts property of the class :) The class adds margin-bottom 2.5rem property to element.
slide-nav The class defines the sliding navigation panel. Practical utilization of the class you can find in template Designery
slide-content The class defines the content when sliding navigation panel feature is on. Practical utilization of the class you can find in template Designery
slide-to-left The class move the sliding navigation panel to the left. Practical utilization of the class you can find in template Designery
breadcrumb-nav The class turns on the breadcrumb function (add this class to a nav element).
tooltip-container defines the tooltip container
tooltip-content defines the tooltip content inside the tooltip container
tooltip-top, tooltip-bottom defines the tooltip position
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