Holograph is a NPM module that parses comments in your CSS and turns them into a beautiful style guide. It is initially a port of the excellent work done by the Hologram Ruby gem and aims to be compatible with most of its features.
In addition to features found in Hologram, Holograph includes:
- a responsive version of the Hologram GitHub Template with some minor alterations to content styles
- support for displaying multiple colour palettes
Install the latest release from npm with:
npm install holograph
Using the --save or --save-dev flag will add the dependency to your project's package.json.
Settings for your Holograph instance are found in either holograph_config.yml or holograph_config.js depending on your preference. To begin, copy your chosen language's template configuration file into your project root:
JS:
cp node_modules/holograph/holograph_config.js .
YAML:
cp node_modules/holograph/holograph_config.yml .
Settings in this file include the relative location of dependencies (for your project and for Holograph), the destination path, and a title for your style guide.
For more complete documentation, see how to configure Holograph.
The binary takes no parameters and just reads all options from the config file
node_modules/.bin/holograph
The default build location is ./holograph/. You can configure this by setting the destination value in holograph_config.yml.
Holograph will scan for stylesheets (.css, .scss, .sass, .less, .styl) within the source directory defined in your configuration. It will find Holograph comments and generate style guide sections from your comment's settings and content.
Sample comment:
/*doc
---
title: Headings
name: headings
category: typography
---
Headings should follow appropriate heading hierarchy.
```html_example
<h1>Hello, world!</h1>
```
*/
For more complete documentation, see how to document your components.
Holograph allows creation of colour palettes from your proprocessor stylesheets (.css, .scss, .sass, .less, .styl). This feature is new for Holograph and is not found in Ruby Hologram.
In brief, to mark colour variables to include in Holograph, use the following comment syntax:
$variable-name: <value>; // hg-palette: Palette name
For more complete documentation, see how to use colour palettes.
Tests are being written with Mocha and the Chai assertion library
npm test
- content and configuration for
index.html parentoption- support for JavaScript content
- referencing other components
- colour values in palettes that require compilation, such as
darken($brand-primary, 10%)and nested colour variables - Ruby-specific:
.erbas a source and 'slim' for templates
If you have questions, concerns, bug reports, etc, please file an issue in this repository's issue tracker.
- Fork it
- Create your feature/bug fix branch (git checkout -b my-new-feature)
- Commit your changes (git commit -am 'Add some feature')
- Push to the branch (git push origin my-new-feature)
- Create new Pull Request
- Hologram
- Base theme css: hologram-github-template
- Syntax: highlight.js using
github-gisttheme