Generating Themes with Yeoman

Quickly get started developing Sequence.js themes with Yeoman

What is Yeoman?

Yeoman is a command line tool that quickly generates project templates for web and other technologies.

The Sequence.js Generator can be used to generate — or “scaffold” as it is sometimes known in the Yeoman world — a Sequence theme. The benefit of doing this is you don’t need to download multiple third-parties, the latest Sequence.js version, or set up a theme manually. Courtesy of Yeoman’s functionality, the Sequence.js Generator will do all of this for you, once you’ve answered some simple questions that will be used to automatically set up your theme.

The Sequence.js Generator will set up your theme with:

  • an HTML file where you can add content to your theme
  • CSS and SCSS folders/files
  • a README containing lots of useful information about working with your theme (this is good for both you starting work on the theme as well as anyone you may wish to distribute the theme to)
  • a Grunt file which provides an optional development environment that automates many tasks, such as Scss preprocessing, automatic browser refreshing and so on (see the generated README.md file for instructions on using this)

Install Yeoman

Not every new computer comes with a Yeoman pre-installed. He lives in the npm package repository. You only have to ask for him once, then he packs up and moves into your hard drive.

$ npm install -g yo

Install Sequence.js Generator

To install generator-sequence from npm, run:

$ npm install -g generator-sequence

Finally, once you’ve navigated to the directory you’d like to add the Sequence theme to, initiate the generator:

$ yo sequence

Sequence.js Generator Questions

When you run yo sequence, Yeoman will greet you and begin asking questions that will be used to automatically set up your theme. Answer each question and hit return for the next. You can skip a question simply by hitting return.

What would you like to call your Sequence.js theme? (My Theme)
Enter the name of your theme. The suggestion in brackets is a capitalized and spaced version of the name of the directory you are working in. In the above example, My Theme is taken from a directory name of my-theme.

Briefly describe your theme
Enter a description for your theme. This will be placed in a README.md file and at the top of related files.

Theme URL
Enter a URL that has more information about your theme.

Author Name
Enter your name. This will be placed in a README.md file and at the top of related files.

Author URL
Enter your personal or company website. This will be placed in a README.md file and at the top of related files.

Is your theme available for others to use?
Here you have the choice of making the theme public or private. A private theme will be set up to ensure it can’t be published to NPM or Bower.

License
Choose the type of license your theme will use:

  • GPL-3.0
  • MIT
  • Apache 2.0
  • Other: Choose this if you want to use a license but it isn’t listed above
  • None: Don’t use a license (for private use or you’re not sure, for example)