Generator-clay NPM

generator-clay

A Yeoman generator for Clay

Clay Instance Generator

You can use the main generator to generate an new clay instance.

yo clay

This will add the following files:

Main Files

app.js
package.json

Main Folders

sites
components
behaviors
validators

Supplemental Files

.gitignore
.csscomb.json
.eslintrc

Gulp Files & Folders

gulp/tasks
gulp/utils
gulpfile.js

At the end, the generator will run npm install & will append the specified gulp dependencies into your package.json file.

Component Generator

You can use the component generator to generate new components in your clay repo.

yo clay:component <name>

This will create a folder in components/ with the name of your component, and will also add some files:

all.css
print.css (with display: none by default)
template.<lang> where <lang> is the language of your choice
bootstrap.yml
schema.yml

If you select nunjucks or jade, the template will have a tag (if specified), a class with your component's name, and the data-uri attribute used by kiln.

The bootstrap and schema will have fields (text by default) that you've specified.

Note: Your template language choice will be stored as the default the next time you run this generator, saving you time when creating multiple components.

--tag

You can pass a --tag argument with the name of the tag/element you want to use, rather than using the default of section. The acceptable tags are defined in the tags json.

yo clay:component <name> --tag <tag>

--viewports

In addition to the default all.css and print.css, you can specify viewports to be created.

yo clay:component <name> --viewports <m or mobile>

# would create 0-600.css

yo clay:component <name> --viewports <t or tablet>

# would create 600-1024.css

yo clay:component <name> --viewports <d or desktop>

# would create 1024+.css

You can also specify arbitrary viewports by passing in a comma-separated string. For more details on the syntax, see responsive-filenames.

yo clay:component <name> --viewports 0-300,300-600,600+,1200+

# would create:

0-300.css
300-600.css
600+.css
1200+.css

--npm

This is useful if you want to quickly scaffold components for release on npm. Their name gets prepended with clay-, and they additionally get a package.json, README.md, and .eslintrc. All options and prompts for internal components are available for npm components.