@absolunet/nwayo-extension-styleguide


> Styleguide generation for nwayo

Install

``sh
$ npm install @absolunet/nwayo-extension-styleguide
`




Build

`sh
$ nwayo run styleguide:build
`




Usage

$3


`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
# [...]
`

$3

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

`handlebars
{{sgIntro ~title="Base for site"}}


This are the base styles for this site

{{/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> Title

<h2> Title

<h3> Title

{{/sgCell}}
{{sgCell ~nb="2" ~spacing=true}}

<h4> Title

<h5> Title

<h6> Title

{{/sgCell}}
{{/sgBox}}

{{sgSubtitle}}Widget{{/sgSubtitle}}
{{sgBox}}

{{/sgBox}}
{{/sgContent}}
`

JsRender custom tags

$3

Styleguide intro

#### ~title
String Title of the intro block

`handlebars
{{sgIntro ~title="Base for site"}}


This are the base styles for this site


{{/sgIntro}}
`

$3

Whole styleguide content wrapper

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

#### ~class (Optional)
String Additional custom class

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

$3

Section title (level 1)

`handlebars
{{sgTitle}}Section{{/sgTitle}}
`

$3

Section subtitle (level 2)

`handlebars
{{sgSubtitle}}Subsection{{/sgSubtitle}}
`

$3

Section sub-subtitle (level 3)

`handlebars
{{sgSubsubtitle}}Subsubsection{{/sgSubsubtitle}}
`

$3

Content box

#### ~border (Optional)
Boolean If the box has a border

#### ~style (Optional)
String Predefined style (dark)

#### ~class (Optional)
String Additional custom class

`handlebars
{{sgBox ~border=true ~style="dark"}}


1. Item 1


2. Item 2


3. Item 3

{{/sgBox}}

{{sgBox ~class="message-box"}}

Hooray

Caution

Booo

{{/sgBox}}
`

$3

Content box cell

#### ~spacing (Optional)
Boolean If the box should have gutter spacing

#### ~nb
Number Number of cell per row (2 to 6)

`handlebars
{{sgBox}}
{{sgCell ~nb="2"}}
Primary
{{/sgCell}}
{{sgCell ~nb="2"}}
Secondary
{{/sgCell}}
{{/sgBox}}
`




JsRender templates

$3

Color palette item

#### ~hex
String Hexadecimal color code

#### ~name
String Readable name

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

$3

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

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




JsRender helpers

$3

Get item from konstan

#### key
String Dot-notation key

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

License

MIT © Absolunet