Here by using --hover flag ( can be used -h shorthand flag) we are telling to use it in :hover state

Flags:-

| flags |short-flag | corresponding css declaration |
|-------------|---|---------:|
|--active|-a|:active|
|--after|-af|::after|
|--after-hover|-afh|::after:hover|
|--before|-bf|::before|
|--before-hover|-bfh|::before:hover|
|--checked|-ch|:checked|
|--default|-de|:default|
|--disabled|-di|:disabled|
|--empty|-em|:empty|
|--enabled|-en|:enabled|
|--first-child|-fc|:first-child|
|--first-letter|-fl|::first-letter|
|--first-line|-fln|::first-line|
|--first-of-type |-fot|:first-of-type|
|--focus| -fo|:focus|
|--hover|-h|:hover|
|--hover-after|-haf|:hover::after|
|--hover-before|-hbf|:hover::before|
|--hover-target|-htg|:hover:target|
|--in-range|-ir|:in-range|
|--indeterminate|-ind|:indeterminate|
|--invalid|-inv|:invalid|
|--last-child|-lc|:last-child|
|--last-of-type|-lot|:last-of-type|
|--link|-ln|:link|
|--not-|-n-|:not|
|--nth-child-|-nc-|:nth-child|
|--nth-last-child-|-nlc-|:nth-last-child|
|--nth-last-of-type-|-nlot-|:nth-last-of-type|
|--nth-of-type-|-not-|:nth-of-type|
|--only-of-type |-oot|:only-of-type|
|--only-child|-oc|:only-child|
|--optional|-op|:optional|
|--out-of-range|-oor|:out-of-range|
|--placeholder|-ph|::placeholder|
|--read-only |-ro|:read-only|
|--read-write|-rw|:read-write|
|--required|-rq|:required|
|--root|-rt|:root|
|--selection|-s|::selection|
|--scrollbar|-sb|::-webkit-scrollbar|
|--scrollbar-track|-st|::-webkit-scrollbar-track|
|--scrollbar-thumb|-stm|::-webkit-scrollbar-thumb|
|--target |-tg|:target|
|--valid|-v|:valid|
|--visited|-vi|:visited|

Examples

| classname |shorthand | css |Remarks|
|----------- |----------- |----------------------|------------|
|--hover-display-flex|-h-df|:hover{display: flex ;}|
|--focus-list-style-none|-fo-lsn|:focus{list-style:none;}|
|--nth-child-2n-margin-left20px|-nc-2n-ml20px|:nth-child(2n){margin-left:20px ;}|


#### Similary , we can also tell aliascss classname to use selector by using '_' at the begining class name . eg:-
`

Hello World

Welcome to AliasCSS

\
`
AliasCSS will compile above classnames as below:-
`
....

._h3-c-white h3{
color:white ;
}
._p-fs14px p{
font-size:14px ;
}
`

#### Selector Guide Table

|Aliascss Classsname| compiled|
|---|---|
|_div-df|._div-df div{..}|
|__div-df|._div-df > div{..}|
|___div-df|._div-df + div{..}|
|____div-df|._div-df ~ div{..}|
|_all-c-red|._all-c-red *{..}|




Targeting Devices [ Making Responsive ]

To target Device , we can simply add device prefix at the very begening of classname. for eg:-
`


This will not show in smmaler device


`
or using semantic classname
`

This will not show in smaller devices

`
#### Device Guide Table
|AliasCSS Device Prefix| CSS Selector|
|--|--|
|print|@media print|
|xs|@media (max-width : 576px) |
|sm|@media (min-width : 576px) |
|md|@media (min-width : 768px) |
|lg|@media (min-width : 992px) |
|xl|@media (min-width : 1200px)|
|hd|@media (min-width : 1408px) |
|_sm|@media (max-width : 576px) |
|_md|@media (max-width : 768px) |
|_lg|@media (max-width : 992px) |
|_xl|@media (max-width : 1200px)|
|_hd|@media (max-width : 1408px) |

>Any of the above prefix can be used, these prefix must be the at the begining of the classnames.
Few examples:-

Define
`


//using shorthand

...

`


Compiled
`
@media (max-width : 768px) {
.mob-flex-direction-column{
flex-direction: column ;
}
}
`
---
Define
`


//using shorthand

...

`

Compiled
`
@media (max-width : 576px) {
.xs_p-flex-direction-column p{
flex-direction: column ;
}
}
`
Define
`


//using shorthand

...

`

Compiled
`
@media (min-width : 768px){
.tab-width500px{
width:500px ;
}
}
`




Classname Defination Guide


##### Rules for defining classnames
- In general every aliasCSS classnames are derived from css property and value we want to apply.i.e display-flex, color-red, wigth100px, margin-left2rem etc, similary short-hand classnames are also derived for first letter of property follwed by every first letter after '-'followed by first letter of value and evry first letter after '-' if it has any.
For Example
`
display:flex => df or display-flex
font-weight-bold=> fwb or font-weight-bold
animation-timing-function: ease-in-out => atfeio or animation-timing-function-ease-in-out
width:100px => w100px or width100px
width:-100px => w-100px or width-100px
`
> if there is '-' in classname before length or numeric unit it will treated as negative value. e.g w100px => width:100px , w-100px =>width:-100px , margin100px=> margin:100px, margin-100px => margin:-110px, fs-12px => font-size:-12px; fs12px=> font-size:12px; Becarefull when using '-' before numeric value.
- Repace "." with d and "%" with p, note this only appicable to numeric and length unit . "d" must be between two numeric value. i.e d5 not != .5, use 0d5 => 0.5

|Acss|shorthand|Css|
|--|--|--|
|margin0d75rem|m0d75rem|margin:0.75rem|
|margin-0d75rem|m-0d75rem|margin:-0.75rem|
|width50p| w50p|width:50%|
|opacity0d5|o0d5|opacity:0.5|

Length [property whose value are in length ]


Syntax:- property[-]?[value]

| classname |shorthand | css |Remarks|
|----------- |----------- |----------------------|------------|
|margin100px|m100px | margin:100px | |
|margin1em |m1em |margin:1em|
|margin50p |m50p |margin:50% | Use 'p' for %|
|margin0d5rem|m0d5rem |margin:0.5rem | use 'd' for .|
|margin20px30px20px40px|m20px30px20px40px| margin:20px 30px 20px 40px|
|margin-20px30px-20px40px|m-20px30px-20px40px| margin:-20px 30px -20px 40px|
|margin-left150px|ml150px|margin-left:150px|
|border-radius15px|br15px|border-radius:15px|
|max-width500px|xw500pc|max-width:500px|
|min-width300px|mw300p|min-width:300px|
---

Color

$3

Syntax:- [color|c] - [name| hexadecimal value without #]

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|color-red|c-red|color:red|
|color-cccccc|c-cccccc|color:#cccccc|
|color-fff|c-fff|color:#fff|
|border-color-yellow|bc-yellow|border-color:yellow|
|background-color-red|bgc-red|background-color:red|

$3


syntax:[color|c]-[000-255][000-255][000-255]

or,

syntax:[color|c]-[0-100]p[0-100]p[00-100]p
> RGB is represented by 3 digit [000-255] for each R G and B value, Incase of percentage 'p' should be used to represent '%'.
Alpha can be represent by either decimal or percentage value, 'd' should be used in palce of ' . '.

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|color-000000000|c-000000000|color:rgb(000,000,000)|
|color-024245100|c-024245100|color:rgb(024,245,100)|
|color-1110230450d5|c-1110230450d5|color:rgba(111,023,045,0.4)|
|border-color-11122200050p|bc-11122200050p|border-color:rgba(111,222,000,50%)|
|background-color-30p40p60p|bgc-30p40p60p|background-color:rgb(30%,40%,60%)|

$3


Syntax [colcor|c]-[000-359][0-100]p[0-100]p
> In hsl() first three digit represent Hue or h followed by percentge of 'saturation ' followed by percentage of light, optionally followed by alpha in percentage of decimal

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|color-25050p30p|c-25050p30p|color:hsl(250,50%,30%)|
|color-25050p30p50p|c-25050p30p50p|color:hsla(250,50%,30%,50%)|
|color-11150p0p0d5|c-1110230450d5|color:hsla(111,50%,0%,0.5)|

---


Border | Border-Radius| Box-Shadow


#### border
|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|border1px-solid-red|b1px-s-red|border:1px solid red|
|border1px-solid-30p40p50p|b2px-s-30p40p50p|border:1px solid rgb(30%,40%,50%)|
|border-bottom2px-dashed-cccccc|bb2px-ds-cccccc|border-bottom:2px dashed #cccccc|

#### border-radius

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|border-radius5px|br5px|border-radius:5px|
|border-radius10px5px|br10px5px|border-radius:10px 5px|
|border-radius5px10px30px4px|br5px10px30px4px|border-radius:4px 10px 30px 4px|
|border-bottom-left-radius5px60px|bblr5px60px| border-bottom-left-radius:5px 60px ;|
|border-top-right-radius6p|btrr6p| border-top-right-radius:6% ;|

#### box-shadow

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|box-shadow1px2px3px4px-pink|bxs1px2px3px4px-pink|box-shadow:1px 2px 3px 4px pink|
|box-shadow0px2px-000000000|bxs0px2px-000000000|box-shadow:0px 2px rgb(000,000,000)|
|box-shadow-2px-2px-cccccc|bxs-2px-2px-cccccc|box-shadow:-2px -2px #cccccc|
|box-shadow0px2px-000000000--2px5px1px-red|bxs0px2px-000000000----2px5px1px-red|box-shadow:0px 2px rgb(000,000,000),2px 5px 1px red|Multiple Box-shadow|
---


Fonts


|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|font-family-serif|ff-serif|font-family:serif|
|font-family-san-serif|ff-san-serif|font-family:san-serif|
|font-family-Times_New_Roman|ff-Times_New_Roman|font-family:"Times New Roman"|Use'_' for space
|font-family-Times_New_Roman--Times--serif|ff-Times_New_Roman--Times--serif|font-family:"Times New Roman" , Times , serif|Multiple Fonts|

Transform

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|transform-rotate45deg|tf-r45deg|transform:rotate(45deg)|
|transform-scale2--rotate25deg|tf-s2--r25deg|transform:scale(2) rotate(25deg)| Multiple value|
|transform-rotate45deg|tf-r45deg|transform:rotate(45deg)|
|transform-rotate3d1_-1_1_45deg|tf-r3d1_-1_1_45deg|transform:rotate3d(1, -1, 1, 45deg)|
|transform-matrix0d8_0d7_-0d8_0.866_0_0|tf-m0d8_0d7_-0d8_0.866_0_0|transform:matrix(0.8, 0.7, -0.8, 0.866, 0, 0)||
|transform-rotateX45deg|tf-rx45deg|transform:rotateX(45deg)|
|transform-rotate45deg|tf-r45deg|transform:rotate(45deg)|
|transform:-scaleX2|tf-sx2|transform:scaleX(2)|
|transform-skew45deg_-45deg|tf-sk45deg|transform:skew(45deg, -45deg)|
|transform-translate20px_10px|tf-t20px_10px|transform:translate(20px, 10px)|
|transform-rotate45deg|tf-r45deg|transform:rotate(45deg)|
|transform-rotate45deg|tf-r45deg|transform:rotate(45deg)|

Transition

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|transition-all0d5s|tn-all0d5s |transition:all 0.5s|
|transition-width0d35s|tn-width0d35s |transition:width 0.5s|
|transition-width-0d35s|tn-width-0d35s |transition:width 0.5s| '-' used before numeric time unit will not taken as negative value
|transition-transform0d35s|tn-transform0d35s|transition:transform 0.35s|

Filter

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|filter-blur4px|fl-b4px|filter:blur(4px)||
|filter-unset|flu|fliter:unset||
|filter-brightness50p--blur4px--invert50p|fl-br50p--b4px--i50p|filter:brightness( 50% ) blur( 4px ) invert( 50% ) |
|filter-drop-shadow8px8px10px-gray|fl-ds8px8px10px-gray|filter:drop-shadow( 8px 8px 10px gray )||
|filter-hue-rotate40deg|fl-hr40deg|filter:hue-rotate( 40deg )||

Gradient


|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|background-linear-gradient-red-blue|bg-lg-red-blue |background:linear-gradient( red, blue ) ||
|background-linear-gradient-red_10p-blue_90p|bg-lg-red_10p-blue_20p |background:linear-gradient( red 10%, blue 90% )||
|background-repeating-linear-gradient-red_10p-blue_90p|bg-rlg-red_10p-blue_20p |background:repeating-linear-gradient( red 10%, blue 90% )||
|background-linear-gradient-to-right-red_10p-blue_90p|bg-lg-tr-red_10p-blue_90p |background:linear-gradient(to right, red 10%, blue 90% )||
|background-linear-gradient45deg-red_10p-blue_90p|bg-lg45deg-red_10p-blue_90p |background:linear-gradient(45deg, red 10%, blue 90% )||
|background-radial-gradient-red_10p-blue_90p|bg-rg-red_10p-blue_90p |background:radial-gradient( red 10%, blue 90% )||
|background-repeating-radial-gradient-circle-blue_5p-skyblue_23p |bg-rrg-circle-blue_5p-skyblue_23p |background:repeating-radial-gradient( circle, blue 5%, skyblue 23% )||
|background-conic-gradient-red-blue|bg-cg-red-blue |background:conic-gradient( red, blue ) ||

CSS Variable

|classname|shorthand|css|Remarks|
|---------|---------|---|-------|
|color--var--name|c--var--name|color: var(--name)|
|width--var--side-bar-width|w--var--side-bar-width| width: var(--side-bar-width)||

NPM Guide

With npm version there are lots of exrta front-end / workflow feature we can use out of the box.

npm intstall aliascss


To Compiler folder from command line

npx aliascss 'public/*.html' 'public/css/acss.ccc'

> output css file must be there if not it should be created manully.

>Guide-npx aliascsss 'glob-patterm' 'path/to/output/style.css'

$3

npx aliascss 'public/*.html' 'public/css/acss.ccc' --watch

@package.json
`
....
"scripts": {
...
"aliascss-build": "aliascss 'public/*.html' 'public/css/aliascss.css'",
"aliascss-watch": "aliascss-build --watch"
}
...

`

.aliascss.config.js


.aliascss.config.js gives you more feature and power to the workflow.

@.aliascss.config.js

Basic structure of config file
`
export let config= {
//input files in glob pattern to get compiled
input:'public/*.html',

//Output css file , must exist or should be created manully if not exist
output:'./public/css/acss.css',

//Truncate the css file , you should let it true unless you know what your are doing
truncate:true,



custom:{
color:{
'main':"rgb(12,23,45)",// now you can use bgc-main
'theme':'#c6c6c6'

},
length:{
'1cv':'25%'
}

},
// predine classname and
extend:{
'outline-color':'color: blue',
//now you can use it with device or seduo --hover-outline-color
},
//if you want to add some css statement
statement:
:root{
--bg-color: teal;
--outline-color:blue;
--col-1:8.33%;
--col-2:calc(var(--col-1)*2);
--col-3:calc(var(--col-1)*3);
--col-4:calc(var(--col-1)*4);
--col-5:calc(var(--col-1)*5);
--col-6:50%
--col-8:calc(var(--col-1)*8);
--col-12:100%
}

body{
font-family:BlinkMacSystemFont , -apple-system , "Segoe UI" , Roboto , Oxygen , Ubuntu , Cantarell , "Fira Sans" , "Droid Sans" , "Helvetica Neue" , Helvetica , Arial , sans-serif , "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , "Noto Color Emoji";
}

,

// group classname in single classname
group:{
'container':'p15px border1px-solid-light',
'row':'--hover-filter-blur1px '
},
//if some of the classname collide with other CSS framework like bootstrap , tailwindcss
//You wanna tell aliasccss to ignore it...
ignore:['fs12px', 'c-red'],


}
`

Now you can do,

npx aliascss-ts --config

##### Watch

npx aliascss-ts --config --watch

@package.json
`
....
"scripts": {
...
"aliascss-build": "aliascss-ts --config'",
"aliascss-watch": "aliascss-ts --config --watch"
}
...

``