kaizen-cg
_/ _/
_/ _/ _/_/_/ _/_/_/_/ _/_/ _/_/_/
_/_/ _/ _/ _/ _/ _/_/_/_/ _/ _/
_/ _/ _/ _/ _/ _/ _/ _/ _/
_/ _/ _/_/_/ _/ _/_/_/_/ _/_/_/ _/ _/
What is it?
- This is a component generator for kaizen-tg
Usage
Once kaizen-tg is installed, use:
cd [themename_dir]
-
yarn cc
and follow instructions
Structure
-
*.js
to store javascript code related to the component -
*.json
to store modifiers of the component, such as default content for example -
*.css
to store css code related to the component -
*.html.twig
for templating -
*.stories.js
for storybook initiation
Should know
- Every component's js uses Drupal.behaviors structure and it works in storybook same way as in Drupal.
Recommendations
- Please follow BEM methodology when you are creating component. More about BEM's namings here
- Avoid jQuery inside of component as much as possible. Try to not use external libraries with jQuery dependency. Here is a useful link how to make one or another thing without jQuery on vanilla javascript
- Don't worry now about IE11 browser - kaizen-tg doesn't support it
- Use argTypes as much as possible if your component is not static and have different modifiers, try to avoid a lot of component's variations if it's possible to replace them by argTypes
- Don't hardcode content in
component-name.twig
orcomponent-name.stories.js
of the component, you should build re-usable components. All default content should be stored intocomponent-name.json
file, and then this content can be modified usingargs
from any other component.
Other kaizen's packages
License
This project is licensed under the MIT open source license.