# stylemark > A living style guide generator for everything. Latest version **3.1.7** (published 2020-04-30) · MIT license · 0 weekly downloads ## Install ```sh npm install stylemark pnpm add stylemark yarn add stylemark bun add stylemark ``` Provides the command `stylemark`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.1.7 | | Published | 2020-04-30 | | First published | 2017-05-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 18 | | Unpacked size | 660.3 KB | | Known vulnerabilities | 0 (+3 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 216 | | Author | Mike Petrovich | | Maintainers | livingstyleguides, mpetrovich | | Keywords | styleguide generator, style guide generator, living styleguide generator, living style guide generator, react styleguide, react style guide, angular styleguide, angular style guide, ember styleguide, ember style guide, css styleguide, css style guide, less styleguide, less style guide, sass styleguide, sass style guide, living styleguide, living style guide, component library, design pattern | ## Links - npm: https://www.npmjs.com/package/stylemark - Repository: https://github.com/nextbigsoundinc/stylemark - Issues: https://github.com/nextbigsoundinc/stylemark/issues - npm.io page: https://npm.io/package/stylemark ## Dependencies (18) - [lodash](https://npm.io/package/lodash.md) ^4.17.11 - [marked](https://npm.io/package/marked.md) ^0.3.19 - [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1 - [moment](https://npm.io/package/moment.md) ^2.23.0 - [js-yaml](https://npm.io/package/js-yaml.md) ^3.12.0 - [bluebird](https://npm.io/package/bluebird.md) ^3.5.3 - [chokidar](https://npm.io/package/chokidar.md) ^2.0.4 - [fs-extra](https://npm.io/package/fs-extra.md) ^4.0.3 - [node-dir](https://npm.io/package/node-dir.md) ^0.1.17 - [find-root](https://npm.io/package/find-root.md) ^1.1.0 - [babel-core](https://npm.io/package/babel-core.md) ^6.26.3 - [handlebars](https://npm.io/package/handlebars.md) ^4.0.12 - [gray-matter](https://npm.io/package/gray-matter.md) ^2.1.1 - [browser-sync](https://npm.io/package/browser-sync.md) ^2.26.3 - [iframe-resizer](https://npm.io/package/iframe-resizer.md) ^3.6.3 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 - [markdown-extensions](https://npm.io/package/markdown-extensions.md) ^1.1.1 - [common-js-file-extensions](https://npm.io/package/common-js-file-extensions.md) ^1.0.2 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 3.1.7 (latest) — 2020-04-30 - 4.0.0-alpha.3 (alpha) — 2020-04-30 - 3.1.6 — 2020-04-30 - 4.0.0-alpha.2 — 2020-04-30 - 4.0.0-alpha.1 — 2020-04-29 - 3.1.5 — 2020-04-22 - 3.1.4 — 2020-04-06 - 4.0.0-alpha.0 — 2020-02-25 - 3.1.3 — 2019-01-26 - 3.1.2 — 2018-12-16 - 3.1.1 — 2018-12-16 - 3.1.0 — 2018-12-16 - 3.0.4 — 2018-12-16 - 3.0.3 — 2018-08-09 - 3.0.2 — 2018-07-04 - … 45 more at https://npm.io/package/stylemark/versions ## README # Stylemark   [![npm version](https://badge.fury.io/js/stylemark.svg)](https://badge.fury.io/js/stylemark) [![Build Status](https://travis-ci.org/nextbigsoundinc/stylemark.svg?branch=master)](https://travis-ci.org/nextbigsoundinc/stylemark) **Generate interactive style guides from Markdown.** Document your style guide components in code comments or Markdown files, and Stylemark will generate a static HTML site with live, interactive components. ![Bootstrap style guide](https://user-images.githubusercontent.com/1235062/31162551-2d8f6da6-a8ac-11e7-8874-9e8a2c1c6680.png) ### Examples - [Bootstrap](http://stylemark-bootstrap.surge.sh/) - [React](http://stylemark-react.surge.sh/) - [Ember](http://stylemark-ember.surge.sh/) ## Installation Requires Node 6.x+ ```sh npm install -g stylemark ``` For a native app with built-in auto-updating/hot-reloading, see [Stylemark App](https://github.com/nextbigsoundinc/stylemark-app). ## Documenting style guide components Documenting style guide components is as easy as writing Markdown. Components can be documented in dedicated Markdown files or as comment blocks within any source code. [**See the full Stylemark spec**](README-SPEC.md). ### As a dedicated Markdown file ````markdown --- name: Button category: Components --- Buttons can be used with ``, ` ``` ```` ### As a comment block within source code The language of your source code doesn't matter as long as the docs are in `/* … */` comments. ````css /* --- name: Button category: Components --- Buttons can be used with ``, ` ``` */ .btn { display: inline-block; text-align: center; vertical-align: middle; … } .btn-default { … } ```` ## Generating the HTML style guide ### In Node.js ```js stylemark({ input, output, configPath }) ``` | Name | Type | Description | | ------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `input` | string | Directory where to read from | | `output` | string | Directory where to save the generated HTML | | `configPath` | string | (optional) Filepath of the stylemark YAML configuration file, defaults to `.stylemark.yml` within the input directory. See [Configuration](#configuration-file) | Example: ```js stylemark({ input: "~/git/acme-source-code", output: "~/acme-style-guide", configPath: "~/acme-source-code/config/stylemark.yml", }) ``` ### On the command-line ```sh stylemark -i -o -c -w [] -b [] ``` | Name | Description | | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `-i` | Directory where to read from | | `-o` | Directory where to save the generated HTML | | `-c` | (optional) Filepath of the stylemark YAML configuration file, defaults to `.stylemark.yml` within the input directory. See [Configuration](#configuration-file) | | `-w` | (optional) Will watch for file changes in `` and rebuild the style guide, waiting at least `` milliseconds between successive changes (defaults to `2000`) | | `-b` | (optional) Will open the style guide in your default browser at `http://localhost:` and will automatically reload it when the style guide is updated. The port will be chosen automatically if not provided. | **Example:** Build a style guide from `path/to/source/code` with a custom config file location, and save the generated HTML to `path/to/style/guide` ```sh stylemark -i path/to/source/code -o path/to/style/guide -c ~/acme-source-code/config/stylemark.yml ``` **Example:** Build and open the style guide in a browser, and automatically rebuild and reload it when the source code is modified ```sh stylemark -i path/to/source/code -o path/to/style/guide -w -b ``` ### Configuration file The Stylemark configuration file is a [YAML](https://en.wikipedia.org/wiki/YAML) file that contains settings to use when generating the HTML style guide. **NOTE:** All paths are relative to root project directory of the configuration file (ie. the first ancestor directory that contains `package.json`). ```yaml name: Name of the style guide excludeDir: (optional) Regex pattern (in double quotes) or list of directories to exclude; .git and node_modules are always excluded match: (optional) Regex pattern or list of files to process; by default, common source files are included assets: (optional) List of relative file/directory paths to copy and mirror in the generated style guide theme: logo: (optional) Filepath or URL of your logo css: (optional) List of any CSS files to include in the of the generated styleguide; see Theming section js: (optional) List of any JS files to include in the of the generated styleguide; see Theming section sidebar: background: (optional) Background of the sidebar; any valid CSS background property allowed, but hex colors must be quoted textColor: (optional) Text color of the sidebar; any valid CSS color property allowed, but hex colors must be quoted examples: css: (optional) List of any CSS files to include in the of each rendered example js: (optional) List of any JS files to include in the of each rendered example doctypeTag: (optional) HTML doctype to use for each rendered example; defaults to "" htmlTag: (optional) tag to use for each rendered example; defaults to "" bodyTag: (optional) tag to use for each rendered example; defaults to "" headHtml: (optional) HTML to insert before the closing tag for each rendered example bodyHtml: (optional) HTML template of the example; the example's HTML content will be inserted in place of "{html}" webpackAppPath: For Webpack apps (esp. React, Angular, etc.), this is the `output.library` value in your webpack config emberAppName: For Ember apps, this is the name of the Ember app exported to the window object order: (optional) See Ordering section ``` #### Ordering The relative order of categories can be defined by prefixing a category name with `+`, `-`, or nothing: - Categories prefixed with `+` will be listed first - Categories prefixed with `-` will be listed last - Unprefixed categories will be listed in between Omitted categories are ordered as if they were included but unprefixed. Within each of the `+`-, `-`-, and un-prefixed groups, the specified order will be preserved. Example: ``` order: - +Getting Started - +Overview - +Grid - Topography - -Extras - -Other ``` #### Theming The look and feel of the generated styleguide can be customized in the `theme` section of the config. For example: ``` theme: css: - theme/theme.css js: - theme/theme.js sidebar: background: rgb(200, 0, 0) textColor: "#fff" ``` With that configuration, Stylemark will include `theme/theme.css` and `theme/theme.js` in the generated styleguide. Note that the `background` and `textColor` styles defined in the `sidebar` section will override any similar styles set in `theme/theme.css`. Stylemark includes a number of CSS class hooks you can use to style specific elements. These CSS classes all start with `theme-` and include: - `theme-content`: The main scrollable page content - `theme-content-category`: Set of elements that make up a category - `theme-content-element`: An element, including its title and documentation - `theme-content-element-description`: An element's documentation, not including its title - `theme-content-element-title`: An element's title - `theme-content-element-source`: An element's source filepath container - `theme-content-element-source-label`: The text label of an element's source filepath - `theme-content-element-source-path`: The filepath string of an element's source filepath - `theme-mobile-nav`: The navigation view visible on smaller viewports - `theme-mobile-nav-select`: The `