Responsee version lightweight responsive css frameworkWhat's New in Version 7

Responsive timeline

Responsive timeline

Thanks to the timeline, you can show an events in the handy form. Each event can be presented using an icon or an image.
read more >

New free template Financer

New free template Financer

Completely new template named Financer comes 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 7.
read more >

Accordion

Accordion

Thanks to the accordion, you can display a huge contents even in a limited amount of space. Responsee Accordion supports an unlimited number of nested accordions. Thanks to this, you can divide a content into more and more smaller parts.
read more >

Responsive Modals

Responsive Modals

Thanks to Modals you can display a content in simple lightbox effect over particular page content. Modals may contain common text, headlines, images, buttons, iframes and a content of modal can be divided into the columns.
read more >

Ability to display the mobile navigation on the right

Ability to display the mobile navigation on the right

Thanks to the class "mobile-nav-right" you can show the mobile navigation on the right.
read more >

lorem ipsum generator professional logo generator

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.
top-nav Defines the horizontal navigtion container (top main nav).
mobile-nav-right The class move the mobile navigation panel to the right (default position is left side).
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-xl 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.
accordion Defines the main accordion container.
accordion-section Defines one accordion section.
accordion-title Defines the title of section. This element is the title of the button.
accordion-content Defines the content of accordion section. This element can contain another nested accordion element.
active-accordion-section Defines the open accordion section.
modal-button Defines the button to display a modal window.
modal-close-button Defines the button to close a modal window.
modal Defines the modal window (content of modal window).
timeline-container Defines the main timeline container.
timeline-block Defines one timeline section.
timeline-content Defines the content of timeline section.
timeline-icon Defines the timeline container for an icon or an image.
timeline-date Defines the timeline date element.
Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase