startae / hagrid

@import "[path to hagrid]/hagrid";

// * Initialize a basic grid
.parent {

  @include g;

  // * Initialize a grid with a set of modifiers
  // * Modifiers are applied to all items of one grid
  @include g(full, rev);

  // * Alt. Syntax
  @include grid(full, rev);

}

// * Initialize a grid-item with a set of responsive widths
.item {

  // * The general width is set without a breakpoint-keyword (e.g. md)
  // * Responsive widths are set in the config-map $hagrid-breakpoints
  @include i(1/2, 1/3 md, 1/4 lg);

  // * If you initialize an item without arguments or a general width, it defaults to 100% (mobile first)
  @include i;
  @include i(2/3 md, 3/4 lg);

  // * You can use whatever you want as values
  // * Fractions work great for grids and allow for complex grids without doing math
  // * Passing in false will prevent @i from setting any general width

  // * Recommended
  @include i(1/2, 1/3 md, 1/4 lg);

  //* Possible
  @include i(false, lg 50%);

  // * You can use custom breakpoints in Hagrid. Those should be quoted
  // * Breakpoints pointing at $hagrid-breakpoints should not be quoted
  @include i(2/3 "(min-width: 580px)", 1/3 lg);

  // * Alt. Syntax
  @include item();
}

// * Specify gutters between items. They are used like modifiers or applied to all grids
// * If $layout-gutters exists it will be used instead (so you don't have to modify this file directly)
$hagrid-gutters: (
  default: 1.5rem,
  full: 0,
  narrow: 0.5rem,
  wide: 3rem
) !default;

// * Set common breakpoints used in your project. Can be used in the @bp-mixin (see below)
// * If $layout-breakpoints exists it will be used instead (so you don't have to modify this file directly)
$hagrid-breakpoints: (
  sm: "(min-width: 35.5em)",
  md: "(min-width: 48em)",
  lg: "(min-width: 64em)",
  xl: "(min-width: 80em)"
) !default;

// * Gutters and modifiers are applied to all items of each grid-container
// * By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set it here
$hagrid-item-selector: "> *" !default;

// * Modifiers are set on grids
@include g(center, middle, full);

.item {
  // * Single Breakpoint
  @include bp(md) {
    text-align: left;
  }

  // * Multiple Breakpoints
  @include bp(md, lg) {
    text-align: left;
  }

  // * Specific Breakpoints
  @include bp("(min-width: 568px and max-width: 640px)") {
    text-align: left;
  }
}

.stretch {
  @include g;
  > .item {
    @include i;
    @include stretch;
  }
}

// Stretch accepts a selector as parameter, it defaults to "> *"
.stretch {
  @include g;
  > .item {
    @include i;
    @include stretch(".stretched-items");
  }
}

// Basic automatic grid
.auto {
  @include g;
}

.auto-item {
  @include i(auto);
}

// Pinned elements will keep their width - while their surrounding elements change.
.auto-pinned {
  @include g;
}

.auto-item--pinned {
  @include i(1/3);
}

.auto-item {
  @include i(auto);
}

// You can use automatic grids on any breakpoint you like
.auto--responsive {
  @include g;
}

.auto-item--responsive {
  @include i(1/2, md auto);
}