Sircus

Tools Module For CSS text-align and vertical-align.

text-align

Left

Right

Center

<p class="t-alignLeft">Left</p>
<p class="t-alignRight">Right</p>
<p class="t-alignCenter">Center</p>

text-align: justfy

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Justify

<p class="t-alignJustify">Justify</p>

vertical-align

Top Middle Bottom Baseline TextTop TextBottom Super Sub

<span class="t-alignTop">Top</span>
<span class="t-alignMiddle ">Middle</span>
<span class="t-alignBottom">Bottom</span>
<span class="t-alignBaseline">Baseline</span>
<span class="t-alignTextTop">TextTop</span>
<span class="t-alignTextBottom">TextBottom</span>
<span class="t-alignSuper">Super</span>
<span class="t-alignSub">Sub</span>

Install

npm install sircus-tools-align sircus-variables

CSS import

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

CSS

/*
 * sircus-tools-align
 ================================================== */
.t-alignLeft       { text-align: left !important; }
.t-alignRight      { text-align: right !important; }
.t-alignCenter     { text-align: center !important; }
.t-alignJustify    {
  text-align: justify !important;
  text-justify: inter-ideograph !important;
}

.t-alignTop        { vertical-align: top !important; }
.t-alignMiddle     { vertical-align: middle !important; }
.t-alignBottom     { vertical-align: bottom !important; }
.t-alignBaseline   { vertical-align: baseline !important; }
.t-alignTextTop    { vertical-align: text-top !important; }
.t-alignTextBottom { vertical-align: text-bottom !important; }
.t-alignSuper      { vertical-align: super !important; }
.t-alignSub        { vertical-align: sub !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-alignLeft       { text-align: left !important; }
  .t-sm-alignRight      { text-align: right !important; }
  .t-sm-alignCenter     { text-align: center !important; }
  .t-sm-alignJustify    { 
    text-align: justify !important;
    text-justify: inter-ideograph !important;
  }

  .t-sm-alignBaseline   { vertical-align: baseline !important; }
  .t-sm-alignTop        { vertical-align: top !important; }
  .t-sm-alignMiddle     { vertical-align: middle !important; }
  .t-sm-alignBottom     { vertical-align: bottom !important; }
  .t-sm-alignTextTop    { vertical-align: text-top !important; }
  .t-sm-alignTextBottom { vertical-align: text-bottom !important; }
  .t-sm-alignSuper      { vertical-align: super !important; }
  .t-sm-alignSub        { vertical-align: sub !important; }
}

@media (--viewport-md) {
  .t-md-alignLeft       { text-align: left !important; }
  .t-md-alignRight      { text-align: right !important; }
  .t-md-alignCenter     { text-align: center !important; }
  .t-md-alignJustify    {
    text-align: justify !important;
    text-justify: inter-ideograph !important;
  }

  .t-md-alignBaseline   { vertical-align: baseline !important; }
  .t-md-alignTop        { vertical-align: top !important; }
  .t-md-alignMiddle     { vertical-align: middle !important; }
  .t-md-alignBottom     { vertical-align: bottom !important; }
  .t-md-alignTextTop    { vertical-align: text-top !important; }
  .t-md-alignTextBottom { vertical-align: text-bottom !important; }
  .t-md-alignSuper      { vertical-align: super !important; }
  .t-md-alignSub        { vertical-align: sub !important; }
}

@media (--viewport-lg) {
  .t-lg-alignLeft       { text-align: left !important; }
  .t-lg-alignRight      { text-align: right !important; }
  .t-lg-alignCenter     { text-align: center !important; }
  .t-lg-alignJustify    {
    text-align: justify !important;
    text-justify: inter-ideograph !important;
  }

  .t-lg-alignBaseline   { vertical-align: baseline !important; }
  .t-lg-alignTop        { vertical-align: top !important; }
  .t-lg-alignMiddle     { vertical-align: middle !important; }
  .t-lg-alignBottom     { vertical-align: bottom !important; }
  .t-lg-alignTextTop    { vertical-align: text-top !important; }
  .t-lg-alignTextBottom { vertical-align: text-bottom !important; }
  .t-lg-alignSuper      { vertical-align: super !important; }
  .t-lg-alignSub        { vertical-align: sub !important; }
}