Development

How to implement the SDS grid system in development.

Available Mixin

To implement the grid system and target different breakpoints effectively, use the provided sds-screen() mixin. The "range" parameter should be the name of one of the available grid ranges from the SDS Breakpoints & Grid System table.

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

Example

Let's say a developer needs a component to have different colored text depending on which viewport/grid range the user is viewing it in. Using the sds-screen() mixin, the SCSS code would look something like this:

.myComponent {
  // @2xl grid-range (Default value)
  color: red;
    
  // @xl grid-range
  @include sds-screen(xl){
    color: purple;
  }
    
  // @lg grid-range
  @include sds-screen(lg){
    color: blue;
  }
    
  // @md grid-range
  @include sds-screen(md){
    color: yellow;
  }
    
  // @sm grid-range
  @include sds-screen(sm){
    color: green;
  }
    
  // @xs grid-range
  @include sds-screen(xs){
    color: orange;
  }
}

Notice that the grid-range @2xl was not manually declared using the mixin. All current 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 following 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 style for that range.

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