Overview

Emory Goizueta Theme Style Guide

This application is a living style guide, generated from KSS documented styles.

Getting Started

If you haven't yet, install nvm: https://github.com/creationix/nvm

Run the following commands from the theme directory

Use the right version of node with:

nvm use

This command will look at your .nvmrc file and use the version node.js specified in it. This ensures all developers use the same version of node for consistency.

If that version of node isn't installed, install it with:

nvm install

Install npm dependencies with

npm install

This command looks at package.json and installs all the npm dependencies specified in it. Some of the dependencies include gulp, autoprefixer, gulp-sass and others.

Runs default task

npm run build

This will run whatever the default task is.

Compiles Sass

npm run compile

This will perform a one-time Sass compilation.

Runs the watch command

npm run watch

This is ideal when you are doing a lot of Sass changes and you want to make sure every time a change is saved it automatically gets compiled to CSS

Cleans complied directory

npm run clean

This will perform a one-time deletion of all compiled files within the dist/ directory.

Style Guide Settings and Options

For best results, set components to be part of main section when providing the value for the Style guide: parameter.

Example:

// Style guide: Section.Component Name

Use the Classes: option to alter the component layout:

  • kss-full-width: uses a full-width layout allowing component to stretch full width of browser window
  • kss-bg-dark: will display the component listing with a dark gray background (#222222).
  • kss-bg-mid will display the component listing with a mid-gray background (#595959).

Example:

// Super Component
//
// This is my component description.
//
// Markup: component.twig
//
// Classes: kss-full-width kss-bg-dark
//
// Style guide: Components.Super Component

Use the Layout: parameter to switch to a page layout from the default component layout. This is useful for creating full page prototypes. The value for the Classes parameter will be applied to the <body> tag for the page.

Example:

// Homepage Prototype
//
// This is the homepage prototype.
//
// Markup: homepage.twig
//
// Classes: layout__homepage
//
// Layout: page
//
// Style guide: Pages.Homepage