Guide Class & Sass

Grid System

Untuk grid & column system sama dengan bootstrap agar memudahkan penggunaan

Grid Options

• Small (sm) = 480px
• Medium (md) = 768px
• Large (lg) = 992px
• Extra large (xl) = 1200px
• Extra extra large (xxl) = 1400px
• More than Extra extra large (2xl) = 1920px

Layout Column

• .col-*
• .col-sm-*
• .col-md-*
• .col-lg-*
• .col-xl-*
• .col-xxl-*
• .col-2xl-*

Vertical Align

class digunakan bersamaan dengan class .row

<div class="row align-items-center">
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
  <div class="col">One of three columns</div>
</div>

• .align-items-start untuk posisi di awal baris
• .align-items-center untuk posisi di tengah baris
• .align-items-end untuk posisi di akhir baris

Horizontal alignment

class digunakan di dalam class .row

<div class="row justify-content-start">
  <div class="col-4">One of two columns</div>
  <div class="col-4">One of two columns</div>
</div>

• .justify-content-start untuk posisi kolom rata kiri
• .justify-content-center untuk posisi kolom rata tengah
• .justify-content-end untuk posisi kolom rata kanan
• .justify-content-around
• .justify-content-between
• .justify-content-evenly untuk memberikan jarak antar kolom

Mixins Sass

Penggunaan Mixins untuk mempermudah pembuatan media query dengan nilai breakpoint global dari grid options

nilai $min = value breakpoint

• $min dari sm = 480px

nilai $max = value breakpoint - 0.02px

• $max dari sm = (480px - 0.02px) = 479.98px

Mixins untuk media query

@include media-breakpoint-up($breakpoint);
// Hasil Compile
@media (min-width: $min) {
}

@include media-breakpoint-down($breakpoint);
// Hasil Compile
@media (max-width: $max) {
}

@include media-breakpoint-between($lower, $higer);
// Hasil Compile
@media (min-width: $min) and (max-width: $max) {
}

@include media-breakpoint-only($breakpoint);
// Hasil Compile
@media (min-width: $min) and (max-width: $max) {
}

Contoh penggunaan Scss

// Letakkan diawal baris
@import 'styles-palletes.scss';
@import 'grid/mixins/_breakpoints.scss';

.example-content-main {
  padding: 10px;

  p {
    font-size: 14px;
  }

  @include media-breakpoint-up(sm) {
    padding: 20px;

    p {
      font-size: 16px;
    }
  }
  @include media-breakpoint-down(lg) {
    padding: 30px;

    p {
      font-size: 18px;
    }
  }
}

Hasil compile scss :

.example-content-main {
  padding: 10px;
}
.example-content-main p {
  font-size: 14px;
}

@media (min-width: 480px) {
  .example-content-main {
    padding: 20px;
  }
  .example-content-main p {
    font-size: 16px;
  }
}

@media (max-width: 991.98px) {
  .example-content-main {
    padding: 30px;
  }
  .example-content-main p {
    font-size: 18px;
  }
}