sircus-tools-width-responsive

Module For Responsive CSS Column Widths.

Usage no npm install needed!

<script type="module">
  import sircusToolsWidthResponsive from 'https://cdn.skypack.dev/sircus-tools-width-responsive';
</script>

README

sircus-tools-width-responsive

npm version

Install

npm:

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

Usage

cssnext:

input.css

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

sass:

input.scss

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

html

<!-- sm -->
<div class="t-sm-widthHalf"></div>
<div class="t-sm-widthFull"></div>

<div class="t-sm-width1of10"></div>
<div class="t-sm-width2of10"></div>
<div class="t-sm-width3of10"></div>
<div class="t-sm-width4of10"></div>
<div class="t-sm-width5of10"></div>
<div class="t-sm-width6of10"></div>
<div class="t-sm-width7of10"></div>
<div class="t-sm-width8of10"></div>
<div class="t-sm-width9of10"></div>

<div class="t-sm-width1of12"></div>
<div class="t-sm-width2of12"></div>
<div class="t-sm-width3of12"></div>
<div class="t-sm-width4of12"></div>
<div class="t-sm-width5of12"></div>
<div class="t-sm-width6of12"></div>
<div class="t-sm-width7of12"></div>
<div class="t-sm-width8of12"></div>
<div class="t-sm-width9of12"></div>
<div class="t-sm-width10of12"></div>
<div class="t-sm-width11of12"></div>

<!-- md -->
<div class="t-md-width*"></div>

<!-- lg -->
<div class="t-lg-width*"></div>

Contributing

We Need Your Help!

License

Released under the MIT license.