@absolunet/nwayo-extension-styleguide

Styleguide generation for nwayo

Install

$ npm install @absolunet/nwayo-extension-styleguide

Build

$ nwayo run styleguide:build

Usage

nwayo.yaml

extensions:
  '@absolunet/styleguide':
    enabled: true
    options:
      main:                            # ID
        name: My wonderful site        # Display name
        bundle: site                   # Bundle to base everything from
        output: ../pub/styleguide      # Output path
        icons-component: site          # Which component to use for iconography
        scripts-collections:           # List of scripts collections to use
          - dependencies-head-sync
          - dependencies
          - main
        styles-collections:            # List of styles collections to use
          - main
        sections:                      # Ordered list of components to crawl for styleguide files
          - name: General
            component: site
          - name: Home widgets
            component: widget
            divider: true
      blog:                            # Second styleguide [...]
        name: My wonderful blog
        # [...]

styleguide.jshtml

• Under [...]/nwayo/[COMPONENT]/extensions/styleguide/
• A JsRender template of your styleguide for this component

{{sgIntro ~title="Base for site"}}
    <p>This are the base styles for <a href="/">this site</a></p>
{{/sgIntro}}

{{sgContent}}
    {{sgTitle}}Common{{/sgTitle}}

    {{sgSubtitle}}Color palettes{{/sgSubtitle}}

    {{sgSubsubtitle}}Brands{{/sgSubsubtitle}}
    {{sgBox ~border=true}}
        {{include tmpl="color" ~hex=~konstan('color.brand.red')   ~name="Red" /}}
        {{include tmpl="color" ~hex=~konstan('color.brand.green') ~name="Green" /}}
    {{/sgBox}}

    {{sgSubsubtitle}}Texts, borders and backgrounds{{/sgSubsubtitle}}
    {{sgBox ~border=true}}
        {{include tmpl="color" ~hex=~konstan('color.charcoal') ~name="Charcoal" /}}
    {{/sgBox}}


    {{sgSubtitle}}Fonts{{/sgSubtitle}}
    {{sgBox ~border=true}}
        {{include tmpl="font" ~name="Roboto Regular" ~family="~konstan('font.base')" ~weight="400" /}}
        {{include tmpl="font" ~name="Roboto Black"   ~family="~konstan('font.base')" ~weight="900" /}}
        {{include tmpl="font" ~name="Mali Regular"   ~family="~konstan('font.alt')"  ~weight="400" /}}
    {{/sgBox}}


    {{sgSubtitle}}Typography{{/sgSubtitle}}
    {{sgBox ~class="page-main"}}
        {{sgCell ~nb="2" ~spacing=true}}
            <h1>&lt;h1&gt; Title</h1>
            <h2>&lt;h2&gt; Title</h2>
            <h3>&lt;h3&gt; Title</h3>
        {{/sgCell}}
        {{sgCell ~nb="2" ~spacing=true}}
            <h4>&lt;h4&gt; Title</h4>
            <h5>&lt;h5&gt; Title</h5>
            <h6>&lt;h6&gt; Title</h6>
        {{/sgCell}}
    {{/sgBox}}

    {{sgSubtitle}}Widget{{/sgSubtitle}}
    {{sgBox}}
        <aside class="widget" style="background-image:url(/images/our-product.jpg)">
            <div class="widget-content">
                <h6 class="title">Our product<sup>™</sup></h6>
                <p class="text">Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod</p>
                <a href="/en/our-product" class="button">Buy</a>
            </div>
        </aside>
    {{/sgBox}}
{{/sgContent}}

JsRender custom tags

{{sgIntro}}

Styleguide intro

~title

String Title of the intro block

{{sgIntro ~title="Base for site"}}
    <p>This are the base styles for <a href="/">this site</a></p>
{{/sgIntro}}

{{sgContent}}

Whole styleguide content wrapper

{{sgContent}}
    Everything except the intro goes here
{{/sgContent}}

~class (Optional)

String Additional custom class

{{sgContent ~class="special-theme"}}
    Everything except the intro goes here
{{/sgContent}}

{{sgTitle}}

Section title (level 1)

{{sgTitle}}Section{{/sgTitle}}

{{sgSubtitle}}

Section subtitle (level 2)

{{sgSubtitle}}Subsection{{/sgSubtitle}}

{{sgSubsubtitle}}

Section sub-subtitle (level 3)

{{sgSubsubtitle}}Subsubsection{{/sgSubsubtitle}}

{{sgBox}}

Content box

~border (Optional)

Boolean If the box has a border

~style (Optional)

String Predefined style (dark)

~class (Optional)

String Additional custom class

{{sgBox ~border=true ~style="dark"}}
    <ol class="reversed">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
{{/sgBox}}

{{sgBox ~class="message-box"}}
    <div class="success">Hooray</div>
    <div class="warning">Caution</div>
    <div class="error">Booo</div>
{{/sgBox}}

{{sgCell}}

Content box cell

~spacing (Optional)

Boolean If the box should have gutter spacing

~nb

Number Number of cell per row (2 to 6)

{{sgBox}}
    {{sgCell ~nb="2"}}
        <button class="primary">Primary</button>
    {{/sgCell}}
    {{sgCell ~nb="2"}}
        <button class="secondary">Secondary</button>
    {{/sgCell}}
{{/sgBox}}

JsRender templates

color

Color palette item

~hex

String Hexadecimal color code

~name

String Readable name

{{include tmpl="color" ~hex="#cc0000" ~name="brand-red" /}}

font

Font item

~name

String Readable name

~family

String font-family css property

~weight (Optional)

String font-weight css property

~style (Optional)

String font-style css property

{{include tmpl="font" ~name="Roboto Black Italic" ~family="Roboto" ~weight="900" ~style="italic" /}}

JsRender helpers

~konstan(key)

Get item from konstan

key

String Dot-notation key

{{include tmpl="color" ~hex=~konstan('color.brand.red') ~name="Red" /}}

License

MIT © Absolunet