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
- If you haven't already done so, download and install Node.js (which includes the NPM command-line tool).
- Download or clone this repository.
- Inside your terminal, navigate to the project directory.
- Run
npm install
. - Run
./node_modules/.bin/gulp
. - 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:
- Run
./node_modules/.bin/gulp
to generate the output files. - Commit your changes:
git commit -m "Your commit message"
. - Update the module version number:
npm version patch
(this will create a new commit). - Re-publish the module:
npm publish
. - 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
andcomponents
directories from thepublic
folder, so that URLs can beatoms/ordered-list
, etc. instead ofpatterns/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