Grid | DS CANTA.

Container

O container limita a largura maxima do conteudo e centraliza horizontalmente. Padding lateral de 1rem em mobile, 2rem em desktop.

max-width: 1280px

padding: 0 2rem

$container-max-width: 1280px;
$container-padding:  2rem;

.canta-container {
  width: 100%;
  max-width: $container-max-width;
  margin-left: auto;
  margin-right: auto;
  padding-left: $container-padding;
  padding-right: $container-padding;
}

Breakpoints

5 breakpoints responsivos que cobrem desde smartphones ate telas ultrawide. Mobile-first: estilos base se aplicam a telas pequenas, mixins adicionam para maiores.

Token	Min-width	Dispositivo	Mixin
`$breakpoint-sm`	`640px`	Smartphones landscape	`@include sm { ... }`
`$breakpoint-md`	`768px`	Tablets portrait	`@include md { ... }`
`$breakpoint-lg`	`1024px`	Tablets landscape / desktop	`@include lg { ... }`
`$breakpoint-xl`	`1280px`	Desktop	`@include xl { ... }`
`$breakpoint-2xl`	`1536px`	Desktop large / ultrawide	`@include xxl { ... }`

sm: 640px

md: 768px

lg: 1024px

xl: 1280px

2xl: 1536px

$breakpoint-sm:  640px;
$breakpoint-md:  768px;
$breakpoint-lg:  1024px;
$breakpoint-xl:  1280px;
$breakpoint-2xl: 1536px;

@mixin sm  { @media (min-width: $breakpoint-sm)  { @content; } }
@mixin md  { @media (min-width: $breakpoint-md)  { @content; } }
@mixin lg  { @media (min-width: $breakpoint-lg)  { @content; } }
@mixin xl  { @media (min-width: $breakpoint-xl)  { @content; } }
@mixin xxl { @media (min-width: $breakpoint-2xl) { @content; } }

Aliases Responsivos

Mixins semanticos para uso rapido nos cenarios mais comuns.

// Aliases semanticos
@mixin mobile  { @media (max-width: #{$breakpoint-md - 1px}) { @content; } }
@mixin tablet  { @media (min-width: $breakpoint-md) and (max-width: #{$breakpoint-lg - 1px}) { @content; } }
@mixin desktop { @media (min-width: $breakpoint-lg) { @content; } }

// Uso
.sidebar {
  display: none;

  @include desktop {
    display: block;
    width: 280px;
  }
}

.card-grid {
  grid-template-columns: 1fr;

  @include tablet {
    grid-template-columns: repeat(2, 1fr);
  }

  @include desktop {
    grid-template-columns: repeat(3, 1fr);
  }
}

Grid Classes

Classes utilitarias para criar layouts de grid rapidamente sem SCSS custom.

Col 1

Col 2

Col 3

1

2

3

4

Sidebar

Content

<!-- Grid auto-fit (responsivo) -->
<div class="canta-grid canta-grid--cols-3 canta-grid--gap-4">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</div>

<!-- Grid fixo -->
<div class="canta-grid canta-grid--cols-4 canta-grid--gap-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<!-- Sidebar layout -->
<div class="canta-grid" style="grid-template-columns: 280px 1fr;">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

Flexbox Mixins

Mixins utilitarios para os padroes de flexbox mais comuns no sistema.

flex-center

flex-between

flex-column

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-row($gap: 0) {
  display: flex;
  align-items: center;
  gap: $gap;
}

@mixin flex-wrap($gap: $spacing-4) {
  display: flex;
  flex-wrap: wrap;
  gap: $gap;
}

// Uso
.modal__header {
  @include flex-between;
}

.card__body {
  @include flex-column;
  gap: $spacing-4;
}

.button-group {
  @include flex-row($spacing-2);
}