generator-chico-theme

Yeoman generator for Chico UI.

Features

• Theme components customization
• Theme variations (subthemes)
• Sass compiling
• Development server with BrowserSync
• Automatic install of dependencies using Bower

Getting Started

Prerequisites

Before the begin you must have yo, bower and gulp installed globally.

npm install -g yo bower gulp

Note: You may need to prefix this and the next command with sudo on *nix systems.

If you'd like to get to know Yeoman better check out the complete Getting Started Guide.

Usage

To install generator-chico-theme from npm, run:

npm install -g generator-chico-theme

Make a new directory and cd into it:

mkdir my-theme && cd $_

And initiate the generator:

yo chico-theme

After a few questions generator will generate the theme. Example:

yo chico-theme
    [?] What is the name of your new theme? My Theme
    [?] What is your username on GitHub? username
    [?] Would you like to customize the theme components? No
    [?] What is the path in which bower components should be saved? bower_components

Note: While generating a theme you can customize its components but this is not recommended. Create the main theme that includes all components and reuse them later in subthemes.

Theme structure

src
│
└──styles
   │
   ├──_settings.scss               // Common theme settings
   ├──_settings-ui.scss            // Contains the reference of all Sass variables for UI
   ├──_settings-mobile.scss        // Contains the reference of all Sass variables for Mobile
   ├──theme-ui.scss                // Theme main file for UI
   └──theme-mobile.scss            // Theme main file for Mobile

Note: Preview is available on /ui.html or /mobile.html after the gulp command

Subtasks

To generate a subtheme (reuse the vars from main theme, customize components)

yo chico-theme:subtheme <Name>

Example:

yo chico-theme:subtheme Home
    ? Would you like to customize the subtheme components? Yes
    ? Choose the components that you want to include: Reset, Base, Buttons, Form, Typography

Subtheme structure

src
│
└──styles
   │
   ├──_settings-<name>.scss         // Common subtheme settings
   ├──_settings-<name>-ui.scss      // An empty file, feel free to use it for UI theme overrides
   ├──_settings-<name>-mobile.scss  // An empty file, feel free to use it for Mobile theme overrides
   ├──<name>-ui.scss                // Subtheme main file for UI
   └──<name>-mobile.scss            // Subtheme main file for Mobile

Note: Preview is available on /<name>-ui.html or /<name>-mobile.html after the gulp command

Compiled theme structure

This structure is based on examples provided above

build
└──assets
   │
   ├──icons.woff
   ├──loading.gif
   ├──...                // everything else from original Chico UI
   ui
   │
   ├──home.css           // Subtheme style for ui (desktop)
   ├──theme.css          // Main theme style for ui (desktop)
   ├──ui.js              // Minified ui JS
   mobile
   │
   ├──home.css           // Subtheme style for mobile
   ├──theme.css          // Main theme style for mobile
   └──mobile.js          // Minified mobile JS

Gulp tasks:

run project (compile Sass, execute BrowserSync server on 127.0.0.1:3040, watch changes, copy assets, uglify JS)

$ gulp

build project (same as default but no server)

$ gulp build

License

MIT