@absolunet/nwayo-extension-styleguide

    0.3.4 • Public • Published

    @absolunet/nwayo-extension-styleguide

    npm npm dependencies npms Travis CI Code style ESLint

    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

    Install

    npm i @absolunet/nwayo-extension-styleguide

    DownloadsWeekly Downloads

    14

    Version

    0.3.4

    License

    MIT

    Unpacked Size

    24.3 kB

    Total Files

    19

    Last publish

    Collaborators

    • mboutry
    • absobot
    • pleminh
    • jblandry
    • fpoulin09
    • absolunet-admin