sircus-tools-align-responsive

Install

npm:

$ npm install sircus-tools-align-responsive sircus-variables

Usage

cssnext:

input.css

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

sass:

input.scss

@import "./node_modules/sircus-variables/converted";
@import "./node_modules/sircus-tools-align-responsive/converted";

html

/* text-align */
<p class="t-sm-alignLeft"></p>
<p class="t-sm-alignRight"></p>
<p class="t-sm-alignCenter"></p>
<p class="t-sm-alignJustify"></p>
/* vertical-align */
<p class="t-sm-alignTop"></p>
<p class="t-sm-alignMiddle"></p>
<p class="t-sm-alignBottom"></p>
<p class="t-sm-alignBaseline"></p>
<p class="t-sm-alignTextTop"></p>
<p class="t-sm-alignTextBottom"></p>

/* text-align */
<p class="t-md-alignLeft"></p>
<p class="t-md-alignRight"></p>
<p class="t-md-alignCenter"></p>
<p class="t-md-alignJustify"></p>
/* vertical-align */
<p class="t-md-alignTop"></p>
<p class="t-md-alignMiddle"></p>
<p class="t-md-alignBottom"></p>
<p class="t-md-alignBaseline"></p>
<p class="t-md-alignTextTop"></p>
<p class="t-md-alignTextBottom"></p>

/* text-align */
<p class="t-lg-alignLeft"></p>
<p class="t-lg-alignRight"></p>
<p class="t-lg-alignCenter"></p>
<p class="t-lg-alignJustify"></p>
/* vertical-align */
<p class="t-lg-alignTop"></p>
<p class="t-lg-alignMiddle"></p>
<p class="t-lg-alignBottom"></p>
<p class="t-lg-alignBaseline"></p>
<p class="t-lg-alignTextTop"></p>
<p class="t-lg-alignTextBottom"></p>

Contributing

We Need Your Help!

License

Released under the MIT license.