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 >

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 >

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 >

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 >

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 >

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 >

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 >

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-960size-1140size-1280size-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

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).

Responsee CSS framework and our free templates is under the MIT license and you are free to use on anything you like. Do not forget, please, that components MFG labs icon set and OWL carousel have their own licence terms and conditions, which you can find on home websites of the projects.