GitHub Theme
mdcss GitHub
mdcss GitHub is a theme for mdcss based on the documentation styles seen
across GitHub.
Usage
Add mdcss and mdcss GitHub to your build tool:
npm install mdcss mdcss-theme-github --save-dev
Whenever mdcss is used, reference this theme.
require('mdcss')({
theme: require('mdcss-theme-github')({ /* options */ })
})
Options
Options control the look and feel of the mdcss GitHub 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: 'mdcss-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']
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 class="btn">This is a button</button>
```
is rendered as:
<button class="btn">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 class="btn">This is a button</button>
```
is rendered as:
<button class="btn">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. ```css /*--- 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.