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

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 Standard Grid System section. and System based on CSS Grid 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 Define standard grid system and sets width of row in accordance with applied class “size-960” or “size-1140” or “size-1280” or “size-1520”.
grid Define grid system based on CSS Grid and sets width of row in accordance with applied class “size-960” or “size-1140” or “size-1280” or “size-1520”. Practical utilization of the class you can find in template Bricker lite.
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. Works only if you use standard grid system (layout based on “line” class).
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-row-1 up to s-row-12 Defines number of element rows on small-size screens.
Works only if you use CSS Grid system (layout based on “grid” class).
m-row-1 up to m-row-12 Defines number of element rows on medium-size screens.
Works only if you use CSS Grid system (layout based on “grid” class).
l-row-1 up to l-row-12 Defines number of element rows on large-size screens.
Works only if you use CSS Grid system (layout based on “grid” class).
xl-row-1 up to xl-row-12 Defines number of element rows on xlarge-size screens.
Works only if you use CSS Grid system (layout based on “grid” class).
xxl-row-1 up to xxl-row-12 Defines number of element rows on xxlarge-size screens.
Works only if you use CSS Grid system (layout based on “grid” class).
s-offset-1 up to s-offset-12 Element offset (number of empty columns) from left on small-size screens.
Works only if you use standard grid system (layout based on “line” class).
m-offset-1 up to m-offset-12 Element offset (number of empty columns) from left on medium-size screens.
Works only if you use standard grid system (layout based on “line” class).
l-offset-1 up to l-offset-12 Element offset (number of empty columns) from left on large-size screens.
Works only if you use standard grid system (layout based on “line” class).
xl-offset-1 up to xl-offset-12 Element offset (number of empty columns) from left on xlarge-size screens.
Works only if you use standard grid system (layout based on “line” class).
xxl-offset-1 up to xxl-offset-12 Element offset (number of empty columns) from left on xxlarge-size screens.
Works only if you use standard grid system (layout based on “line” class).
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. Works only if you use standard grid system (layout based on “line” class).
s-order-1 up to s-order-12 Defines order of element on small-size screens (the number define order of element in the layout).
Works only if you use CSS Grid system (layout based on “grid” class).
m-order-1 up to m-order-12 Defines order of element on medium-size screens (the number define order of element in the layout).
Works only if you use CSS Grid system (layout based on “grid” class).
l-order-1 up to l-order-12 Defines order of element on large-size screens (the number define order of element in the layout).
Works only if you use CSS Grid system (layout based on “grid” class).
xl-order-1 up to xl-order-12 Defines order of element on xlarge-size screens (the number define order of element in the layout).
Works only if you use CSS Grid system (layout based on “grid” class).
xxl-order-1 up to xxl-order-12 Defines order of element on xxlarge-size screens (the number define order of element in the layout). Works only if you use CSS Grid system (layout based on “grid” class).
line-full-width Class that is used as a replacement for a class line. With this class, content will be correctly displayed across the full width of a browser.
grid full Combination of classes that makes the layout based on CSS Grid system appear correctly across the full width of a browser.
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