asmcss-mixin-w

1.1.0 • Public • Published

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-w

or 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

Package Sidebar

Install

npm i asmcss-mixin-w

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

6.53 kB

Total Files

8

Last publish

Collaborators

  • awilum