---
description: How to implement the SDS grid system in development.
---

# 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.

```scss
@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:

```scss
.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.

{% hint style="warning" %}
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.
{% endhint %}

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.&#x20;

```scss
.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;
  }
}
```
