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.

yo clay:component <name> --npm

Note: It will create all files in the current directory, rather than in a components/<name> folder.

Site Generator

You can use the site generator to generate new sites in your clay repo.

yo clay:site <name>

It will prompt you for the human-readable name, domain, and path. It'll add these files:

• index.js with a default route
• config.yml with your site config
• local.yml pointing to localhost. This allows you to develop quickly and easily