/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
▌ │ SherviNet ⚙️ [ 𝙁 𝙖 𝙨 𝙩 𝙇 𝙖 𝙮 𝙤 𝙪 𝙩 ] | v.2.0.0
▌ │
▌ ✎ Author:𝒮𝒽𝑒𝓇𝓋𝒾𝓃 𝒮𝒽𝒶𝓇𝒷𝒶𝒻𝒾𝒶𝓃 (ʜᴛᴛᴘꜱ://ᴡᴡᴡ.SherviNet.ᴄᴏᴍ)
└⌨ ᴄᴏᴘʏʀɪɢʜᴛ © 2010 - 2023 SherviNet ʟʟᴄ . ALL RIGHTS RESERVED
 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

--- WHAT IS [ 𝙁𝙖𝙨𝙩𝙇𝙖𝙮𝙤𝙪𝙩 ]?
    SherviNet ⚙️ [ 𝙁𝙖𝙨𝙩𝙇𝙖𝙮𝙤𝙪𝙩 ]  is a lightweight and free open source tool to build responsive web interfaces.
    FastLayout is not a UI framework. It is a small, powerful and highly customizable CSS library that you can
    use in every web project includes optional js library for adding fancy animations on all HTML elements. 
    From phone to tablet to desktop, it was designed to work on a variety of mediums with no extra fuss.
    Quick to start with zero compiling or installing necessary. 



--- IS [ 𝙁𝙖𝙨𝙩𝙇𝙖𝙮𝙤𝙪𝙩 ] FOR YOU?
    FastLayout is not just for everyone... It specially designed for developers who wants to use styles on their
    projects with best performance possible and without needing all the utility of larger frameworks. it simplifies
    CSS syntax and provides most of the standard HTML/CSS styles (property:value) as class names that are explicit and easy to remember.



--- SETUP:
    First, use any method to download [ 𝙁𝙖𝙨𝙩𝙇𝙖𝙮𝙤𝙪𝙩 ]. 
    Then add fastlaout css file in the head section of the HTML as rel="stylesheet" and type="text/css"
    and for using optional animations add js file at the end of  your HTML file:
    ----------
    <link rel="stylesheet" href="FASTLAYOUT CSS FILE" type="text/css"/>
    <script src="FASTLAYOUT JS FILE" type="text/javascript">
    ----------
    [ 𝙁𝙖𝙨𝙩𝙇𝙖𝙮𝙤𝙪𝙩 ] is also available via CDN:
    (CSS):  https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?css&min 
    (JS ):  https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?js&min


--- USAGE:
    You can add styles to each HTML elements by passing proper CLASS name from table bellow 
    Example:
    ----------------------------------------
    | CODE (BEFORE) : DEFAULT HTML/CSS 
    ----------------------------------------
        <style>
            #example{
                position:fixed;
                top:40px;
                left:50%;
                padding:20px;
                margin-top:5px;
                margin-left:10px;
                background:black;
                font-size:10pt;
                float:left;
                text-align:center;
                overflow-x:hidden;
                width:50%;
                height:320px;
            }
        </style>
        <div id="example" style="color:red;border:1px solid white">Hello World</div>
     ⇣                 ⇣                  ⇣
    ----------------------------------------
    | CODE (AFTER) : [ 𝙁𝙖𝙨𝙩𝙇𝙖𝙮𝙤𝙪𝙩 ] 
    ----------------------------------------
        <div class="fixed t40 lp50 p20 mt5 mr10 mb5 ml10 bgblack f10 left fcenter oxhidden wp50 h320" >
            Hello World
        </div>



--- More info about above example
    As you can see, we overwrited each CSS property and value (even the inline styles) with FastLayout
    just by adding proper CLASS names from table bellow. 
    For example instead of "font-size:10pt" we used f10 or oxhidden for "overflow-x:hidden"
    FastLayout is easy and you don't need to learn and memorize it's CLASS names. because all CLASS
    names is equivalent to first/two letter of it's original CSS syntax + values.
    All you have to do is just to use the first letter of that property and then type the dynamic value (for % use p ) 
    and for properties wihtout dynamic values /units just type the value alone.
    bellow are some examples for better understanding how FastLayout works:
    --------------------------
        margin-left:60px      =>   ml60
        top:60%               =>   tp60
        top:100px             =>   t60
        display:inline-block  =>   inline-block
        position:absolute     =>   absolute
        border:2px solid      =>   br2
        border-color:black    =>   brcblack



--- ACCEPTING PARAMETERS
    --------------------
    LOADING
    CSS            : https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?css
    CSS (minified) : https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?css&min
    --------------------------
    ANIMATIONS
    JS             : https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?js
    JS (minified)  : https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?js&min 
    --------------------------
    PERFORMANCE
    OPACITY=false  : https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?css&opacity=false     ( for [colors/backgrounds/borders/shadows] )
    SHADOWS=false  : https://engine.shervinet.com/frameworks/shervinet-fastlayout/2.0.0/init?css&shadows=false     ( for [texts/boxes/filter:drop-shadows] )
    



──────────────────────────────────────────────────────────────────────────────────────────────────
[ CSS PROPERTY ]    [    CLASS    ] [  PARAMETERS  ]
──────────────────────────────────────────────────────────────────────────────────────────────────
 $v=value    |   $n=number   |    a=auto     |     (i)=optional "!important" value available
 $o=opacity  |   (mob) = overwrite mobile viewport with "mob" prefix
──────────────────────────────────────────────────────────────────────────────────────────────────
color               [ c$v$o       ] $v:{$col['name']['default']$o:{10,20,30,40,50,60,70,80,90},$col['name']['normal']$o:{10,30,50}}
background          [ bg$v$o      ] $v:{no,$col['name']['default']$o:{10,20,30,40,50,60,70,80,90},$col['name']['normal']$o:{10,30,50}}
background-position [ bg$v        ] $v:{center,top,bottom,left,right,revert,revert-layer}
background-repeat   [ bg$v        ] $v:{no-repeat,repeat,repeatx,repeaty,repeatround,repeatspace,repeatrevert,repeatrevert-layer}
vertical-align      [ $v      (i) ] $v:{middle,baseline,super,sub,bottom,top,text-top,text-bottom}
position            [ $v      (i) ] $v:{fixed.absolute,static,relative}                                                            
display             [ $v      (i) ] $v:{hidden,hiddeni,visible,block,inline,inline-block,flex,inline-flex,flow,flow-root,grid,inline-grid,contents}         
float               [ $v      (i) ] $v:{none,right,left}                                                                           
direction           [ $v      (i) ] $v:{rtl,ltr}                                                                                   
font-weight         [ $v      (i) ] $v:{normal,bold,bolder,lighter,italic,oblique}
font-style          [ $v      (i) ] $v:{italic,italicno,oblique}
text-decoration     [ $v      (i) ] $v:{underline,underlineno,underlineu1,underlineu2,underlineu3,line-through}                                                        
text-transform      [ $v          ] $v:{capitalize,lowercase,uppercase,transformnone}
box-sizing          [ $v      (i) ] $v:{border-box,content-box}
flex-direction      [ flex$v      ] $v:{column,column-reverse,row,row-reverse,revert,center}
flex-wrap           [ flex$v      ] $v:{wrap,nowrap,wrap-reverse}
flex-basis          [ flexb$v     ] $v:{auto,content,fit-content,max-content,inherit}
flex-grow           [ flexg$v     ] $v:{0,25,50,75,100,1}
flex-shrink         [ flexs$v     ] $v:{0,25,50,75,100,1}
object-fit          [ $v      (i) ] $v:{cover,contain,fill,scale-down,revert,revert-layer}
object-position     [ op$v    (i) ] $v:{bottom,center,top,right,left}
justify-content     [ jc$v        ] $v:{normal,center,spacea,spaceb,spacee,start,end,flex-start,flex-end,reverse,revert,left,right,stretch}
justify-items       [ ji$v        ] $v:{baseline,normal,center,start,end,flex-start,flex-end,reverse,revert,left,right,stretch,legacy,self-start,self-end}
align-content       [ ac$v        ] $v:{baseline,normal,center,spacea,spaceb,spacee,start,end,flex-start,flex-end,revert,left,right,stretch}
align-items         [ ai$v        ] $v:{baseline,normal,center,start,end,flex-start,flex-end,revert,left,right,stretch,self-start,self-end}
cursor              [ cu$v    (i) ] $v:{default,link=pointer,help,disabled=not-allowed,zoomin=zoom-in,zoomout=zoom-out,progress}            
overflow            [ o$v         ] $v:{auto,hidden,visible,overlay,scroll}
overflow-x          [ ox$v    (i) ] $v:{auto,hidden,visible,overlay,scroll}                                                        
overflow-y          [ oy$v    (i) ] $v:{auto,hidden,visible,overlay,scroll}                                                        
z-index             [ z$v     (i) ] $v:{-1,0,1,10,100,1000,10000}                                                                  
clear               [ cle$v   (i) ] $v:{none,right,left,both}                                                                      
white-space         [ ws$v    (i) ] $v:{normal,nowrap,pre,prewrap}                                                                 
text-align          [ f$v     (i) ] $v:{left,right,center}                                                                         
font-family         [ f$v     (i) ] $v:{main,tahoma,mono,arial,sans,serif}                                                         
font-size(pt)       [ f$n     (i) ] $n:{a,   5-> 40}                                                                               
line-height(pt)     [ lh$n        ] $n:{a,   5-> 40}
opacity             [ a$n         ] $n:{a,0->100/+5}                                                                               
margin(px)          [ m$n         ] $n:{a,0a,0->120}
margin-top(px)      [ mt$n        ] $n:{a,-120->120}
margin-right(px)    [ mr$n        ] $n:{a,-120->120}
margin-bottom(px)   [ mb$n        ] $n:{a,-120->120}
margin-left(px)     [ ml$n        ] $n:{a,-120->120}
padding(px)         [ p$n         ] $n:{a,   0->100}
padding-top(px)     [ pt$n        ] $n:{a,   0->100}
padding-right(px)   [ pr$n        ] $n:{a,   0->100}
padding-bottom(px)  [ pb$n        ] $n:{a,   0->100}
padding-left(px)    [ pl$n        ] $n:{a,   0->100}
top(px)             [ t$n         ] $n:{a,-100->100}
top(%)              [ tp$n        ] $n:{a,   0->100}
right(px)           [ r$n         ] $n:{a,-100->100}
right(%)            [ rp$n        ] $n:{a,   0->100}
bottom(px)          [ b$n         ] $n:{a,-100->100}
bottom(%)           [ bp$n        ] $n:{a,   0->100}
left(px)            [ l$n         ] $n:{a,-100->100}
left(%)             [ lp$n        ] $n:{a,   0->100}
width(px)           [ w$n         ] $n:{     0->500}
width(%)            [ wp$n        ] $n:{a,   0->100}
width(vw)           [ wvw$n       ] $n:{a,   0->100}
width(vh)           [ wvh$n       ] $n:{a,   0->100}
height(px)          [ h$n         ] $n:{     0->500}
height(%)           [ hp$n        ] $n:{a,   0->100}
height(vw)          [ hvw$n       ] $n:{a,   0->100}
height(vh)          [ hvh$n       ] $n:{a,   0->100}
min-width(%)        [ mnwp$n      ] $n:{a,   0->100}
min-width(vh)       [ mnwvh$n     ] $n:{a,   0->100}
min-width(vw)       [ mnwvw$n     ] $n:{a,   0->100}
max-width(%)        [ mxwp$n      ] $n:{a,   0->100}
max-width(vh)       [ mxwvh$n     ] $n:{a,   0->100}
max-width(vw)       [ mxwvw$n     ] $n:{a,   0->100}
min-height(%)       [ mnhp$n      ] $n:{a,   0->100}
min-height(vh)      [ mnhvh$n     ] $n:{a,   0->100}
min-height(vw)      [ mnhvw$n     ] $n:{a,   0->100}
max-height(%)       [ mxhp$n      ] $n:{a,   0->100}
max-width(vh)       [ mxhvh$n     ] $n:{a,   0->100}
max-width(vw)       [ mxhvw$n     ] $n:{a,   0->100}
border(px)          [ br$n    (i) ] $n:{a,   0-> 10}                                                                               
border-top(px)      [ brt$n       ] $n:{a,   0-> 10}
border-right(px)    [ brr$n       ] $n:{a,   0-> 10}
border-bottom(px)   [ brb$n       ] $n:{a,   0-> 10}
border-left(px)     [ brl$n       ] $n:{a,   0-> 10}
border-color        [ brc$v       ] $v:{$col['name']['default']} $o:{10,20,30,40,50}
border-color-top    [ brct$v      ] $v:{$col['name']['default']} $o:{10,20,30,40,50}
border-color-right  [ brcr$v      ] $v:{$col['name']['default']} $o:{10,20,30,40,50}
border-color-bottom [ brcb$v      ] $v:{$col['name']['default']} $o:{10,20,30,40,50}
border-color-left   [ brcl$v      ] $v:{$col['name']['default']} $o:{10,20,30,40,50}
border-radius(px)   [ brrad$n     ] $n:{a,  0-> 50}
letter-spacing(px)  [ ls$n        ] $n:{normal,-5->10}
text-shadow(px)     [ sht$v$o$n   ] $v:{$col['name']['default']} $o:{10,25,50,75} $n:{b2,b3,b4,b5,b6,b7,b8,b9,b10,b20=blur}
box-shadow(px)      [ shb$v$o$n   ] $v:{$col['name']['default']} $o:{10,25,50,75} $n:{b2,b3,b4,b5,b6,b7,b8,b9,b10,b20=blur}
drop-shadow(px)     [ sh$v$o$n    ] $v:{$col['name']['default']} $o:{10,25,50,75} $n:{b2,b3,b4,b5,b6,b7,b8,b9,b10,b20=blur}
more styles         [ $v          ] $v:{invert,grayscale,jcenter,fliphorizontal,flipvertical,fullwhite,ios3d,refwhite,refblack}
*Responsive(max979) [ mob$v       ] $v:{0/hidden,only/visible/full,inline,inline-block}                                             
                                    $v:{fcenter,fright,fjustify,fleft,frighti,flefti}         
                                    $v:{fixed,absolute,static,relative}        
                                    $v:{none,right,left,righti,lefti}                       
                                    $v:{border-box,bgno,o50,o100}              
                                    $v:{(f7->f20)}                             
                                    $v:{(w0->320px)(wp0->100% +5)}             
                                    $v:{(t/r/b/l   0->20)}  t=top r=right b=bottom l=left 
                                    $v:{(p(t/r/b/l)0->20)}  p=padding 
                                    $v:{(m(t/r/b/l)0->20)}  m=margin
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────                                     



                                
--- ANIMATION (JS FILE) USAGE:
(1)INLINE HTML:<div anim="name" anim-duration="1" anim-delay="0" anim-loop="0" anim-direction="normal" anim-fill="both" anim-timing="1" anim-intensity="1"></div>
(2)JQUERY SCRIPTS (ALL ATTRIBUTES EXCEPT NAME ARE OPTIONALS)
$('.class').attr('anim','name');
$('.class').attr('anim-duration','1');
$('.class').attr('anim-delay','0');
$('.class').attr('anim-loop','0');
$('.class').attr('anim-direction','normal');
$('.class').attr('anim-fill','both');
$('.class').attr('anim-timing','1');
$('.class').attr('anim-intensity','1');                                    



--- SET VALUES OTHER THAN DEFAULT FROM ELEMENTS OR SET DEFAULTS IF ELEMENTS NOT AVAILABLE                             
ANIMATION NAME      [anim]           default=animno  $values = {animation name}                      
ANIMATION DURATION  [anim-duration]  default=1 (s)   $values = {(0.00->999.00)}                      
ANIMATION DELAY     [anim-delay]     default=0 (s)   $values = {(0.00->999.00)}                      
ANIMATION LOOP      [anim-loop]      default=1       $values = {0=infinite,(1->999)}                 
ANIMATION DIRECTION [anim-direction] default=normal  $values = {reverse,alternate,alternate-reverse} 
ANIMATION FILL      [anim-fill]      default=both    $values = {none,forwards,backwards}             
ANIMATION TIMING    [anim-timing]    default=1       $values = {(-10->10)}                           
ANIMATION INTENSITY [anim-intensity] default=1       $values = {(-10->10)}                           



--- ANIMATION NAMES:
        colors,colors2,
        swing,wobble,blink,
        spin,spin2,
        textin,textin2,textin3,textin4,textin5,
        fadein,fadein2,
        flickerwin,flickerbin,
        rotatein,rotatein2,rotatein3,rotatein4,
        puffin,
        slidein,slidein2,slidein3,slidein4,
        typewriter