stylemark v3.1.7

Stylemark  

Generate interactive style guides from Markdown.

Table of contents

• Installation
• Usage
• Configuration
• Documenting components

Installation

Stylemark requires Node.js v8+

npm install stylemark

Usage

On the command line

npx stylemark <config> [-w|--watch]

In Node.js

const stylemark = require("stylemark")

stylemark(config)

Configuration

Example:

{
    input: ["src/**/*.{js,md}", "!*.test.js"],
    output: "dist/styleguide",
    name: "ACME Styleguide",
}

Globbing patterns

• * matches any number of characters, but not /
• ? matches a single character, but not /
• ** matches any number of characters, including /, as long as it's the only thing in a path part
• {} allows for a comma-separated list of "or" expressions
• ! at the beginning of a pattern will negate the match

Documenting components

Components are documented using markdown in code comments or in separate markdown files.

In a source code comment

button.js:

/*
---
name: Button
---

Button variants:

```variants.jsx
<Button variant="primary">Primary</Button>
<Button variant="danger">Danger</Button>
```

Button sizes:

```sizes.jsx
<Button size="s">Small</Button>
<Button size="m">Medium</Button>
<Button size="l">Large</Button>
```
*/
export default ({ variant, size, children }) => {
    return <button className={`button -${variant} -${size}`}>{children}</button>
}

In a markdown file

button.md:

---
name: Button
---

Button variants:

```variants.jsx
<Button variant="primary">Primary</Button>
<Button variant="danger">Danger</Button>
```

Button sizes:

```sizes.jsx
<Button size="s">Small</Button>
<Button size="m">Medium</Button>
<Button size="l">Large</Button>
```

Specimens

A specimen is an interactive example made up of one or more named Markdown code blocks.

```form.html
<form>
    <input name="email" type="email" placeholder="name@example.com">
    <input name="password" type="password">
    <button type="submit">Log in</button>
</form>
```

```form.css
input, button { display: block }
```

```form.js
document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault()
    alert('You logged in')
})
```

Specimen code blocks are insulated from each other. For instance, CSS styles defined for one specimen will not affect other specimens.