انتقل إلى المحتوى الرئيسي

Responsive Design Patterns

Creating responsive layouts in the Gauzy frontend.

Breakpoints​

BreakpointWidthTarget
XS< 576pxMobile portrait
SM≥ 576pxMobile landscape
MD≥ 768pxTablet
LG≥ 992pxDesktop
XL≥ 1200pxLarge desktop
XXL≥ 1400pxUltra-wide

SCSS Mixins​

@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);
  }
}
Screen SizeSidebar State
< 768pxHidden (overlay)
768-1200pxCollapsed (icons)
> 1200pxExpanded (full)

Table Responsiveness​

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

Mobile-First Components​

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

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

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