jigSass mdcss

NPM Version Build Status

jigSass mdcss is a theme for mdcss based on Jonathan Neal's own mdcss GitHub theme.

Usage

Add mdcss and jigSass mdcss to your build tool:

npm install mdcss --save-dev
npm install mdcss-theme-jigsass --save-dev

Whenever mdcss is used, reference this theme.

require('mdcss')({
    theme: require('mdcss-theme-jigsass')({ /​* options *​/ })
})

Options

Options control the look and feel of the jigSass mdcss theme as well as any iframe examples that may be used.

title

Type: String
Default: 'Style Guide'

The page title to be used by the style guide.

logo

Type: String
Default: 'jigsass-logo.png'

The page logo to be used by the style guide.

examples.base

Type: String
Default: null

The base URL to use for all relative URLs contained within an example, including CSS and JavaScript references.

examples.target

Type: String
Default: '_self'

The frame to open example hyperlinks from within an example.

examples.css

Type: Array
Default: ['style.css', 'prism-xonokay.css']

A list of CSS files to be used by examples.

examples.js

Type: Array
Default: null

A list of JavaScript files to be used by examples.

examples.bodyjs

Type: Array
Default: null

A list of JavaScript files to be used by examples, inserted after the example.

examples.htmlcss

Type: String
Default: 'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:0;position:static;width:auto'

A string of styles applied to the <html> wrapping the example. These default styles are used to create a seamless effect with the styleguide.

examples.bodycss

Type: String
Default: 'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:16px;position:static;width:auto'

A string of styles applied to the <body> wrapping the example. These default styles are used to create a seamless effect with the styleguide.

Overview

Examples

The example keyword is used by code blocks to indicate that code will be rendered as a living example on the page.

An example:html code block generates an iframe using the contents of the code block, followed by the original code block. For example:

```example:html
<button>This is a button</button>
```

is rendered as:

<button>This is a button</button>

An example code block generates an iframe using the contents of the code block without also rendering the original code block. For example:

```example
<button>This is a button</button>
```

is rendered as:

<button>This is a button</button>

Colors

Color examples are generated with example:color code blocks. For example:

```example:color
@color: #ffffff @name: White
@color: #f8f8f8 @name: White Smoke
@color: #e7e7e7 @name: Whisper
@color: #777777 @name: Grey
@color: #565454 @name: Matterhorn
@color: #4078c0 @name: Steel Blue
@color: #333333 @name: Night Rider
```

is rendered as:

@color: #ffffff @name: White
@color: #f8f8f8 @name: White Smoke
@color: #e7e7e7 @name: Whisper
@color: #777777 @name: Grey
@color: #565454 @name: Matterhorn
@color: #4078c0 @name: Steel Blue
@color: #333333 @name: Night Rider

Order

The order heading detail is used to control the order of sections in the generated style guide. A negative order value will shift the item before non-ordered items, while a positive order value will push the item after non-ordered values.

/*---
section: First Section
order: -1
---

Attached to a subsection, the order detail will control the position of the subsection inside the section.

/*---
title:   Last Subsection
section: Third Section
order: 1
---

Typography

This theme uses a common Helvetica font stack with a relative line height of 1.6 times the font size.

Headings

Headings match GitHub documentation conventions.

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Iconography

This theme uses no iconography.

Layout

We use flex to horizontally stack the heading and main content areas. The navigation remains fixed while you scroll.

Visual Language

This is just a sample section. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur, aliquam commodi consequuntur id error ipsam suscipit quas doloremque perferendis quam! Ullam, debitis ab maiores.

<form class="a-particularly-long-class-name">
    <fieldset class="control-group">
        <input class="control-input" type="text" value="A particularly long value for an input control">
    </fieldset>
</form>

Aspect

This is just a sample section. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur, aliquam commodi consequuntur id error ipsam suscipit quas doloremque perferendis quam! Ullam, debitis ab maiores.

Hero

This is just a sample section. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur, aliquam commodi consequuntur id error ipsam suscipit quas doloremque perferendis quam! Ullam, debitis ab maiores.

Figure

This is just a sample section. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur, aliquam commodi consequuntur id error ipsam suscipit quas doloremque perferendis quam! Ullam, debitis ab maiores.

Blockquote

This is just a sample section. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur, aliquam commodi consequuntur id error ipsam suscipit quas doloremque perferendis quam! Ullam, debitis ab maiores.

Media

This is just a sample section. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores temporibus beatae fugit totam pariatur, aliquam commodi consequuntur id error ipsam suscipit quas doloremque perferendis quam! Ullam, debitis ab maiores.