https://github.com/hunghg255/agile-css-atomic
Atomic Css with agile-css
https://github.com/hunghg255/agile-css-atomic
agile-css atomic-css reactjs
Last synced: 3 months ago
JSON representation
Atomic Css with agile-css
- Host: GitHub
- URL: https://github.com/hunghg255/agile-css-atomic
- Owner: hunghg255
- Created: 2023-04-22T11:41:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-03T11:31:35.000Z (over 1 year ago)
- Last Synced: 2025-04-07T23:01:37.342Z (6 months ago)
- Topics: agile-css, atomic-css, reactjs
- Language: TypeScript
- Homepage: https://agile-css-atomic.vercel.app
- Size: 572 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Atomic CSS with agile-css
## Package
[agile-css](https://www.npmjs.com/package/agile-css)
# Install
```bash
npm install
```
# Run
```bash
npm run dev
```
# Install Extentions to support auto complete class
[Agile CSS Autocomplete](https://marketplace.visualstudio.com/items?itemName=AgileCssAutocomplete.agile-css-autocomplete)
## Watch file change at `src/styles/agile-css.css`
## Syntax
```
:|| "!">...@
Example:
Class Name CSS
-----------------------------------------------------------------------------------------
c:red -> .c\:red { color: red }
bgc:blue! -> .bgc\:blue\! { background-color: blue !important }
bd:1px_solid_yellow -> .bd\:1px_solid_yellow { border: 1px solid yellow }
p:30px@md -> @media (min-width:992px) { .p\:30px\@md { padding: 30px }
m:20px@+300px -> @media (max-width:300px) { .m\:20px\@\+300px { margin: 20px } }
fz:20px|h -> .fz\:20px\|h:hover { font-size: 20px }
cnt:(After_cnt)||af -> .cnt\:\(After_cnt\)\|\|af::after { content: 'After ctn' }
cnt:(Before_cnt)|be -> .cnt\:\(Before_cnt\)\|be:before { content: 'Before ctn' }
cnt:(Hover)|h||be -> .cnt\:\(Hover\)\|be:hover:before { content: 'Hover' }
trf:scale(2) -> .trf/:scale\(2\) { transform: scale(2) }
m:calc(20px_+_10px) -> .m\:calc\(20px_+_10px\) { margin: calc(20px + 10px) }
```