cbracco-css-grid.md

/* ================================================================== *\
   Grids ($grids)
\* ================================================================== */

/**
 * Usage:
 *
 * <div class="grid">
 *     <div class="grid-item one-third">
 *         <p>One-third grid</p>
 *     </div><!--
 *
 *  --><div class="grid-item two-thirds">
 *         <p>Two-thirds grid</p>
 *     </div><!--
 *
 *  --><div class="grid-item one-half">
 *         <p>One-half grid</p>
 *     </div><!--
 *
 *  --><div class="grid-item one-fourth">
 *         <p>One-fourth grid</p>
 *     </div><!--
 *
 *  --><div class="grid-item one-fourth">
 *         <p>One-fourth grid</p>
 *     </div>
 * </div>
 */

/**
 * Grid containers
 * 1. Remove default styles in case `.grid` is on a <ul> element
 * 2. Default gutter width = @base-spacing-unit
 */
.grid {
  margin: 0;
  /* 1 */
  margin-left: -1.5rem;
  /* 2 */
  padding: 0;
  /* 1 */
  list-style: none;
  /* 1 */
}

/**
 * Grid items
 * 1. `.grid-item` elements are 100% width by default
 * 2. Default gutter width = @base-spacing-unit
 * 3. Ensure `.grid-item` is aligned to the top of its container
 */
.grid-item {
  display: inline-block;
  width: 100%;
  /* 1 */
  padding-left: 1.5rem;
  /* 2 */
  vertical-align: top;
  /* 3 */
}

/**
 * Grid items rendering order
 * .grid-ltr = left-to-right (default)
 * .grid-rtl = right-to-left
 */
.grid-ltr {
  direction: ltr;
}

.grid-ltr .grid-item {
  direction: rtl;
}

.grid-rtl {
  direction: rtl;
}

.grid-rtl .grid-item {
  direction: ltr;
}

@media (min-width: 480px) { --- .xs-* --- }
@media (min-width: 600px) { --- .sm-* --- }
@media (min-width: 768px) { --- .md-* --- }
@media (min-width: 960px) { --- .lg-* --- }
@media (min-width: 1280px) { --- .xl-* --- }
@media (min-width: 1440px) { --- .xxl-* --- }

/**
 * Grid gutters
 */
.gutter-0,
.gutter-none {
  margin-left: 0;
}

.gutter-0 > .grid-item,
.gutter-none > .grid-item {
  padding-left: 0;
}

.gutter-1px {
  margin-left: -1px;
}

.gutter-1px > .grid-item {
  padding-left: 1px;
}

[class~=".gutter-1/2"],
.gutter-half {
  margin-left: -0.75rem;
}

[class~=".gutter-1/2"] > .grid-item,
.gutter-half > .grid-item {
  padding-left: 0.75rem;
}

.gutter-1,
.gutter-whole {
  margin-left: -1.5rem;
}

.gutter-1 > .grid-item,
.gutter-whole > .grid-item {
  padding-left: 1.5rem;
}

.gutter-2x,
.gutter-double {
  margin-left: -3rem;
}

.gutter-2x > .grid-item,
.gutter-double > .grid-item {
  padding-left: 3rem;
}

@media (min-width: 480px) { --- .xs-* --- }
@media (min-width: 600px) { --- .sm-* --- }
@media (min-width: 768px) { --- .md-* --- }
@media (min-width: 960px) { --- .lg-* --- }
@media (min-width: 1280px) { --- .xl-* --- }
@media (min-width: 1440px) { --- .xxl-* --- }

/* ================================================================== *\
   Widths ($widths)
\* ================================================================== */

/* Whole */
[class~="1/1"],
.one-whole {
  width: 100% !important;
}

/* Halves */
[class~="1/2"],
.one-half,
[class~="2/4"],
.two-fourths,
[class~="3/6"],
.three-sixths,
[class~="4/8"],
.four-eighths,
[class~="5/10"],
.five-tenths,
[class~="6/12"],
.six-twelfths {
  width: 50% !important;
}

/* Thirds */
[class~="1/3"],
.one-third,
[class~="2/6"],
.two-sixths,
[class~="3/9"],
.three-ninths,
[class~="4/12"],
.four-twelfths {
  width: 33.3333333% !important;
}

[class~="2/3"],
.two-thirds,
[class~="4/6"],
.four-sixths,
[class~="6/9"],
.six-ninths,
[class~="8/12"],
.eight-twelfths {
  width: 66.6666666% !important;
}

/* Fourths */
[class~="1/4"],
.one-fourth,
[class~="2/8"],
.two-eighths,
[class~="3/12"],
.three-twelfths {
  width: 25% !important;
}

[class~="3/4"],
.three-fourths,
[class~="6/8"],
.six-eighths,
[class~="9/12"],
.nine-twelfths {
  width: 75% !important;
}

/* Fifths */
[class~="1/5"],
.one-fifth,
[class~="2/10"],
.two-tenths {
  width: 20% !important;
}

[class~="2/5"],
.two-fifths,
[class~="4/10"],
.four-tenths {
  width: 40% !important;
}

[class~="3/5"],
.three-fifths,
[class~="6/10"],
.six-tenths {
  width: 60% !important;
}

[class~="4/5"],
.four-fifths,
[class~="8/10"],
.eight-tenths {
  width: 80% !important;
}

/* Sixths */
[class~="1/6"],
.one-sixth,
[class~="2/12"],
.two-twelfths {
  width: 16.6666666% !important;
}

[class~="5/6"],
.five-sixths,
[class~="10/12"],
.ten-twelfths {
  width: 83.3333333% !important;
}

/* Eighths */
[class~="1/8"],
.one-eighth {
  width: 12.5% !important;
}

[class~="3/8"],
.three-eighths {
  width: 37.5% !important;
}

[class~="5/8"],
.five-eighths {
  width: 62.5% !important;
}

[class~="7/8"],
.seven-eighths {
  width: 87.5% !important;
}

/* Ninths */
[class~="1/9"],
.one-ninth {
  width: 11.1111111% !important;
}

[class~="2/9"],
.two-ninths {
  width: 22.2222222% !important;
}

[class~="4/9"],
.four-ninths {
  width: 44.4444444% !important;
}

[class~="5/9"],
.five-ninths {
  width: 55.5555555% !important;
}

[class~="7/9"],
.seven-ninths {
  width: 77.7777777% !important;
}

[class~="8/9"],
.eight-ninths {
  width: 88.8888888% !important;
}

/* Tenths */
[class~="1/10"],
.one-tenth {
  width: 10% !important;
}

[class~="3/10"],
.three-tenths {
  width: 30% !important;
}

[class~="7/10"],
.seven-tenths {
  width: 70% !important;
}

[class~="9/10"],
.nine-tenths {
  width: 90% !important;
}

/* Twelfths */
[class~="1/12"],
.one-twelfth {
  width: 8.3333333% !important;
}

[class~="5/12"],
.five-twelfths {
  width: 41.6666666% !important;
}

[class~="7/12"],
.seven-twelfths {
  width: 58.3333333% !important;
}

[class~="11/12"],
.eleven-twelfths {
  width: 91.6666666% !important;
}

@media (min-width: 480px) { --- .xs-* --- }
@media (min-width: 600px) { --- .sm-* --- }
@media (min-width: 768px) { --- .md-* --- }
@media (min-width: 960px) { --- .lg-* --- }
@media (min-width: 1280px) { --- .xl-* --- }
@media (min-width: 1440px) { --- .xxl-* --- }