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 >

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
sets width of website for 60rem, 71.25rem or 80rem respectively
line sets width of row in accordance with applied class “size-960” or “size-1140” or “size-1280”
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
s-five, m-five and l-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.
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-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 will 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 will 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.
Responsee Showcase

Responsee is still developing

Receive news about this development