doby-style-cli ✨

CLI Wizard for SCSS style structure.

SCSS style structure in less than 10 seconds with all utils you need.

Installation

1npm install -g doby-style-cli
2# or
3yarn global add doby-style-cli

Usage

0. Open terminal
   
1. Navigate yourself to folder where you want to generate style folder
   
2. Run one of this
   

1doby-style-cli
2doby-style
3
4# or (if you installed the package locally)
5
6npx doby-style-cli
7npx doby-style

3. Choose what you want to include in your project.

Style folder structure

style
├── elements
|  ├── _button.elements.scss
|  ├── _core.elements.scss
|  └── _elements.scss
├── functions
|  ├── _breakpoints.functions.scss
|  ├── _functions.scss
|  ├── _rtl.functions.scss
|  ├── _split.functions.scss
|  ├── _strip-unit.functions.scss
|  ├── _transition.functions.scss
|  └── _z-index.functions.scss
├── generic
|  ├── _generic.scss
|  ├── _normalize.generic.scss
|  └── _typography.generic.scss
├── shared
|  ├── _containers.shared.scss
|  ├── _heading.shared.scss
|  ├── _hide.shared.scss
|  ├── _reset.shared.scss
|  └── _shared.scss
├── tokens
|  ├── _colors.tokens.scss
|  ├── _containers.tokens.scss
|  ├── _spacings.tokens.scss
|  ├── _text-direction.tokens.scss
|  ├── _tokens.scss
|  └── _typography.tokens.scss
├── tools
|  ├── _font-size.tools.scss
|  ├── _size.tools.scss
|  ├── _spacing.tools.scss
|  └── _tools.scss
├── utilities
|  ├── _colors.utilities.scss
|  ├── _cursor.utilities.scss
|  ├── _display.utilities.scss
|  ├── _flex.utilities.scss
|  ├── _size.utilities.scss
|  ├── _utilities.scss
|  └── _wip.utilities.scss
├── _global.scss
└── index.scss

Future Improvements

TODO: Add Command for adding single file in specific folder.

1// command
2doby-style add <folder-name> <predefined-file> // Will add & import predefined file by doby-style-cli
3doby-style add <folder-name> <new-file> // Will add, import & name a new file with predefined convention
4
5// shorthands
6doby-style add <first-letter-of-folder> <predefined-file>
7doby-style add <first-letter-of-folder> <new-file>
8
9// command examples
10doby-style add components badge
11doby-style add elements link
12
13// shorthands examples
14doby-style add c badge
15doby-style add e link

TODO: Add Command for removing single file from specific folder

1// command
2doby-style remove <folder-name> <file-name> // Will remove file & imports from your current project structure
3
4// shorthand
5doby-style remove <first-letter-of-folder> <file-name> // Will remove file & imports from your current project structure
6
7// command example
8doby-style remove components badge
9
10// shorthand example
11doby-style remove c badge

TODO: Add Command for listing all TODOs from files

This command will work for every folder.

1doby-style todo // Will show all TODOs from style files.
2
3// Output eg.
4[<file-name>] TODO: <message>
5
6[_colors.tokens.scss] TODO: Set up colors from your design system
7[_colors.tokens.scss] TODO: If you are changing this colors, also change _colors.utilities.scss
8
9[_colors.utilities.scss] TODO: Add colors from _colors.tokens.scss
10...

TODO: Add Command for saving custom files to doby-style-cli structure

This will alow you to add your custom style and then use it in other projects

1// command
2doby-style save <folder-name> <filename> // Will take existing file and save it to doby-style-cli structure
3
4// shorthand
5doby-style save <first-letter-of-folder> <filename>
6
7// (eg.)
8doby-style save components spinner
9doby-style save c spinner

TODO: Add Command for deleting files from doby-style-cli structure

This will alow you to delete style that you never use in other projects. // Not recommended because you can easily skip them when setting up your project and they may come in handy someday.

1// command
2doby-style delete <folder-name> <filename> // Will delete existing file from global doby-style-cli structure.
3
4// shorthand
5doby-style delete <first-letter-of-folder> <filename>
6
7// (eg.)
8doby-style delete components spinner
9doby-style delete c spinner

TODO: Add Command for showing current doby-style-cli structure

1// ? - optional flag
2doby-style structure ?<folder-name>
3
4// (eg.)
5doby-style structure // Will show structure of style folder
6doby-style structure components // Will show structure of components folder