Grids and Responsive Design
Global Assets v4 is tailored for web applications with a responsive user interface, i.e. RWD applications. To use Global Assets v4, your application should fall into one of three categories:
- It is already responsive
- It is about to be developed with a responsive user interface
- It is about to be enhanced to have a responsive user interface
Use the following recommendations if your application falls into category 2 or 3.
Creating Responsive Design for The City of Malmö
We use page and box grids based on twelve columns. Each area is dived into twelve columns available for boxes to span over. This gives you a good flexibility to easily arrange the page content in a consistent way and to apply different grids for different device widths using breakpoints with CSS media queries.
Some common grids—at a given viewport width—have rows with boxes spanning over 3-6-3, 4-4-4, 8-4, 6-6 or 12 columns. If your approach is mobile first, you will probably start with boxes spaning over all 12 columns and transform to e.g. a 6-6 grid and then 3-6-3 above certain breakpoints. A desktop first approach will go the other way around. See code examples below.
Do not put the grid formatting—or any other styling—in the markup with class names like
cols-4. Use semantic class names and elements in the markup and use CSS to create the grid and media queries to make it responsive as seen below.
We encourage that you use the
columns() mixin from our Sass utilities (see Getting Started) to easily create responsive grids and sub-grids.
The live example grid below shows—from a mobile first approach—how all three boxes spans over 12 columns (12, 12 and 12). When the viewport gets wider than
nav spans over 6 columns each and the
aside still spans over 12 columns (6-6 and 12). Above
article still spans over 6 columns but the
aside spans over 3 columns each (6-3-3).
If your approach is desktop first, start with the horizontal layout and apply media queries when the width gets below the breakpoints.
The first argument for the
columns() Sass mixin is an integer that specifies the number of columns that the block should span over.
The second argument is boolean and specifies if the column should be the last in the row, no gutter to the right is added then. Defaults to
false. Forced to
true if the first argument is
The third argument is the gutter given in percentage of the total block width. Defaults to
The maximal width of the views in a web application should be set based on the content it contains: A page with article content should e.g. have a maximum page width that makes the text line length optimized for readability. Our map service is using 100% of the device width. Check out the reference applications in the Getting Started section for different grids and page widths.
Use the same concept, and the same code, as you do for page grids to create sub-grids within a block on a gird. The bottom of the article box in the example above can be divided into two sub columns using
columns(6). It would typically be have
columns(12) on narrow devices.