TGAM Pattern Library

This project is a living style guide. It uses Gulp tasks to generate a static website. Upload the contents of the public folder to your web server. It also doubles as an NPM module. npm install it into your projects and you'll be able to import the CSS and JavaScript inside the exports folder.

Setup

1. If you haven't already done so, download and install Node.js (which includes the NPM command-line tool).
2. Download or clone this repository.
3. Inside your terminal, navigate to the project directory.
4. Run npm install.
5. Run ./node_modules/.bin/gulp.
6. Visit http://localhost:3000 in your web browser.

Development notes

• Every component must have a unique name.
• Component directory names must match component template names, like this: fancy-component/fancy-component.hbs. Naming them differently will result in a Gulp compilation error.
• To prevent a component's markup from appearing in the static site's info panels, add a <!--Do-Not-Display--> comment to the component's .hbs file.
• Component notes files must be named notes.txt. All other .txt files will be ignored.
• Component JavaScript and SASS files are not required. If you decide to create them, you can name the files whatever you like (no restrictions).
• src/patterns/css/export.scss generates the CSS for the exported CSS bundle (the NPM module).
• src/patterns/css/public.scss generates the CSS that's used by the static site.

Steps to update and re-publish this module:

1. Run ./node_modules/.bin/gulp to generate the output files.
2. Commit your changes: git commit -m "Your commit message".
3. Update the module version number: npm version patch (this will create a new commit).
4. Re-publish the module: npm publish.
5. Push your commits: git push.

Refer to the NPM documentation.

You'll be able to see the published NPM module at: https://www.npmjs.com/~markplewis

TODO's

• Add an active class to the currently-active nav item.
• Add more realistic components.
• Improve overall look and feel.
• Test what happens when you add 3rd-level directories (i.e. components/atoms/[new-folder]/ordered-list/ordered-list.hbs). Do things blow up?
• Eliminate patterns and components directories from the public folder, so that URLs can be atoms/ordered-list, etc. instead of patterns/components/atoms/ordered-list.
• Add eslint and sass-lint
• Allow HTML in notes, so that more elaborate documentation becomes possible ([like this](http://trulia.github.io/hologram-example/base_css.html#Background Colors))
• Add CSS preview pane
• Add notes to describe categories, on category pages