Sircus

float

<div class="t-pullLeft">Left</div>
<div class="t-pullRight">Right</div>
<div class="t-pullNone">None</div>

Position

<div class="t-relative">
  <div class="t-static">...</div>
  <div class="t-absolute">...</div>
  <div class="t-fixed">...</div>
</div>

Center Block

<div class="t-center">e.g: max-width:300px;</div>

Install

npm install sircus-tools-layout sircus-variables

CSS import

@import "sircus-tools-layout";
@import "sircus-tools-layout/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-layout
 ================================================== */
.t-pullLeft   { float: left !important; }
.t-pullRight  { float: right !important; }
.t-pullNone   { float: none !important; }

.t-center,
.t-centerBlock {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.t-static     { position: static !important; }
.t-absolute   { position: absolute !important; }
.t-fixed      { position: fixed !important; }
.t-relative   { position: relative !important; }

.t-top0    { top: 0 !important; }
.t-bottom0 { bottom: 0 !important; }
.t-left0   { left: 0 !important; }
.t-right0  { right: 0 !important; }

Responsice CSS

@media (--viewport-sm) {
  .t-sm-pullLeft   { float: left !important; }
  .t-sm-pullRight  { float: right !important; }
  .t-sm-pullNone   { float: none !important; }

  .t-sm-center,
  .t-sm-centerBlock {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .t-sm-static     { position: static !important; }
  .t-sm-absolute   { position: absolute !important; }
  .t-sm-fixed      { position: fixed !important; }
  .t-sm-relative   { position: relative !important; }

  .t-sm-top0    { top: 0 !important; }
  .t-sm-bottom0 { bottom: 0 !important; }
  .t-sm-left0   { left: 0 !important; }
  .t-sm-right0  { right: 0 !important; }
}

@media (--viewport-md) {
  .t-md-pullLeft   { float: left !important; }
  .t-md-pullRight  { float: right !important; }
  .t-md-pullNone   { float: none !important; }

  .t-md-center,
  .t-md-centerBlock {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .t-md-static     { position: static !important; }
  .t-md-absolute   { position: absolute !important; }
  .t-md-fixed      { position: fixed !important; }
  .t-md-relative   { position: relative !important; }

  .t-md-top0    { top: 0 !important; }
  .t-md-bottom0 { bottom: 0 !important; }
  .t-md-left0   { left: 0 !important; }
  .t-md-right0  { right: 0 !important; }
}

@media (--viewport-lg) {
  .t-lg-pullLeft   { float: left !important; }
  .t-lg-pullRight  { float: right !important; }
  .t-lg-pullNone   { float: none !important; }

  .t-lg-center,
  .t-lg-centerBlock {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .t-lg-static     { position: static !important; }
  .t-lg-absolute   { position: absolute !important; }
  .t-lg-fixed      { position: fixed !important; }
  .t-lg-relative   { position: relative !important; }

  .t-lg-top0    { top: 0 !important; }
  .t-lg-bottom0 { bottom: 0 !important; }
  .t-lg-left0   { left: 0 !important; }
  .t-lg-right0  { right: 0 !important; }
}