1.1.0 • Published 3 years ago
asmcss-mixin-w v1.1.0
asmcss-mixin-w
A mixin for Assembler CSS that provides extended functionality to set the width of an element.
Installation
Install the mixin from npm:
npm install asmcss-mixin-wor use the mixin from CDN:
<script src="https://unpkg.com/asmcss-mixin-w@^1/dist/js/asmcss-mixin-w.min.js"></script>Usage
<div x-style="flex;">
<div x-style:"^w:6/12;">
Dustin and Steve become like proud dads to each other in season 3.
They argue a lot, but they also praise each other's achievements.
For instance, when the Scoops Troop is left to their own devices,
it's Steve who has to step up and fight an evil Russian to get to where they need to go.
</div>
<div x-style:"^w:6/12;">
Earlier in the season, Dustin teases Steve about losing fights all the time - first with
Jonathan, then Billy. Steve realizes this is true, so when he defeats the Russian, Dustin
jumps for joy, amazed.
</div>
</div>Documentation
| value | css properties |
|---|---|
| auto | width: auto; |
| 1/2 | width: 50% |
| 1/3 | width: 33.333333%; |
| 2/3 | width: 66.666667%; |
| 1/4 | width: 25%; |
| 2/4 | width: 50%; |
| 3/4 | width: 75%; |
| 1/5 | width: 20%; |
| 2/5 | width: 40%; |
| 3/5 | width: 60%; |
| 4/5 | width: 80%; |
| 1/6 | width: 16.666667%; |
| 2/6 | width: 33.333333%; |
| 3/6 | width: 50%; |
| 4/6 | width: 66.666667%; |
| 5/6 | width: 83.333333%; |
| 1/12 | width: 8.333333%; |
| 2/12 | width: 16.666667%; |
| 3/12 | width: 25%; |
| 4/12 | width: 33.333333%; |
| 5/12 | width: 41.666667%; |
| 6/12 | width: 50%; |
| 7/12 | width: 58.333333%; |
| 8/12 | width: 66.666667%; |
| 9/12 | width: 75%; |
| 10/12 | width: 83.333333%; |
| 11/12 | width: 91.666667%; |
| full | width: 100%; |
| screen | width: 100vw; |
| min | width: min-content; |
| max | width: max-content; |
License
The MIT License (MIT) Copyright (c) 2021 Sergey Romanenko