# broccoli-styleguide

> Build an HTML styleguide from CSS w/ Markdown

Latest version **0.2.1** (published 2014-07-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install broccoli-styleguide
pnpm add broccoli-styleguide
yarn add broccoli-styleguide
bun add broccoli-styleguide
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2014-07-28 |
| First published | 2014-07-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 (+24 in 4 direct dependencies) |
| Install scripts | no |
| Author | Mars |
| Maintainers | mars-substantial |

## Links

- npm: https://www.npmjs.com/package/broccoli-styleguide
- npm.io page: https://npm.io/package/broccoli-styleguide

## Dependencies (7)

- [rsvp](https://npm.io/package/rsvp.md) ~3.0.6
- [lodash](https://npm.io/package/lodash.md) ~2.4.1
- [marked](https://npm.io/package/marked.md) ~0.3.2
- [js-yaml](https://npm.io/package/js-yaml.md) ~3.0.2
- [broccoli](https://npm.io/package/broccoli.md) ^0.9.0
- [handlebars](https://npm.io/package/handlebars.md) ~1.3.0
- [broccoli-filter](https://npm.io/package/broccoli-filter.md) ~0.1.6

## Recent versions

- 0.2.1 (latest) — 2014-07-28

## README

# Broccoli Styleguide Filter

**Generate an HTML styleguide from CSS containing Markdown documentation &
examples.**

Inspired by [Hologram](https://github.com/trulia/hologram) for Ruby.

Originally forked from [broccoli-pages](https://github.com/quandl/broccoli-pages).

Maintains the original broccoli-pages functionality to build a static site from
HTML, Markdown, & Handlebars templates.

Adds parsing of CSS files for documentation blocks: `/*doc … */`. The contents
of documentation blocks are parsed as a Markdown file, with the addition of
**\*_example** code blocks, like Hologram.

## Example CSS file
```
/*doc
---
title: App Identity
name: app-identity
category: atom
template: default.hbs
---

```html_example
<div class="app-identity">
  <img class="main-logo" src="/images/logo.png" alt="">
  <div class="page-title">Appify</div>
</div>
```

*/
```

## Example Brocfile.js

```javascript
var pickFiles = require('broccoli-static-compiler');

var CSSPages = require('broccoli-styleguide').CSSPages;
var MarkdownPages = require('broccoli-styleguide').MarkdownPages;
var HTMLPages = require('broccoli-styleguide').HTMLPages;
var HBSPages = require('broccoli-styleguide').HBSPages;

var options = {
  templates: './styleguide/templates',
  helpers: './styleguide/helpers',
  partials: './styleguide/templates/partials',
  globals: {
  }
};

var styleguideContent = pickFiles('app/styles', {
  srcDir: '/',
  files: ['**/*.*'],
  destDir: '/public/styleguide/'
});

var styleguideHTML;

styleguideHTML = CSSPages(styleguideContent, options);
styleguideHTML = HTMLPages(styleguideHTML, options);
styleguideHTML = MarkdownPages(styleguideHTML, options);
styleguideHTML = HBSPages(styleguideHTML, options);

module.exports = styleguideHTML;
```

### with ember-cli

Replace the last `module exports…` line with:

```javascript
var mergeTrees = require('broccoli-merge-trees');
module.exports = mergeTrees([ styleguideHTML, app.toTree() ]);
```

---
_Source: https://npm.io/package/broccoli-styleguide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._