@nicolas-riciotti/utilitycss v0.0.26

TODOS

Variable

$btnPrimary:12px
--var1 --var2

Mixins

@var{d:flex,items:stretch,just:between}
@helper{uppercase,block}
@media(max-w:1024px){uppercase,block,p-x:6.26%}
@media:m{uppercase,block}
@anim:animName{}
@state:hover{}
@calc{}
@mixin{}
@query(input.foo:checked + > &){uppercase block}
foo(2){ b:i m-l:i }

Add Calc Support

w:calc(100%-1px)

States Merging

block bg:light p-y:[60fy,80fy] font:bold,(25fx/30fx),-0.04em m-b:25fy
hover { c:red border:solid,1px,red }
animIn { shift:y:100% c:red border:solid,1px,red (.foo + &):ff:alidJ }

Query Selector

$(:hover):c:red
$(:hover):bg:red
$(:hover):w:100px

RegExp

/(.*)+[^0-9]{2}/

Property Shoftend Conflicts

auto detect which property to use based on value when dealing with conflict this should reduce number of properties/helpers to learn and shoudl allow usage pf irst letter or any css pro Direction(right,left,top,bottom,x,y) must be prefixed with - Can use delimiter on direction to share value

Abbreviations

Handle 'url()' in value

bi:url('../bar/foo.jpg') => background-image:url("../bar/foo.jpg")

Escaping white space

use \ instead of ,
this allow usage of ',' for other fucntionality, and prevent conflcit in custom selector prefix (allow both?)

border:solid,px,red => border:solid\1px\red
(.foo + &):c:red => (.foo\+\&):c:red

Transform

sc:2 rt:12deg ts:-50%\-50%

Unit Less == %

0.625 = 6.25%
0.5   = 50%
1     = 100%
2     = 200%

Component

$(.foo:checked + &):(p:10px f:12px,22px,bold bg:red b:none)

EXAMPLE

space-y:25fy  w:calc(32px\+\11))
d:block bg:$light py:{$a,$b} c:$primary font:$Ubuntu

Old syntax

<button class="
    | appearance:none bg:none abs fit tl:0 block transform shift-x:-50% 
    | anim-in:shift-x:0% 
    | anim-in:tween:all,1s,1.3s,easeOut">
    <span class="
        | iblock abs tr:0 radius:100px h:100%
        | transform scale:0 shift-x:50% 
        | anim-in:scale:1 anim-in:shift-x:0%
        | anim-in:tween:all,1s,1.3s,easeOut">
        <span class="bg:#fff abs t:0 l:50% block w:300% h:fit"></span>
        <span class="radius:100px mask bg:blue  abs tl:0 block fit"></span>
    </span>
    <span class="
        | pointer:none iblock abs tl:0 fit radius:100px mask 
        | anim-in:tween:all,0.9s,1.7s,easeOut2 
        | transform shift-x:-100% anim-in:shift-x:0%">
        <span class="
            | iblock fit border:solid,2px,light radius:100px 
            | anim-in:tween:all,0.9s,1.7s,easeOut2 
            | transform shift-x:100% anim-in:shift-x:0%">
        </span>
    </span>
</button>

New syntax

<button class="
    | -wk-ap|bg:nn ps:a w|h:1 t|l:0 dp:b tx:-.5 enter:tx:0|ts:*,1,1.3,o2
    | px:.625@m">
    <span class="
        | d:ib p:a t|r:0 br:100 h:1 s:0 tx:.5 
        | :hover:s:1|tx:0|ts:*,1,1.3,o3">
        <span class="b:#f p:a t:0 l:0.5 d:b w:3 h:1"></span>
        <span class="br:100 of:h bg:bl ps:a t|l:0 d:b w|h:1"></span>
    </span>
    <span class="
        | pn:nn dp:ib ps:a t|l:0 w|h:1 br:100 t-x:-1
        | ov:h enter:tr:a,0.9,1.7,o2|tx:0">
        <span class="
            | tx:1 dp:ib w|h:1 bd:s,2,#f bd-br:100 
            | enter:t:*,0.9,1.7,o2|tx:0">
        </span>
    </span>
</button>

Colors

can use 1, 2 or 3 or 6 hexaad let utility css auto fill:

#a      => #aaaaaa  
#ab     => #ababab  
#abc    => #abcabc  
#abcdef => #abcdef  

<div class="c:#f bg:#ef bd:s,1,#efa"></div>

... {
    color: #ffffff;
    background: #efefef;
    border: solid,1px#efaefa;
}

Inline Math

<div class="p:10px*2 m:10px/2 l:5px+5px t:5px-5px bd:s,5^2,#0"></div>

... {
    padding: 20px;
    margin: 5px;
    left: 10px;
    top: 0px;
    border: solid 25px #000
}

Inline loop

(for:i,5):bs:0,2^i,2^i,#0x12

(for:i,0..5):bs:0,2^i,2^i,#0x12

... {
    box-shadow: 
        0 1px 1px rgba(0,0,0,0.12), 
        0 2px 2px rgba(0,0,0,0.12), 
        0 4px 4px rgba(0,0,0,0.12), 
        0 8px 8px rgba(0,0,0,0.12),
        0 16px 16px rgba(0,0,0,0.12);
}

Example

    <button 
        @click="${ this.slidePrev }" 
        class="
            cursor:pointer group rel transform tween:all,0.5s,easeOut 
            c:#fff ${selectedIndex > 0 ? 'scale:1' : 'scale:0' } abs 
            t:50% l:60fx shift-x:-50% transform shift-y:-50% pointer:auto
            bg:primary h:50px w:50px radius:100px hover:scale:1.2!  
            hover:border:solid,1px,primary hover:c:primary mask ">
        <span class="
            abs tl:0 w:fit h:fit tween:transform,0.5s,easeOut bg:#fff 
            transform scale:0  group-hover:scale:1">
        </span>
        <span class="
            group-hover:c:primary bg:none c:#fff z:2 block 
            tween:all,0.5s,easeOut abs tl:50% 
            l:50% w:10px h:10px transform scale:1  shift-x:-50% 
            rotate:45deg group-hover:scale:0.8! shift-y:-50%">
            <span class="
                bg:currentColor block w:2px h:10px radius:3px abs l:0 t:0">
            </span>
            <span class="
                bg:currentColor block w:10px h:2px radius:3px abs l:0 b:0">
            </span>
        </span>
    </button>

    <button 
        @click="${this.slidePrev}" 
        class="
            $foo:r:3;p:a;b:c;d:b;:h>:a:line,1.3,.2,o
            @k[line]0{ty:1;o:0}.5{ty:0.7;o:.2}1:{ty:0;o:1}
            c:p p:r t:0.5,> c:#f t:.5 l:60f t:-.5 o:h p:a b:c
            b:s,1,cc r:100 w:50,30 h:12,10 s:${ii>0|0} :b:p:a :b:tl:0 :b:wh:1 
            :b:t:*,.5,> :b:b:#f :b:s:0 :h:s:1.2! :h:c:$c0 :h:b:#f :h:b:s:1
            ">
        <span class=
            "b:n c:#f z:2 d:b p:a tl:.5 l:.5 ti:0.5,o wh:10 t:-.5 r:45d 
            s:1 :h>:s:0.8 :h>:r:45">
            <span class="w:2 h:10 foo tl:0"></span>
            <span class="w:10 h:2 foo bl:0"></span>
        </span>
    </button>