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

Standard Grid System

Responsee is lightweight but powerful responsive framework based on 12-columns grid.

How to set the maximum Page width:

Use the classes “size-960” or “size-1140” or “size-1280” or “size-1520” to set the maximum width of website content. You must add one of these classes to the “body” element:

<body class="size-1280"> ... </body>

How to work with the Columns

For work with the columns use following classes:
“s-1” up to “s-12”
“m-1” up to “m-12”
“l-1” up to “l-12”
“xl-1” up to “xl-12”
“xxl-1” up to “xxl-12”

By means of those classes Responsee divides website for particular columns (“s” – display on small size screen, “m” – display on medium size screen, “l” – display on large size screen, “xl” – display on xlarge size screen, “xxl” – display on xxlarge size screen).

In case you want to display element differently on small size, medium size, large size, xlarge size, xxlarge size screen, use five classes – e.g. “s-12 m-6 l-4 xl-3 xxl-2”. Thus the element will utilize 2 columns of 12 on xxlarge size screen, 3 columns of 12 on xlarge size screen, 4 columns of 12 on large size screen, 6 columns of 12 on medium size screen and 12 columns of 12 on small size screen. In case the element shall utilize equal number of columns in both sizes, use class “s” – e.g. “s-4”. It is also possible to use only 2 or 3 classes e.g. “s-12 m-6 l-4”.

The classes “s-five”, “m-five”, “l-five”, “xl-five” and “xxl-five” represent a special category. Those classes have exactly the same functions as “s-…”, “m-…”, “l-…”, “xl-…” and “xxl-…” classes however, thanks to their application you will manage to display content on website in five equally wide columns.

List of Sizes by screen size:

s size – from 0px to 480px (e.g. phone screen)
m size – from 481px to 768px (e.g. tablet screen)
l size – from 769px to 1140px (e.g. tablet screen)
xl size – from 1141px to 1366px (e.g. laptop screen)
xxl size – from 1367px (e.g. desktop screen)

Correct structure of website with Responsee framework is:

<div class="size-960">
  <div class="line">
    <div class="margin">
      <div class="s-12 m-6 l-4">
        <div class="some class with background and padding">s-12 / m-6 / l-4</div>
      </div>
      <div class="s-12 m-6 l-4">
        <div class="some class with background and padding">s-12 / m-6 / l-4</div>
      </div>
      <div class="s-12 m-6 l-4">
        <div class="some class with background and padding">s-12 / m-6 / l-4</div>
      </div>
    </div>
  </div>
</div>

Examples

Practical example of grid working (number 1 = class “s-1”):

s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4
1
1
1
1
1
1
1
1
1
1
1
1

Simple application of grid:

<div class="line">
  <div class="s-12 m-6 l-4">
    <div class="box-dark">s-12 / m-6 / l-4</div>
  </div>
  <div class="s-12 m-6 l-4">
    <div class="box-dark">s-12 / m-6 / l-4</div>
  </div>
  <div class="s-12 m-6 l-4">
    <div class="box-dark">s-12 / m-6 / l-4</div>
  </div>
</div>
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4

Application of grid with utilization of “margin” class.
Blank space between particular DIVs is 1.25rem:

<div class="line">
  <div class="margin">
    <div class="s-12 l-4">
      <div class="box-dark">s-12 / l-4</div>
    </div>
    <div class="s-12 l-4">
      <div class="box-dark">s-12 / l-4</div>
    </div>
    <div class="s-12 l-4">
      <div class="box-dark">s-12 / l-4</div>
    </div>
  </div>
</div>
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4

Application of grid with utilization of “margin2x” class.
Blank space between particular DIVs is 2.5rem:

<div class="line">
  <div class="margin2x">
    <div class="s-12 l-4">
      <div class="box-dark">s-12 / l-4</div>
    </div>
    <div class="s-12 l-4">
      <div class="box-dark">s-12 / l-4</div>
    </div>
    <div class="s-12 l-4">
      <div class="box-dark">s-12 / l-4</div>
    </div>
  </div>
</div>
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4

Combination of “margin” and “margin2x” classes.

<div class="line">
  <div class="margin2x">
    <div class="s-12 m-4 l-3">
      <div class="aside-nav">
        <ul>
          <li><a>Home</a></li>
          <li><a>Product</a></li>
          <li><a>Company</a></li>
          <li><a>Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="s-12 m-8 l-9">
      <div class="margin">
        <div class="s-12 l-4">
          <div class="box-dark margin-bottom">s-12 / l-4</div>
        </div>
        <div class="s-12 l-4">
          <div class="box-dark margin-bottom">s-12 / l-4</div>
        </div>
        <div class="s-12 l-4">
          <div class="box-dark margin-bottom">s-12 / l-4</div>
        </div>
        <div class="s-12 l-4">
          <div class="box-dark margin-bottom">s-12 / l-4</div>
        </div>
        <div class="s-12 l-4">
          <div class="box-dark margin-bottom">s-12 / l-4</div>
        </div>
        <div class="s-12 l-4">
          <div class="box-dark margin-bottom">s-12 / l-4</div>
        </div>
      </div>
    </div>
  </div>
</div>
s-12 / l-4
s-12 / l-4
s-12 / l-4
s-12 / l-4
s-12 / l-4
s-12 / l-4

Offset of columns:

In case you want to offset columns, use the following entry:

<div class="size-960">
  <div class="line">
    <div class="margin">
      <div class="s-12 m-4 l-3">
        <div class="some class with background and padding">l-3 / m-4</div>
      </div>
      <div class="s-12 m-4 l-3 m-offset-4 l-offset-3">
        <div class="some class with background and padding">l-3 / m-4 / l-offset-3 / m-offset-4</div>
      </div>
      <div class="s-12 m-12 l-3">
        <div class="some class with background and padding">l-3 / m-12</div>
      </div>
    </div>
  </div>
</div>
l-3 / m-4
l-3 / m-4 / l-offset-3 / m-offset-4
l-3 / m-12

Align content to left:

In case you want to align website to the left edge of screen, use the following entry:

<div class="size-960 align-content-left">
  <div class="line">
    <div class="margin">
      <div class="s-12 m-6 l-4">
        <div class="some class with background and padding">s-12 / m-6 / l-4</div>
      </div>
      <div class="s-12 m-6 l-4">
        <div class="some class with background and padding">s-12 / m-6 / l-4</div>
      </div>
      <div class="s-12 m-6 l-4">
        <div class="some class with background and padding">s-12 / m-6 / l-4</div>
      </div>
    </div>
  </div>
</div>
It is no magic. It is sufficient to add class “.align-content-left” to “body” element or to top “div” element.

Application of “s-five” and “l-five” classes:

<div class="line">
  <div class="margin">
    <div class="s-12 l-five">
      <div class="box-dark">s-12 / l-five</div>
    </div>
    <div class="s-12 l-five">
      <div class="box-dark">s-12 / l-five</div>
    </div>
    <div class="s-12 l-five">
      <div class="box-dark">s-12 / l-five</div>
    </div>
    <div class="s-12 l-five">
      <div class="box-dark">s-12 / l-five</div>
    </div>
    <div class="s-12 l-five">
      <div class="box-dark">s-12 / l-five</div>
    </div>
  </div>
</div>
s-12 / l-five
s-12 / l-five
s-12 / l-five
s-12 / l-five
s-12 / l-five

Application of “center” class:

<div class="line">
  <div class="s-12 l-4 center">
    <div class="box-dark">s-12 / l-4 / center</div>
  </div>
  <div class="s-12 l-6 center">
    <div class="box-dark">s-12 / l-6 / center</div>
  </div>
  <div class="s-12 l-8 center">
    <div class="box-dark">s-12 / l-8 / center</div>
  </div>
</div>
s-12 / l-4 / center
s-12 / l-6 / center
s-12 / l-8 / center

Application of grid with various widths of columns:

<div class="line">
  <div class="margin">
    <div class="s-3">
      <div class="box-dark">s-3</div>
    </div>
    <div class="s-6">
      <div class="box-dark">s-6</div>
    </div>
    <div class="s-3">
      <div class="box-dark">s-3</div>
    </div>
  </div>
</div>
s-3
s-6
s-3

Application of grid with nested columns:

<div class="line">
  <div class="margin">
    <div class="s-3">
      <div class="box-dark">s-3</div>
    </div>
    <div class="s-6">
      <div class="margin">
        <div class="s-12 m-6 l-4">
          <div class="box-dark">s-12 / m-6 / l-4</div>
        </div>
        <div class="s-12 m-6 l-4">
          <div class="box-dark">s-12 / m-6 / l-4</div>
        </div>
        <div class="s-12 m-6 l-4">
          <div class="box-dark">s-12 / m-6 / l-4</div>
        </div>
      </div>
    </div>
    <div class="s-3">
      <div class="box-dark">s-3</div>
    </div>
  </div>
</div>
s-3
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-12 / m-6 / l-4
s-3
Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase