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
  • Resolution tier affixes
• Responsive grid definition
  • Responsive grid - Example 1
  • Responsive grid - Example 2
• Column offsetting
  • Column offsetting example
• Column reordering
  • Column reordering example

---

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

---

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

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

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

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.