Skip to content

Breakpoint13.10.5

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


$ npm i @if-design-system/breakpoint@13.10.5

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section

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

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

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: @if-design-system/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 '@if-design-system/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: @if-design-system/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

Contact us