Back to Grid-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

The If Design System includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. The grid comes with multiple tiers, one tier for each breakpoint (media query range).

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/grid@14.1.0

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs

Table of Contents

Edit this section, Opens in new window

Usage

Implementation

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs
<div class="if grid [fluid|across|wide]">
  <div class="if row">
    <div class="if col-[1-12]--[xxs|xs|smlr|sm|md|lg|xl|xxl|huge|huger]">..</div>
  </div>
</div>

Nested grid

.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
<div class="if grid">
  <div class="if row">
    <div class="if col-4--xs"></div>
    <div class="if col-8--xs">
      <div class="if grid across">
        <div class="if row">
          <div class="if col-3--xs"></div>
          <div class="if col-3--xs"></div>
          <div class="if col-3--xs"></div>
          <div class="if col-3--xs"></div>
        </div>
      </div>
    </div>
  </div>
</div>
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor variables

Grid variables

Name Value Pixels
$size-grid-gutter-width 2.5rem 40px
$size-grid-gutter-half-width 1.25rem 20px
$size-grid-gutter-half-width-negative -1.25rem -20px
$size-grid-columns 12 192px
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • ๐Ÿค– Rename util to utils (f78721f)

Code Refactoring

  • ๐Ÿ’ก Rename scope and repository (3ea5423)
  • ๐Ÿ’ก Use new navigation structure for documentation (415aee5), closes #490579
  • ๐Ÿ’ก Use style dictionary instead of theo (aec6a6b), closes #413451

Documentation

  • โœ๏ธ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • ๐Ÿงจ The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • ๐Ÿงจ Variables for grid as been renamed!
  • ๐Ÿงจ Util is now renamed to Utils
  • ๐Ÿงจ We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • ๐Ÿงจ Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • ๐ŸŽธ Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • ๐Ÿ› Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

  • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
  • ๐Ÿ› We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

  • ๐Ÿ› Use correct variable for grid generation for stylus (a720a05)

Code Refactoring

  • ๐Ÿ’ก Remove Teasers, added Text and Lifestyle cards (1247479), closes #336508
  • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
  • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239), closes #336508

Features

  • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • ๐Ÿงจ All of the mixins have now been renamed
  • ๐Ÿงจ Teasers are no more. It has been replaces with Lifestyle Navigational

Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks

  • ๐Ÿงจ This extracts the Hero variation with no image into a separate, design

updated component named Header

  • ๐Ÿงจ Footer is now renamed to Global Footer

9.0.2 (2021-01-20)

Bug Fixes

  • ๐Ÿ› Remove margins from columns, use grid-gap (d7df2c0), closes #335838

6.25.2 (2020-07-08)

Bug Fixes

  • ๐Ÿ› Use correct mediaqueries for grid demo (2a1b6a1)

6.16.1 (2020-05-20)

Bug Fixes

  • ๐Ÿ› Fix routing for dev server (295db6e)

6.11.0 (2020-04-22)

Bug Fixes

  • ๐Ÿ› Add sr only text for footer logo link (2971dd9)

6.9.0 (2020-04-15)

Features

  • ๐ŸŽธ Add token documentation generation (172f997)

6.6.0 (2020-04-09)

Bug Fixes

  • ๐Ÿ› Adjust html header and add correct naming (22f8fce)

6.5.4 (2020-04-08)

Bug Fixes

6.5.2 (2020-04-06)

Bug Fixes

  • ๐Ÿ› Use margin instead of grid gap until chrome bug is fixed (928d62f)

6.4.3 (2020-04-03)

Bug Fixes

  • ๐Ÿ› Revert positional top left right bottom from 0 to auto (f06d59a)

6.4.2 (2020-04-03)

Bug Fixes

  • ๐Ÿ› Remove misuse of unset, none, auto and initial (87624d7)
  • ๐Ÿ› Use initial instead of none and unset (d75bc65)

6.3.2 (2020-03-31)

Bug Fixes

  • ๐Ÿ› Use a semi manual method to generate grids (2b87806)

6.3.0 (2020-03-29)

Bug Fixes

  • ๐Ÿ› Finally made the stylus grid file work. Next step is to convert less and scss (019314c)
  • ๐Ÿ› Fix responsive grid bug (8ae64bc)
  • ๐Ÿ› Make the grid preprocessor files produce identical output (434ec8d)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.149 (2020-03-05)

Features

  • ๐ŸŽธ Add complete responsive layout grid feature based on (2214aad)
  • ๐ŸŽธ Update layout grid to fit new baseline grid (70a3f67)

BREAKING CHANGES

  • ๐Ÿงจ The reponsive layout grid has changed! Please check your layout with the

new grid!

5.0.1-alpha.121 (2020-02-17)

Bug Fixes

  • ๐Ÿ› Use width auto for fluid grid (fbf9f82)

5.0.1-alpha.120 (2020-02-17)

Bug Fixes

  • ๐Ÿ› Set default grid back to fixed width, add other flags (3710c73)

Features

  • ๐ŸŽธ Add design token generation to grid (82c2e77)
  • ๐ŸŽธ Add preprocessor files and tests (83ef84c)
  • ๐ŸŽธ Adjust grid to new baseline grid, add layout-helper (0f71b97)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • ๐Ÿ› Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • ๐ŸŽธ Remove normalize.css (2c23c2b)

5.0.1-alpha.56 (2019-11-22)

Bug Fixes

  • ๐Ÿ› Make the wider container, wider (faf500e)

Features

  • ๐ŸŽธ Add support for wider containers (55e97ee)

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

  • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
  • ๐Ÿ› We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

  • ๐Ÿ› Use correct variable for grid generation for stylus (a720a05)

Code Refactoring

  • ๐Ÿ’ก Remove Teasers, added Text and Lifestyle cards (1247479), closes #336508
  • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
  • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239), closes #336508

Features

  • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • ๐Ÿงจ All of the mixins have now been renamed
  • ๐Ÿงจ Teasers are no more. It has been replaces with Lifestyle Navigational

Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks

  • ๐Ÿงจ This extracts the Hero variation with no image into a separate, design

updated component named Header

  • ๐Ÿงจ Footer is now renamed to Global Footer

9.0.2 (2021-01-20)

Bug Fixes

  • ๐Ÿ› Remove margins from columns, use grid-gap (d7df2c0), closes #335838

6.25.2 (2020-07-08)

Bug Fixes

  • ๐Ÿ› Use correct mediaqueries for grid demo (2a1b6a1)

6.16.1 (2020-05-20)

Bug Fixes

  • ๐Ÿ› Fix routing for dev server (295db6e)

6.11.0 (2020-04-22)

Bug Fixes

  • ๐Ÿ› Add sr only text for footer logo link (2971dd9)

6.9.0 (2020-04-15)

Features

  • ๐ŸŽธ Add token documentation generation (172f997)

6.6.0 (2020-04-09)

Bug Fixes

  • ๐Ÿ› Adjust html header and add correct naming (22f8fce)

6.5.4 (2020-04-08)

Bug Fixes

6.5.2 (2020-04-06)

Bug Fixes

  • ๐Ÿ› Use margin instead of grid gap until chrome bug is fixed (928d62f)

6.4.3 (2020-04-03)

Bug Fixes

  • ๐Ÿ› Revert positional top left right bottom from 0 to auto (f06d59a)

6.4.2 (2020-04-03)

Bug Fixes

  • ๐Ÿ› Remove misuse of unset, none, auto and initial (87624d7)
  • ๐Ÿ› Use initial instead of none and unset (d75bc65)

6.3.2 (2020-03-31)

Bug Fixes

  • ๐Ÿ› Use a semi manual method to generate grids (2b87806)

6.3.0 (2020-03-29)

Bug Fixes

  • ๐Ÿ› Finally made the stylus grid file work. Next step is to convert less and scss (019314c)
  • ๐Ÿ› Fix responsive grid bug (8ae64bc)
  • ๐Ÿ› Make the grid preprocessor files produce identical output (434ec8d)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.149 (2020-03-05)

Features

  • ๐ŸŽธ Add complete responsive layout grid feature based on (2214aad)
  • ๐ŸŽธ Update layout grid to fit new baseline grid (70a3f67)

BREAKING CHANGES

  • ๐Ÿงจ The reponsive layout grid has changed! Please check your layout with the

new grid!

5.0.1-alpha.121 (2020-02-17)

Bug Fixes

  • ๐Ÿ› Use width auto for fluid grid (fbf9f82)

5.0.1-alpha.120 (2020-02-17)

Bug Fixes

  • ๐Ÿ› Set default grid back to fixed width, add other flags (3710c73)

Features

  • ๐ŸŽธ Add design token generation to grid (82c2e77)
  • ๐ŸŽธ Add preprocessor files and tests (83ef84c)
  • ๐ŸŽธ Adjust grid to new baseline grid, add layout-helper (0f71b97)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • ๐Ÿ› Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • ๐ŸŽธ Remove normalize.css (2c23c2b)

5.0.1-alpha.56 (2019-11-22)

Bug Fixes

  • ๐Ÿ› Make the wider container, wider (faf500e)

Features

  • ๐ŸŽธ Add support for wider containers (55e97ee)

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

  • ๐Ÿ› Fix typography based on latest sketches (2653b61)

5.0.1-alpha.3 (2019-10-04)

Features

  • ๐ŸŽธ Add support classname for container, .if.container (f157fa1)

5.0.1-alpha.2 (2019-10-04)

Features

  • ๐ŸŽธ Add support classname for container, .if.container (f157fa1)
Edit this section, Opens in new window
Contact us, Opens in new window