A tutorial for responsive.grid - Fluid and responsive grid framework

February 4, 2015

Overview

There are lots of CSS frameworks available that allow you to layout a website in such a way that content is presented in the best possible way to the user taking into account various screen sizes, resolutions, orientation of the device, etc.

• The best of these frameworks are however quite complex and huge. They have all you need for laying out the dynamic column/cell structure that is important for a responsive design, but all too often force you to also make use of methods and styles that have actually nothing to do with the problem I want those frameworks to solve; i.e. what do they offer me to layout my content in such a way that it adapts without a lot of trouble to various device sizes. At first sight those frameworks seem to offer huge possibilities with minimal implementation effort but for me they do too much. As a consequence they will often restrict you in what you want to do (unless of course you have time and appetite to dig into the internals). Also, very often, websites designed with these frameworks typically all look the same.
  This is more are less the problem that I have with almost any framework out there. They tend to grow and grow to an extend that, for me at least, they become an obstacle to get the job done.

• The less complicated frameworks on the other hand typically offer a good grid system but often lack the flexibility to adapt to various screen resolutions.

In the course of the years I therefore came up with my own framework. I took over some of the concepts that are available in the other frameworks but deliberately reduced the scope and kept it all very simple. You have to know when you have to stop. So there is no Javascript involved and there is only 1 CSS file: responsive.css.

responsive.css

This file provides a fluid column/grid system that allows me to layout, style and distribute content elements on the screen according to a device size/resolution dependent design. It is a pure CSS solution and it's scope is just that: a fluid grid which supports a variety of device resolutions. There are no UI buttons in there, no tabs, no paginators, no dropdown lists, menus, etc. If you want those then you have to take them from somewhere else (e.g. by integrating the free components I offer here).

Download

You can download the latest version of responsive.css at GitHub.

Usage

The content on a web page typically consists of various sections, like: navigation, banner, actual content, a footer, etc. I usually seperate them by defining for each of those sections a section-specific container within which I have another container that defines the content margin, the maximum width, etc. It looks as follows:

<div class="content">
    <div class="container">
        ... content here ...
    </div>
</div>

Within the inner "container" <div> I then design the content layout. For that layout I make use of 4 possible layout options that are offered in responsive.css:

• Block
• Columns
• Block grid
• Side by side columns

1. Block

This is the most basic form of layout. Each block section starts on the left side of the screen and fills the whole 100% width of the area defined by its parent container. Content within the block is layed out with some small padding left and right (0.8333em).

Example:

Layout definition:

<div class="block" style="background:#d0f2db;">
  <h3>Title</h3>
  <p>A paragraph, etc..</p>
</div>

2. Columns

Columns allow you to define automatically adjustable columns within which you define content. The maximum number of columns is 12. Columns are layed out side by side and automatically reflow when there is not enough space available. Content within each column has some small padding both left and right (0.8333em).

Within each column you must provide at least 2 classes: the "col" class and one or more "<d>-span-<n>" classes that are defined in the framework.

• The <d> part within the "<d>-span-<n>" class's names define the minimum supported device width and can be:
  • s: small devices and more
  • s1: 365px and more
  • s2: 444px and more
  • s3: 600px and more
  • m: medium size devices of 648px and more
  • m2: 712px and more
  • l: large devices of 1024px and more
  • xl: extra large devices of 1440px and more
• The <n> part within the "<d>-span-<n>" class's names defines how many columns the container must span. Allowed values are: 1, 2, ... 12.

Thus:

• s-span-6: defines a column container that spans 6 of the possible 12 columns; i.e. has a width of 50% within the parent container.
• s-span-12: defines a column that spans all 12 columns and so has a width of 100%.
• s1-span-1: defines a column that spans 1 column and so has a width of 8.33%. This class is only defined for devices which have a width of 365 pixels and more. This is done inside responsive.css through a media query.
• m2-span-3: defines a column container that spans 3 of the possible 12 columns; i.e. has a width of 25% width within the parent container. This class is only defined for devices which have a width of 444 pixels and more.
• l-span-4: defines a column container that spans 4 of the possible 12 columns; i.e. has a width of 33.3% width within the parent container. This class is only defined for devices which have a width of 1024 pixels and more.

The reason to allow for multiple <d> type of span class names (in particular the s1-, s2-, s3-, m-, etc. variants) is to support different type of spans for different type of device widths and will become evident in the examples that follow.

Example 1 - Content stays within 2 columns which auto-adjust to the width of the screen

Look how the following 2 columns adjust themselves to various window sizes.

Layout definition:

<div class="col s-span-6" style="background:#d0f2db;">
  Column 1 taking 50% of width space on any device.
</div>
<div class="col s-span-6" style="background:#f2d7e6;">
  Column 2 taking the other 50% width on any device
</div>

Example 2 - Content goes from 2 side-by-side columns on wider screens to full width columns on small screens.

Note: You must reduce the width of the viewpane to less than 638 pixels to see how the layout of the following 2 columns changes.

Layout definition

<div class="col s-span-12 m-span-6 style="background:#d0f2db;">
  Column 1 taking 100% width on a small device and 50% on medium and larger devices
</div>
<div class="col s-span-12 m-span-6" style="background:#f2d7e6;">
  Column 2 taking 100% width on a small device and 50% on medium and larger devices
</div>

If you want to have different span widths for different screen sizes all you have to do is simply add the 'span' class name(s) that you want for a given device to the other 'span' class names. The browser will filter out which of the class names are applicable depending on the device media queries and breakpoints that are defined in the responsive.css file.

3. Block grid

I borrowed/stole this concept from the Foundation framework, which by the way for me is one of the better existing frameworks. Blockgrids are used with unordered lists to split the different items in the list evenly within a container grid. The items will stay evenly spaced no matter the screen size. The number of items shown within each grid row is of course configurable.
The first item in a row is layed out with some small padding on the left (0.8333em) whereas the last item in a row has a small padding on the right (0.8333em).

If you want an unordered list to use the blockgrid layout then you must do that by adding one or more blgr-<d>-<n> classnames to the <ul> element.

• The <d> part in the name is the same as for the "<d>-span-<n>" class names. It is there (like with the Columns concept) to adapt the number of grid columns to various screen sizes.
• The <n> part also must be the number 1, 2, .. up to 12 but now defines the number of columns within a grid row.

Example 1 - A block grid with a fixed maximum of 3 items per row.

Layout definition

<div style="background: #d0f2db; padding-top: 1.25em; margin-bottom: 0.8333em">
<ul class="blgr-s-3">
<li><img src="http://code.cwwonline.be/media/1027/p1030320.jpg" /></li>
<li><img src="http://code.cwwonline.be/media/1028/p8280257.jpg" /></li>
<li><img src="http://code.cwwonline.be/media/1029/p6240003.jpg" /></li>
<li><img src="http://code.cwwonline.be/media/1030/p1040332.jpg" /></li>
<li><img src="http://code.cwwonline.be/media/1031/p7070039.jpg" /></li>
<li><img src="http://code.cwwonline.be/media/1032/p7080099.jpg" /></li>
</ul>
</div>

Example 2 - A block grid with 2 items per row on small devices, 3 items on medium devices, and 6 on bigger devices.

Layout definition

<div style="background: #d0f2db; padding-top: 1.25em; margin-bottom: 0.8333em">
<ul class="blgr-s-2 blgr-m-3 blgr-l-6">
    <li><img src="http://code.cwwonline.be/media/1027/p1030320.jpg" /></li>
    <li><img src="http://code.cwwonline.be/media/1028/p8280257.jpg" /></li>
    <li><img src="http://code.cwwonline.be/media/1029/p6240003.jpg" /></li>
    <li><img src="http://code.cwwonline.be/media/1030/p1040332.jpg" /></li>
    <li><img src="http://code.cwwonline.be/media/1031/p7070039.jpg" /></li>
    <li><img src="http://code.cwwonline.be/media/1032/p7080099.jpg" /></li>
</ul>
</div>

4. Side by side columns

This is the 4th type of layout that helps you to define 2 side by side columns. It is different from the above described Columns layout with respect to how both columns scale on different devices:

• If you don't specifically include one of the "leftCol-<d>" class names in the container for the left column, then both columns will not by positioned side by side but under each other. Both column will fill the available space.

• Adding one or more "leftCol-<d>" class names for the left container will make the columns position side by side when the width of the screen matches the size indicated by <d>; i.e. when you specify <div class="leftCol-s2"> then the columns will start to be positioned side by side starting with a screen width of 444 pixels. The columns are then layed out as follows:

  • The left column has a fixed width. There is a default width that is hard-coded for the different breakpoints in responsive.css but you probably will have to change those values in your own stylesheet.
  • The right column fills the available space.

Example: Next follows an example showing side by side columns when the screen width is 648 pixels or more. When less both content blocks are displayed one after the other.

Layout definition

<div class="sideBySideCols">
  <div class="leftCol-m">
    <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</b></p>
  </div>
  <div class="rightCol">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...</p>
  </div>
</div>

Remark: The 2 columns are layed out side by side using a straightforward and simple float concept. That means that the height of each column is defined by the content of its respective column container. Both columns heights will therefore probably never be the same. If you want to have a different background for each column then you will have to appropriately style the overall container div (e.g. with a background image) and not the column containers.

Comments

comments powered by Disqus