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

Breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user.

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/breakpoint@14.0.0

Table of Contents

Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor variables

Breakpoints

Name Value Pixels
$size-breakpoint-min-xxs 22.5rem 360px
$size-breakpoint-min-xs 25rem 400px
$size-breakpoint-min-smlr 45rem 720px
$size-breakpoint-min-sm 60rem 960px
$size-breakpoint-min-md 75rem 1200px
$size-breakpoint-min-lg 90rem 1440px
$size-breakpoint-min-xl 120rem 1920px
$size-breakpoint-min-xxl 160rem 2560px
$size-breakpoint-min-huge 200rem 3200px
$size-breakpoint-min-huger 240rem 3840px
$size-breakpoint-max-xxs 22.4375rem 359px
$size-breakpoint-max-xs 24.9375rem 399px
$size-breakpoint-max-smlr 44.9375rem 719px
$size-breakpoint-max-sm 59.9375rem 959px
$size-breakpoint-max-md 74.9375rem 1199px
$size-breakpoint-max-lg 89.9375rem 1439px
$size-breakpoint-max-xl 119.9375rem 1919px
$size-breakpoint-max-xxl 159.9375rem 2559px
$size-breakpoint-max-huge 199.9375rem 3199px
$size-breakpoint-max-huger 239.9375rem 3839px
Edit this section, Opens in new window

Mixins

Here's a list of all breakpoint mixins.

“A mixin can be used as a standalone helper, or you can pass values as arguments to make it extra flexible.”

All breakpoint mixins are named the same, but not used with the same syntax! See usage sections below!
Name What it does
IDS_BREAKPOINT_MQ_ExtraSmall_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Smaller_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Small_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Medium_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Large_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_ExtraLarge_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Xxl_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Huge_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Huger_Max Wraps code to be displayed when width is max
IDS_BREAKPOINT_MQ_Xxs_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_ExtraSmall_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Smaller_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Small_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Medium_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Large_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_ExtraLarge_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Xxl_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Huge_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Huger_Min Wraps code to be displayed when width is min
IDS_BREAKPOINT_MQ_Retina Wraps code to be displayed when device is retina
IDS_BREAKPOINT_MQ_NonRetina Wraps code to be displayed when device is non-retina
IDS_BREAKPOINT_MQ_Portrait Wraps code to be displayed when device is in portrait mode
IDS_BREAKPOINT_MQ_Landscape Wraps code to be displayed when device is in landscape mode
Usage with Stylus
.myStyle
  position relative
  +IDS_BREAKPOINT_MQ_Medium_Min()
    position static
Usage with Sass/Scss
.myStyle{
  position: relative;
  @include IDS_BREAKPOINT_MQ_Medium_Min{
    position: static;
  }
}
Usage with Less
.myStyle {
  position: relative;
  .IDS_BREAKPOINT_MQ_Medium_Min({position: static;});
}
Edit this section, Opens in new window

App development

For application development, we also expose tokens for native app development, like Android and IOS. We also expose tokens for JavaScript development.

JavaScript

We expose this file: @ids-core/breakpoint/src/variables/js/variables.esm.js, in this format:

export const SizeBreakpointMinHuge = '200rem'; // 3200px
export const SizeBreakpointMinHuger = '240rem'; // 3840px
export const SizeBreakpointMaxXxs = '22.4375rem'; // 360px - 1px
export const SizeBreakpointMaxXs = '24.9375rem'; // 400px - 1px
export const SizeBreakpointMaxSmlr = '44.9375rem'; // 720px - 1px
export const SizeBreakpointMaxSm = '59.9375rem'; // 960px - 1px

This can be used like so:

import { SizeBreakpointMinMd } from '@ids-core/breakpoint/src/variables/js/variables.esm.js';

const SizeBreakpointMinMdMQ = window.matchMedia(
  `screen and (min-width: ${SizeBreakpointMinMd})`
);
const handleMinMediumMQ = (mql) => {
  // If the device is at medium
  if (mql.matches) {
    //…
  }
};
SizeBreakpointMinMdMQ.addListener(handleMinMediumMQ);

// Always fire first
handleMinMediumMQ(SizeBreakpointMinMdMQ);

Tip

We also, by default, populate the body::before-content property with the current screen size, for easy access to the current screen size:


body::before
  content 'extraSmall-screen'
  display none
  +IDS_BREAKPOINT_MQ_ExtraSmall_Min()
    content "extraSmall-screen"
  +IDS_BREAKPOINT_MQ_Small_Min()
    content "small-screen"

This can then be accessed like so:

console.log(
  getComputedStyle(document.querySelector('body'), '::before').getPropertyValue(
    'content'
  )
);

Android

For Android development, you might be interested in this file: @ids-core/breakpoint/src/variables/android/dimens.xml, in this format:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <dimen name="size_breakpoint_min_xxs">360.00dp</dimen><!-- 360px -->
  <dimen name="size_breakpoint_min_xs">400.00dp</dimen><!-- 400px -->
  <dimen name="size_breakpoint_min_smlr">720.00dp</dimen><!-- 720px -->
  <dimen name="size_breakpoint_min_sm">960.00dp</dimen><!-- 960px -->
  <!-- … -->
</resources>

IOS

For IOS development, we have IfDesignSystemBreakpoints.h and IfDesignSystemBreakpoints.m under src/variables/ios, and IfDesignSystem.swift and IfDesignSystemBreakpoints.swift under src/variables/ios-swift.

Flutter

We also have ifdesignsystem.dart under src/variables/flutter.

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)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

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

  • 🧨 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.9.1 (2021-09-28)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

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

  • 🐛 Do not add generated date on generated files (2708429)
  • 🐛 Do not generate a file header for tokens (ab5d86f)

Code Refactoring

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner

7.8.2 (2020-12-01)

Bug Fixes

  • 🐛 Fix mqDown, use max width breakpoints (eb44550), closes #319366

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.44.0 (2020-11-11)

Bug Fixes

  • 🐛 Fix breadcrumb positioning and hero spacing (35e6b19), closes #307691

6.27.0 (2020-08-27)

Features

  • 🎸 Add support for landscape media query mixins (6c7f5d7)

6.26.0 (2020-07-13)

Features

  • 🎸 Add support for breakpoint specific portrait mixins (0d5d749)

6.25.0 (2020-07-07)

Bug Fixes

  • 🐛 Adjust extraSmall breakpoint from 480px to 400px. This allows us to separate the 3 iphone ranges: 320/375/414 (13f79d9)

6.10.4 (2020-04-16)

Bug Fixes

  • 🐛 Use parseFloat instead of parseInt when generationg max (f5027b8), closes #242130

6.9.0 (2020-04-15)

Features

  • 🎸 Add token documentation generation (172f997)

6.3.0 (2020-03-29)

Features

  • 🎸 Add breakpoint mixins for minXSS (e6e5a8a)

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

Reverts

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

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

Features

  • 🎸 Add a smaller breakpoint (2376d44)
  • 🎸 Update layout grid to fit new baseline grid (70a3f67)

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

Bug Fixes

  • 🐛 Add missing breakpoint options for body content (aa51942)
  • 🐛 Add missing mixins for less for breakpoints (597d688)
  • 🐛 Fix breakpoint mixins for less (c868d07)

Features

  • 🎸 Add more breakpoints (ea586a7)

5.0.1-alpha.118 (2020-02-10)

Bug Fixes

  • 🐛 Add tests and fix preprocessor files for breakpoints and (8d6dae9)

5.0.1-alpha.106 (2020-01-14)

Features

  • 🎸 Add support for less for hero, core, typo and breakpoin (237b71c)

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.40 (2019-11-05)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

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

  • 🐛 Do not add generated date on generated files (2708429)
  • 🐛 Do not generate a file header for tokens (ab5d86f)

Code Refactoring

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner

7.8.2 (2020-12-01)

Bug Fixes

  • 🐛 Fix mqDown, use max width breakpoints (eb44550), closes #319366

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.44.0 (2020-11-11)

Bug Fixes

  • 🐛 Fix breadcrumb positioning and hero spacing (35e6b19), closes #307691

6.27.0 (2020-08-27)

Features

  • 🎸 Add support for landscape media query mixins (6c7f5d7)

6.26.0 (2020-07-13)

Features

  • 🎸 Add support for breakpoint specific portrait mixins (0d5d749)

6.25.0 (2020-07-07)

Bug Fixes

  • 🐛 Adjust extraSmall breakpoint from 480px to 400px. This allows us to separate the 3 iphone ranges: 320/375/414 (13f79d9)

6.10.4 (2020-04-16)

Bug Fixes

  • 🐛 Use parseFloat instead of parseInt when generationg max (f5027b8), closes #242130

6.9.0 (2020-04-15)

Features

  • 🎸 Add token documentation generation (172f997)

6.3.0 (2020-03-29)

Features

  • 🎸 Add breakpoint mixins for minXSS (e6e5a8a)

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

Reverts

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

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

Features

  • 🎸 Add a smaller breakpoint (2376d44)
  • 🎸 Update layout grid to fit new baseline grid (70a3f67)

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

Bug Fixes

  • 🐛 Add missing breakpoint options for body content (aa51942)
  • 🐛 Add missing mixins for less for breakpoints (597d688)
  • 🐛 Fix breakpoint mixins for less (c868d07)

Features

  • 🎸 Add more breakpoints (ea586a7)

5.0.1-alpha.118 (2020-02-10)

Bug Fixes

  • 🐛 Add tests and fix preprocessor files for breakpoints and (8d6dae9)

5.0.1-alpha.106 (2020-01-14)

Features

  • 🎸 Add support for less for hero, core, typo and breakpoin (237b71c)

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.40 (2019-11-05)

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.5 (2019-10-08)

Bug Fixes

  • 🐛 Fix breakpoint dt generation (5b963c5)
  • 🐛 Use correct variable names for breakpoint map (971f56b)

5.0.1-alpha.4 (2019-10-08)

Bug Fixes

  • 🐛 Fix typos for breakpoints (d989261)

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

Features

  • 🎸 Adding design tokens to breakpoint package (2ec6d1d)
  • 🎸 Finalize design tokens for breakpoints (edb9078)

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

Features

  • 🎸 Adding design tokens to breakpoint package (2ec6d1d)
  • 🎸 Finalize design tokens for breakpoints (edb9078)
Edit this section, Opens in new window
Contact us, Opens in new window