0.6.0 • Public • Published


    A Yeoman generator for Clay

    Circle CI

    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.


    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>


    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:


    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,, 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


    npm i generator-clay

    DownloadsWeekly Downloads






    Last publish


    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar