Responsive grid

Modern web applications should respect responsive design principles, so that they adapt to all devices and screen sizes while keeping the functionality and flow natural as if it was specifically designed for that device or screen size.


Responsive design breakpoints

Responsive design relies on CSS media queries to modify the application style on-demand for different screen sizes. Media queries are used to create breakpoints at resolutions that are defined based on common device screen sizes, so that the application design responds naturally to the different screen sizes.

To accelerate the development process, a powerful grid system and responsive component and helper classes have been defined in the framework based on the above breakpoints - this essentially means that familiarizing with these classes allows an application to be designed and styled for all screen sizes simultaneously.

The grid system and the responsive element and utilities classes were defined semantically, so once developers familiriaze themselves with the class names can immediately start defining their application layout. Depending on the resolution breakpoints affixes are attached to the classes


Resolution tier affixes

Sky Framework divides the screen resolution in 6 resolution tiers based on breakpoints. A resolution tier affix is defined for each resolution tier.

Resolution tier affix Resolution tier Device type
xxs Up to 544px Extra extra small screen sizes like mobile phones in portrait resolution
xs From 545px up to 767px Extra small screen sizes, like mobile phones in landscape orientation
sm From 768px up to 991px Small screen sizes, like tablets in portrait orientation
md From 992px up to 1200px Medium screen sizes, like tablets in landscape orientation and netbooks
lg From 1201px up to 1600px Large screen sizes, like laptops and desktop computers
xl From 1601px and beyond Large screen sizes, desktop computers
Resolution tier affixes should not be confused with element sizing affixes, like the ones used for variable padding sizes, variable spacing, etc. The use of each type of affixes depends on the context.

Responsive grid definition

The responsive grid system has been implemented to accelerate the creation of responsive layouts across all devices.

  • A grid, that is defined by applying the class row to a div element, and divides the width of the parent container in horizontal groups of 12 grid columns.
  • Content within the grid is placed inside columns that are defined as col-{affix}-{modifier} where affix is one of the 6 responsive tier affixes xxs, xs, sm, md, lg, xl and where modifier is a number from 1 to 12 that defines how much grid space the column occupies. In the sample, we have 4 columns with the same class col-md-3. The class begins with the prefix col- followed by one of the 6 resolution tier affixes, in this example md that applies to medium screen sizes, followed by the number 3, which means that each column occupies 3/12 (=25%) of the total grid width.
  • Columns can be stacked horizontally for each resolution tier consuming up to 12 grid columns per line; if their total width exceeds 12 grid columns (=100%) then the columns are wrapped onto a new line.
  • The columns are evenly spaced by using predefined responsive padding - that changes weight depending on screen resolution, as a gutter.
  • Grids can be nested within columns.
  • Column classes can be combined inline so that each column has a different grid width for each resolution tier, defining different layouts for multiple screen sizes, for example col-xs-12 col-sm-6 col-md-4 col-lg-3. This essentially means that the column will occupy different space for different resolution tiers - 100% for extra small screen sizes (12/12), 50% on small screen sizes (6/12), 33% for medium screen sizes (4/12) and 25% for large screen sizes (3/12).
  • Column width values defined by smaller resolution tier class affixes are overriden by higher resolution tier affixes on the same column.
  • If a column width is not defined at a resolution tier, then the value is carried over from the smaller resolution tier defined class affix.
  • If a smaller resolution tier class is not defined, the column occupies the full grid width.

Responsive grid - Example 1

In the following example:

  • 4 colums are defined only using the col-md-3 class producing 4 horizontally stacked columns of 25% grid width each (3/12) at resolutions ranging from 992px up to 1200px.
  • A smaller resolution tier affix is not defined (xxs, xs or sm), so at resolutions smaller than 992px, each column will occupy the full grid space, so essentially the columns will be stacked vertically.
  • A higer resolution tier affix is not defined either (lg), so at resolutions from 1200px and beyond, the column width value is carried over.
Code output
Column 1
Column 2
Column 3
Column 4
HTML Markup
Copy<div class="row">
  <div class="col-md-3">col-md-3</div>
  <div class="col-md-3">col-md-3</div>
  <div class="col-md-3">col-md-3</div>
  <div class="col-md-3">col-md-3</div>
</div>

Responsive grid - Example 2

In the following example:

  • 3 colums are defined using 3 different combinations of classes.
  • At resolution tier ranging from 992px to 1200px (md), the total column width exceeds the total grid width, so the 3rd column wraps onto a new line.
  • There is no definition for any column at resolution tiers larger than 1200px (lg), so beyond that point the column width values are carried over.
Code output
Column 1
Column 2
Column 3
HTML Markup
Copy<div class="row">
  <div class="col-xs-6 col-sm-12 col-md-6">Column 1</div>
  <div class="col-xxs-6 col-xs-8 col-md-6">Column 2</div>
  <div class="col-xxs-6 col-xs-4 col-md-6">Column 3</div>
</div>

A detailed explanation of the behavior of each column:

Column 1

Resolution tier class Resolution Column width Comments
- > 544px 100% Full grid width since smaller resolution tier affix not defined
col-xs-6 545px - 767px 50% -
col-sm-12 768px - 991px 100% -
col-md-6 992px - 1200px 50% -
- 1201px - 1600px 50% Value is carried over from smaller resolution tier affix col-md-6
- 1601px+ 50% Value is carried over from smaller resolution tier affix col-md-6

Column 2

Resolution tier class Resolution Column width Comments
col-xxs-6 > 544px 50% -
col-xs-8 545px - 767px ~67% -
- 768px - 991px ~67% Value is carried over from smaller resolution tier affix col-xs-8
col-md-6 992px - 1200px 50% -
- 1201px - 1600px 50% Value is carried over from smaller resolution tier affix col-md-6
- 1601px+ 50% Value is carried over from smaller resolution tier affix col-md-6

Column 3

Resolution tier class Resolution Column width Comments
col-xxs-6 > 544px 50% -
col-xs-4 545px - 767px ~33% -
- 768px - 991px ~33% Value is carried over from smaller resolution tier affix col-xs-4
col-md-6 992px - 1200px 50% -
- 1201px - 1600px 50% Value is carried over from smaller resolution tier affix col-md-6
- 1601px+ 50% Value is carried over from smaller resolution tier affix col-md-6

Column Offsetting

You can move columns to the right by applying classes defined as col-{affix}-offset-{modifier} where affix is one of the 5 responsive tier affixes xxs, xs, sm, md, lg and where modifier is a number from 1 to 12 that defines how many grid column spaces to the right the column will be offset to.


Column offsetting example

In the following example, the column has the class col-md-offset-6. The class begins with the prefix col- followed by one of the 5 resolution tier affixes, in this example md that applies to medium screen sizes, followed by -offset- and finally the number 6, which means that the column will be moved to the right by 6 grid column spaces at the md resolution tier. Since offset values are carried over at larger resolution tiers, it has to be reset to avoid unwanted behavior - in this example the col-lg-offset-0 class is used to reset the column offset back to normal at the lg resolution tier.

Code Output
Column moves to the right 4 grid spaces at medium screen sizes and 6 grid spaces to the right at large screen sizes.
HTML Markup
Copy<div class="row">
  <div class="col-md-8 col-md-offset-6 col-lg-6 col-lg-offset-0">Column moves to the right 4 grid spaces at medium screen sizes and 6 grid spaces to the right at large screen sizes.</div>
</div>

A detailed explanation of the behavior of the column:

Resolution Resolution tier class Column width Column offset
992px - 1200px col-md-8 col-md-offset-4 ~67% ~33%
1201px+ col-lg-6 col-lg-offset-6 50% 50%

Column reordering

Column ordering has been significantly simplified with the implementation of flexbox for the responsive grid. Columns can be reordered by using the flexbox ordering classes.