Breakpoints & Grid System

A fully responsive and robust layout system consisting of six(6) breakpoints and four grid variations.

Sipster includes a robust and flexible grid system that makes creating responsive experiences as simple as possible. To allow the grids to adapt to any device, layout, or device settings(zoom), Sipster’s layout system is built using REM values (1rem = 16px) instead of fixed pixel values. This, combined with css flex and grid properties, allows for fluid, responsive interfaces. The system consists of six(6) breakpoints and four(4) grid variations which can be viewed below.

Breakpoint/Grid Range	Viewport Size	# of Columns	Outer Margin/ Gutter
screen-xs	0 – 37.4375rem (0 – 599px)	4	1rem / 1rem (16px / 16px)
screen-sm	37.5 – 47.9375rem (600 – 767px)	8	1rem / 1rem (16px / 16px)
screen-md	48 – 63.9375rem (768–1023px)	8	1rem / 1rem (16px / 16px)
screen-lg	64 – 79.9375rem (1024–1279px)	12	1rem / 1rem (16px / 16px)
screen-xl	80 – 99.9375rem (1280–1599px)	12	1rem / 1rem (16px / 16px)
screen-2xl	100rem + (1600px +)	16	1.5rem / 1.5rem (24px / 24px)

---

Applying Grids & Layout

Whether you're a designer creating mockups or a developer referencing those mockups to build out an interface, the breakpoints and grid ranges will always remain consistent.

Design: Figma Library

The grid and layout assets included in the SDS Core Figma library are meant to provide a foundational starting point, and are built in a way to clearly communicate to developers what breakpoint a specific mockup is targeting.

Breakpoints/grids are available in the SDS Core Figma library as a reusable component, which can be accessed via the 'Assets' tab in Figma. These Frames are built to the smallest size for each breakpoint (noted in the diagram above), and come with the correct Grid Style already applied. Navigate to the SDS Core library, find the 'Breakpoints + Grids' page, and add the desired breakpoint to your working design file.

SDS Core Grid components in Figma

Example:

The @lg and @xs Grid components from the SDS Core Figma library.

As mentioned above, these default Frames are formatted to the minimum size of each breakpoint. There may be times where a certain design/layout requires a more granular or customized approach. To accommodate this, the SDS Core Figma library also provides raw Grid styles for each breakpoint. Size your custom Frame to whatever the project dictates, reference the table above to figure out which breakpoint your custom size falls within, and apply the corresponding Grid style.

It is important to use either the Grid component (with Grid styles predefined) or these raw Grid styles in all designs—especially in final handoff files. These options play a key role in communicating with developers how layouts should present and adapt to various devices and viewports.

Development: SCSS Screen Mixin

To implement the grid system and target different breakpoints effectively, Sipster provides a custom mixin: sds-screen() . The $range (required) parameter should be the name of one of the available breakpoints from the table above.

@include sds-screen($range) {
  // styles for this grid range
}

Because this is a custom mixin, it needs to be implemented at the same level as other properties for a CSS selector using @include.

Example:

Let's say a design mockup shows a section of text that has a different color depending on which Breakpoint/grid range a user is viewing it in. Using the sds-screen() mixin (and the sds-color function), the SCSS code would look something like this:

.myCustomSection {
  // @2xl grid-range (Default value, no need for a media query)
  color: sds-color(red);
    
  // @xl grid-range
  @include sds-screen(xl){
    color: sds-color(purple);
  }
    
  // @lg grid-range
  @include sds-screen(lg){
    color: sds-color(blue);
  }
    
  // @md grid-range
  @include sds-screen(md){
    color: sds-color(yellow);
  }
    
  // @sm grid-range
  @include sds-screen(sm){
    color: sds-color(green);
  }
    
  // @xs grid-range
  @include sds-screen(xs){
    color: sds-color(orange);
  }
}

Compiled CSS:

.myCustomSection {
  /* @2xl grid-range (Default value, no need for a media query) */
  color: #F01010; /* red */
    
  /* @xl grid-range */
  @media screen and (max-width: 99.9375rem) {
    color: #8F35F1; /* purple */
  }
  
  /* @lg grid-range */
  @media screen and (max-width: 79.9375rem) {
    color: #3579F5; /* blue */
  }
  
  /* @md grid-range */
  @media screen and (max-width: 63.9375rem) {
    color: #F8A506; /* yellow */
  }
  
  /* @sm grid-range */
  @media screen and (max-width: 47.9375rem) {
    color: #2ED022; /* green */
  }
  
  /* @xs grid-range */
  @media screen and (max-width: 37.4375rem) {
    color: #FD720F; /* orange */
  }
}

Notice that the grid-range @2xl was not manually declared using the mixin. All current 2600Hz projects using SDS are developed using a desktop-first approach, which means that the initial @2xl styles become the default declarations, with all other targeted grid-ranges and styles cascading after.

For the sds-screen() mixin to work properly, it is necessary to write each targeted range in the correct descending order. If the mixin is not implemented in the correct descending order, it will not work as expected and your responsive layout behavior will be broken.

In many instances, it won't be necessary to manually declare each available grid-range. Sometimes a component or UI element will share the same layout/styles across multiple grid-ranges. In order to keep stylesheets as DRY as possible, developers only need to target a specific grid-range if they need to override a specific property at that range.

Example:

.myCustomSection {
  // Default styles (will be applied @2xl, @xl, @lg, and @md grid-ranges)
  color: sds-color(red);
    
  // @sm grid-range
  @include sds-screen(sm){
    color: sds-color(green);
  }
    
  // @xs grid-range
  @include sds-screen(xs){
    color: sds-color(orange);
  }
}

Compiled CSS:

.myCustomSection {
  /* Default styles (will be applied @2xl, @xl, @lg, and @md grid-ranges) */
  color: #F01010; /* red */
  
  /* @sm grid-range */
  @media screen and (max-width: 47.9375rem) {
    color: #2ED022; /* green */
  }
  
  /* @xs grid-range */
  @media screen and (max-width: 37.4375rem) {
    color: #FD720F; /* orange */
  }
}