sircus-tools-border-responsive

Install

npm:

$ npm install sircus-variables sircus-tools-border-responsive sircus-tools-color

Usage

cssnext:

input.css

@import "sircus-tools-border-responsive";
@import "sircus-tools-color";
@import "sircus-variables";

sass:

input.scss

@import "node_modules/sircus-variables/converted";
@import "node_modules/sircus-tools-border-responsive/converted";
@import "node_modules/sircus-tools-color/converted";

html

<div class="t-sm-border">...</div>
<div class="t-sm-borderTop">...</div>
<div class="t-sm-borderLeft">...</div>
<div class="t-sm-borderBottom">...</div>
<div class="t-sm-borderRight">...</div>
 
<div class="t-sm-border2x">...</div>
<div class="t-sm-borderTop2x">...</div>
<div class="t-sm-borderLeft2x">...</div>
<div class="t-sm-borderBottom2x">...</div>
<div class="t-sm-borderRight2x">...</div>
 
<div class="t-sm-border3x">...</div>
<div class="t-sm-borderTop3x">...</div>
<div class="t-sm-borderLeft3x">...</div>
<div class="t-sm-borderBottom3x">...</div>
<div class="t-sm-borderRight3x">...</div>
 
<div class="t-sm-border4x">...</div>
<div class="t-sm-borderTop4x">...</div>
<div class="t-sm-borderLeft4x">...</div>
<div class="t-sm-borderBottom4x">...</div>
<div class="t-sm-borderRight4x">...</div>
 
<div class="t-sm-border0">...</div>
<div class="t-sm-borderTop0">...</div>
<div class="t-sm-borderLeft0">...</div>
<div class="t-sm-borderBottom0">...</div>
<div class="t-sm-borderRight0">...</div>
 
 
<div class="t-md-border">...</div>
<div class="t-md-borderTop">...</div>
<div class="t-md-borderLeft">...</div>
<div class="t-md-borderBottom">...</div>
<div class="t-md-borderRight">...</div>
 
<div class="t-md-border2x">...</div>
<div class="t-md-borderTop2x">...</div>
<div class="t-md-borderLeft2x">...</div>
<div class="t-md-borderBottom2x">...</div>
<div class="t-md-borderRight2x">...</div>
 
<div class="t-md-border3x">...</div>
<div class="t-md-borderTop3x">...</div>
<div class="t-md-borderLeft3x">...</div>
<div class="t-md-borderBottom3x">...</div>
<div class="t-md-borderRight3x">...</div>
 
<div class="t-md-border4x">...</div>
<div class="t-md-borderTop4x">...</div>
<div class="t-md-borderLeft4x">...</div>
<div class="t-md-borderBottom4x">...</div>
<div class="t-md-borderRight4x">...</div>
 
<div class="t-md-border0">...</div>
<div class="t-md-borderTop0">...</div>
<div class="t-md-borderLeft0">...</div>
<div class="t-md-borderBottom0">...</div>
<div class="t-md-borderRight0">...</div>
 
 
<div class="t-lg-border">...</div>
<div class="t-lg-borderTop">...</div>
<div class="t-lg-borderLeft">...</div>
<div class="t-lg-borderBottom">...</div>
<div class="t-lg-borderRight">...</div>
 
<div class="t-lg-border2x">...</div>
<div class="t-lg-borderTop2x">...</div>
<div class="t-lg-borderLeft2x">...</div>
<div class="t-lg-borderBottom2x">...</div>
<div class="t-lg-borderRight2x">...</div>
 
<div class="t-lg-border3x">...</div>
<div class="t-lg-borderTop3x">...</div>
<div class="t-lg-borderLeft3x">...</div>
<div class="t-lg-borderBottom3x">...</div>
<div class="t-lg-borderRight3x">...</div>
 
<div class="t-lg-border4x">...</div>
<div class="t-lg-borderTop4x">...</div>
<div class="t-lg-borderLeft4x">...</div>
<div class="t-lg-borderBottom4x">...</div>
<div class="t-lg-borderRight4x">...</div>
 
<div class="t-lg-border0">...</div>
<div class="t-lg-borderTop0">...</div>
<div class="t-lg-borderLeft0">...</div>
<div class="t-lg-borderBottom0">...</div>
<div class="t-lg-borderRight0">...</div>

width sircus-tools-color

<p class="t-sm-border t-borderGray90">...</p>

Contributing

We Need Your Help!

License

Released under the MIT license.