Skip to content

Latest commit

 

History

History
77 lines (51 loc) · 2.19 KB

README.md

File metadata and controls

77 lines (51 loc) · 2.19 KB
Raw

Kashmir NPM version

A Drupal theme generator

Installation

Install Yeoman and generator-kashmir using npm (we assume you have pre-installed node.js).

npm install -g yo generator-kashmir

Then generate your new theme using the generator use the below command from the directory where you want the theme to be generated.

yo kashmir

Design systems

The theme provides storybook and patternlab as two options for design systems as part of this theme. During the setup you can choose to setup either one of the two.

Patternlab support has been continued as before and we have now also added Storybook.js support. The recommended option going forward would be to use storybook as it is more modern and supports component building for numerous JS frameworks.

Storybook.js

Component generation

Once theme is generated you can use the theme generator to build components for the theme.

Below is a example of generating story for button component,

╰─❯ yo kashmir
? Please choose what you would like to generate? component
? Please enter the component name: button
? Choose the type of the component atom
? Choose the files you to generate? sass, json, twig, markdown, stories
The button component was created.

Component structure

The theme genertor would ask you which files you want to generate for the the component,

  • sass - will contain the styles for component
  • json - will contain the data for the component, ex: title, description.
  • twig - will contain the markup for the component
  • markdown - documentation
  • stories - the story js file
  • typescript - additional js file

Based on your component needs, choose which file you need.

Check the button component example provided with the theme.

Build commands

Compile theme

In order to compile the assets of the theme, this also includes compiling sass inside components, we use gulp,

yarn gulp

Compile and launch storybook

View the storybook.

yarn storybook