Responsive Design Patterns

@mixin respond-to($breakpoint) {
  @if $breakpoint == "sm" {
    @media (min-width: 576px) {
      @content;
    }
  }
  @if $breakpoint == "md" {
    @media (min-width: 768px) {
      @content;
    }
  }
  @if $breakpoint == "lg" {
    @media (min-width: 992px) {
      @content;
    }
  }
  @if $breakpoint == "xl" {
    @media (min-width: 1200px) {
      @content;
    }
  }
}

// Usage
.employee-grid {
  display: grid;
  grid-template-columns: 1fr;

  @include respond-to("md") {
    grid-template-columns: repeat(2, 1fr);
  }

  @include respond-to("lg") {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="table-responsive">
  <nb-card>
    <nb-card-body>
      <angular2-smart-table [settings]="settings" [source]="source">
      </angular2-smart-table>
    </nb-card-body>
  </nb-card>
</div>

.dashboard-widget {
  width: 100%;
  padding: 1rem;

  @include respond-to("md") {
    width: 50%;
  }

  @include respond-to("lg") {
    width: 33.33%;
  }
}