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