Skip to content
This repository has been archived by the owner. It is now read-only.
GitBook Style Guide Plugin
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
templates
.editorconfig
.eslintignore
.eslintrc
.gitignore
LICENSE
README.md
index.js
package.json

README.md

[DEPRECATED] GitBook Style Guide Plugin

This plugin is meant to be used to generate the styleguide for European Commission theme.

Syntax

In the documentation, you can call the the plugin with the following syntax:

{% styleguide './templates/breadcrumb.html' %}{% endstyleguide %}

And here's how a template file should look like:

---
src:
  scripts: '../scripts/breadcrumb.js'
  styles:
    - '../styles/_settings.scss'
    - '../styles/_objects.scss'
---
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <span class="element-invisible">You are here:</span>
  <ol class="breadcrumb__segments-wrapper">
    <li class="breadcrumb__segment breadcrumb__segment--first">
      <a href="#" class="breadcrumb__link">European Commission</a>
    </li>
    <li class="breadcrumb__segment">
      <a href="#" class="breadcrumb__link">Path 1</a>
    </li>
    <li class="breadcrumb__segment breadcrumb__segment--last">
      <a href="#" class="breadcrumb__link">Path2</a>
    </li>
  </ol>
</nav>

You can provide a custom configuration to the plugin in your book.json. Here's the one we use in EC:

{
  ...
  "pluginsConfig": {
    "styleguide": {
      "base": "src",
      "frame": "./tpl/frame.html",
      "sizes": [
        {
          "title": "Desktop",
          "width": "1200px"
        }, {
          "title": "Tablet",
          "width": "800px"
        }, {
          "title": "Phone",
          "width": "380px"
        }
      ]
    }
  }
}
You can’t perform that action at this time.