1- # 🎨 css-utilities-generator [ ![ NPM] ( https://img.shields.io/npm/v/css-utilities-generator.svg )] ( https://www.npmjs.com/package/css-utilities-generator )
1+ # 🎨 css-utilities-generator [ ![ NPM] ( https://img.shields.io/npm/v/css-utilities-generator.svg )] ( https://www.npmjs.com/package/css-utilities-generator ) ![ NPM ] ( https://github.com/JimGitFE/css-utilities-generator/actions/workflows/integrate.yml/badge.svg )
22
33![ Preview] ( ./preview.gif )
44
@@ -18,36 +18,35 @@ Run the following command to start generatic css utilities:
1818```
1919Now import the generated css file to the project root file, start watching for changes in your root directory and automatically regenerate the CSS utilities.
2020
21+ ## Dictionary <small >[ source] ( https://github.com/JimGitFE/css-utilities-generator/blob/main/src/dictionary.ts ) </small >
22+ | ░ | Property | Class | CSS Output | ░ | Property | Class | CSS Output |
23+ | ---| -------------------------| ------------| ----------------------------------| ----| -------------------------| ------------| ----------------------------------|
24+ | ▀ | display | .d-f | { display: flex } | ▀ | justify-content | .jc-c | { justify-content: center } |
25+ | ░ | | .d-n | { display: none } | ░ | | .jc-sb | { justify-content: space-between }|
26+ | ░ | | .d-b | { display: block } | ░ | | .jc-sa | { justify-content: space-around } |
27+ | ░ | | .d-g | { display: grid } | ░ | | .jc-fe | { justify-content: flex-end } |
28+ | ▀ | flex-direction | .fd-r | { flex-direction: row } | ▀ | align-items | .ai-c | { align-items: center } |
29+ | ░ | | .fd-c | { flex-direction: column } | ░ | | .ai-s | { align-items: start } |
30+ | ░ | | .fd-rr | { flex-direction: row-reverse } | ░ | | .ai-e | { align-items: end } |
31+ | ░ | | .fd-cr | { flex-direction: column-reverse }| ░ | | .ai-ba | { align-items: baseline } |
32+ | ░ | | .fd-d | { flex-direction: inherit } | ▀ | align-content | .ac-s | { align-content: start } |
33+ | ░ | | .fd-n | { flex-direction: none } | ░ | | .ac-e | { align-content: end } |
34+ | ░ | | .fd-r | { flex-direction: row } | ░ | | .ac-c | { align-content: center } |
35+ | ░ | | .fd-c | { flex-direction: column } | ░ | | .ac-ba | { align-content: baseline } |
36+ | ▀ | grid-template-columns | .gtc-2 | { grid-template-columns: 2 } | ▀ | gap | .gap | { gap: value } |
37+ | ░ | | .gtc-3 | { grid-template-columns: 3 } | ░ | | .gap-40 | { gap: 40px } |
38+ | ░ | | .gtc-4 | { grid-template-columns: 4 } | ░ | | .gap-20vw | { gap: 20vw } |
39+ | ░ | | .gtc-5 | { grid-template-columns: 5 } | ░ | | .gap-80 | { gap: 80px } |
40+ | ▀ | margin | .m | { margin: value } | ▀ | padding | .p | { padding: value } |
41+ | ░ | | .ml-40 | { margin-left: 40px } | ░ | padding-left | .pl-40 | { padding-left: 40px } |
42+ | ░ | | .mr-20vw | { margin-right: 20vw } | ░ | padding-right | .pr-20vw | { padding-right: 20vw } |
43+ | ░ | | .mt-80 | { margin-top: 80px } | ░ | padding-top | .pt-80 | { padding-top: 80px } |
44+ | ░ | | .mb | { margin-bottom: value } | ░ | padding-bottom | .pb | { padding-bottom: value } |
45+ > [ dictionary.ts] ( https://github.com/JimGitFE/css-utilities-generator/blob/main/src/dictionary.ts )
2146## Example
2247``` html
2348 <main className =" ml-50 mr-50"
2449 <header className =" d-f h-64px ai-c jc-sb pos-sticky top-0 z-5"
25- <h1 className =" w-fc"
26- Site Title
27- </h1 >
28- <nav className =" w-300px"
29- <ul className =" d-f jc-sb"
30- <li >
31- <a href =" #" a >
32- </li >
33- <li >
34- <a href =" #" a >
35- </li >
36- <li >
37- <a href =" #" a >
38- </li >
39- </ul >
40- </nav >
41- </header >
42- <section className =" d-f fd-co ai-c jc-c h-80"
43- <h1 className =" fs-40 fw-700"
44- Welcome!
45- </h1 >
46- <p className =" mt-2rem fs-12 o-70 fw-2"
47- Some filler text
48- </p >
49- </section >
50- </main >
5150```
5251> some-file.tsx
5352``` css
@@ -59,26 +58,16 @@ Now import the generated css file to the project root file, start watching for c
5958.jc-sb { justify-content space-between ; }
6059.pos-sticky { position sticky ; }
6160.z-5 { z-index 5 ; }
62- .w-fc { width fit-content ; }
63- .w-300px { width 300px ; }
64- .fd-co { flex-direction column ; }
65- .jc-c { justify-content center ; }
66- .h-80 { height 80% ; }
67- .fs-40 { font-size 40px ; }
68- .fw-700 { font-weight 700 ; }
69- .mt-2rem { margin-top 2rem ; }
70- .fs-12 { font-size 12px ; }
71- .o-70 { opacity 70% ; }
72- .fw-2 { font-weight 2 ; }
7361```
7462> utilities.css
7563
7664## Configuration File (Defaults)
65+ Write your own dictionary with extendKeys, extendValues or acceptAnyVariable: true altogether
7766``` javascript
7867{
79- " onlyDictionary " : true , /* Matching only dictionary or extension properties, Defaults to false */
80- " acceptAnyKey" : false ,
81- " acceptAnyValue" : true ,
68+ " acceptAnyVariable " : true , /* Matching only dictionary or extension properties, Defaults to false */
69+ " acceptAnyKey" : false , /* Applies only key */
70+ " acceptAnyValue" : true , /* Applies only value */
8271 " units" : " rem" /* Defines unit for those css properties with numeric values or others, Defaults to "px" */
8372 " extendKeys" : /* Extend default dictionary abbreviations */
8473 {
0 commit comments