Sircus

Base

<div class="Grid t-gutterReset">
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
</div>

Responsive

<div class="Grid t-gutterReset">
  <div class="Grid-col t-sm-widthHalf t-md-width3of12 t-lg-width2of12">...</div>
  <div class="Grid-col t-sm-widthHalf t-md-width3of12 t-lg-width2of12">...</div>
  <div class="Grid-col t-sm-widthHalf t-md-width3of12 t-lg-width2of12">...</div>
</div>

Modifier: .Grid--center

<div class="Grid Grid--center t-gutterReset">
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
</div>

Modifier: .Grid--right

<div class="Grid Grid--right t-gutterReset">
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
</div>

Modifier: .Grid--middle

<div class="Grid Grid--middle t-gutterReset">
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
</div>

Modifier: .Grid--bottom

<div class="Grid Grid--bottom t-gutterReset">
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
</div>

Modifier: .Grid--float

<div class="Grid Grid--float t-gutterReset">
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
  <div class="Grid-col t-width4of12">...</div>
</div>

Install

npm install sircus-components-grid sircus-variables sircus-tools-width

CSS import

@import "sircus-components-grid";
@import "sircus-tools-width";
@import "sircus-tools-width/responsive";
@import "sircus-variables";

CSS

:root {
  --Grid-gutter: var(--gutter);
  --Grid-col-fontSize: var(--fontSize);
}

/*　sircus-components-grid
======================================== */

.Grid {
  font-size: 0;
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
}

.Grid .Grid {
  margin-left: calc(0 - var(--Grid-gutter));
  margin-right: calc(0 - var(--Grid-gutter));
}

.Grid-col {
  font-size: var(--Grid-col-fontSize);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  min-height: 1px;
  padding-right: var(--Grid-gutter);
  padding-left: var(--Grid-gutter);
  text-align: left;
  vertical-align: top;
}

/* .Grid--float */
.Grid--float > .Grid-col {
  float: left;
}


.Grid--center { text-align: center; }
.Grid--right  { text-align: right; }
.Grid--left   { text-align: left; }

.Grid--top > .Grid-col     { vertical-align: top; }
.Grid--middle > .Grid-col  { vertical-align: middle; }
.Grid--bottom > .Grid-col  { vertical-align: bottom; }

sircus-tools-width

/*
 * sircus-tools-width
 ================================================== */
.t-width1of12  { width: calc((1 / 12) * 100)% !important; }
.t-width2of12  { width: calc((2 / 12) * 100)% !important; }
.t-width3of12  { width: calc((3 / 12) * 100)% !important; }
.t-width4of12  { width: calc((4 / 12) * 100)% !important; }
.t-width5of12  { width: calc((5 / 12) * 100)% !important; }
.t-width6of12,
.t-widthHalf   { width: calc((6 / 12) * 100)% !important; }
.t-width7of12  { width: calc((7 / 12) * 100)% !important; }
.t-width8of12  { width: calc((8 / 12) * 100)% !important; }
.t-width9of12  { width: calc((9 / 12) * 100)% !important; }
.t-width10of12 { width: calc((10 / 12) * 100)% !important; }
.t-width11of12 { width: calc((11 / 12) * 100)% !important; }
.t-width12of12,
.t-widthFull   { width: calc((12 / 12) * 100)% !important; }