mdcss-theme-jigsass
Version:
An mdcss theme for jigSass. Based on Jonathan Neal's `mdcss-theme-github`
411 lines (308 loc) • 12.5 kB
HTML
<title>jigSass mdcss them</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css?05" rel="stylesheet">
<link href="jigsass-logo.png" rel="shortcut icon">
<script type="text/javascript">WebFontConfig={google:{families:["Roboto:400,100,300,500:latin"]}},function(){var e=document.createElement("script");e.src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js",e.type="text/javascript",e.async="true";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script>
<script>examples={"base":"","target":"_self","css":["style.css"],"js":[],"bodyjs":[],"htmlcss":"background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:0;position:static;width:auto","bodycss":"background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:0;position:static;width:auto"};</script>
<header>
<nav>
<img src="jigsass-logo.png" alt="jigSass mdcss them">
<ul>
<li>
<a href="#jigsass-mdcss"><span>jigSass mdcss</span></a>
<ul>
<li>
<a href="#usage"><span>Usage</span></a>
</li>
<li>
<a href="#options"><span>Options</span></a>
</li>
</ul>
</li>
<li>
<a href="#overview"><span>Overview</span></a>
<ul>
<li>
<a href="#examples"><span>Examples</span></a>
</li>
<li>
<a href="#colors"><span>Colors</span></a>
</li>
<li>
<a href="#order"><span>Order</span></a>
</li>
<li>
<a href="#typography"><span>Typography</span></a>
<ul>
</ul>
</li>
<li>
<a href="#iconography"><span>Iconography</span></a>
</li>
</ul>
</li>
<li>
<a href="#layout"><span>Layout</span></a>
</li>
<li>
<a href="#visual-language"><span>Visual Language</span></a>
<ul>
<li>
<a href="#aspect"><span>Aspect</span></a>
</li>
<li>
<a href="#hero"><span>Hero</span></a>
</li>
<li>
<a href="#figure"><span>Figure</span></a>
</li>
<li>
<a href="#blockquote"><span>Blockquote</span></a>
</li>
<li>
<a href="#media"><span>Media</span></a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<section id="jigsass-mdcss">
<h2>jigSass mdcss</h2>
<div>
<section>
<div>
<p><a href="https://www.npmjs.com/package/mdcss-theme-jigsass"><img src="https://img.shields.io/npm/v/mdcss-theme-jigsass.svg" alt="NPM Version"></a> <a href="https://travis-ci.org/TxHawks/mdcss-theme-jigsass"><img src="https://img.shields.io/travis/TxHawks/mdcss-theme-jigsass.svg" alt="Build Status"></a></p>
<p><a href="https://github.com/TxHawks/mdcss-theme-jigsass">jigSass mdcss</a> is a theme for <a href="https://github.com/jonathantneal/mdcss">mdcss</a> based on Jonathan Neal's own
<a href="https://github.com/jonathantneal/mdcss-theme-github">mdcss GitHub</a> theme.</p>
</div>
</section>
<section id="usage">
<h3>Usage</h3>
<div>
<p>Add <a href="https://github.com/jonathantneal/mdcss">mdcss</a> and <a href="https://github.com/TxHawks/mdcss-theme-jigsass">jigSass mdcss</a> to your build tool:</p>
<pre><code class="lang-bash">npm install mdcss --save-dev
npm install mdcss-theme-jigsass --save-dev
</code></pre>
<p>Whenever <a href="https://github.com/jonathantneal/mdcss">mdcss</a> is used, reference this theme.</p>
<pre><code class="lang-js">require('mdcss')({
theme: require('mdcss-theme-jigsass')({ /* options */ })
})
</code></pre>
</div>
</section>
<section id="options">
<h3>Options</h3>
<div>
<p>Options control the look and feel of the jigSass mdcss theme as well as any
iframe examples that may be used.</p>
<h4 id="-title-"><code>title</code></h4>
<p>Type: <code>String</code><br>Default: <code>'Style Guide'</code></p>
<p>The page title to be used by the style guide.</p>
<h4 id="-logo-"><code>logo</code></h4>
<p>Type: <code>String</code><br>Default: <code>'jigsass-logo.png'</code></p>
<p><img src="https://TxHawks.github.io/mdcss-theme-jigsass/demo/jigsass-logo.png" width="96" height="96"></p>
<p>The page logo to be used by the style guide.</p>
<h4 id="-examples-base-"><code>examples.base</code></h4>
<p>Type: <code>String</code><br>Default: <code>null</code></p>
<p>The base URL to use for all relative URLs contained within an example,
including CSS and JavaScript references.</p>
<h4 id="-examples-target-"><code>examples.target</code></h4>
<p>Type: <code>String</code><br>Default: <code>'_self'</code></p>
<p>The frame to open example hyperlinks from within an example.</p>
<h4 id="-examples-css-"><code>examples.css</code></h4>
<p>Type: <code>Array</code><br>Default: <code>['style.css', 'prism-xonokay.css']</code></p>
<p>A list of CSS files to be used by examples.</p>
<h4 id="-examples-js-"><code>examples.js</code></h4>
<p>Type: <code>Array</code><br>Default: <code>null</code></p>
<p>A list of JavaScript files to be used by examples.</p>
<h4 id="-examples-bodyjs-"><code>examples.bodyjs</code></h4>
<p>Type: <code>Array</code><br>Default: <code>null</code></p>
<p>A list of JavaScript files to be used by examples, inserted after the example.</p>
<h4 id="-examples-htmlcss-"><code>examples.htmlcss</code></h4>
<p>Type: <code>String</code><br>Default: <code>'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:0;position:static;width:auto'</code></p>
<p>A string of styles applied to the <code><html></code> wrapping the example. These default
styles are used to create a seamless effect with the styleguide.</p>
<h4 id="-examples-bodycss-"><code>examples.bodycss</code></h4>
<p>Type: <code>String</code><br>Default: <code>'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:16px;position:static;width:auto'</code></p>
<p>A string of styles applied to the <code><body></code> wrapping the example. These default
styles are used to create a seamless effect with the styleguide.</p>
</div>
</section>
</div>
</section>
<section id="overview">
<h2>Overview</h2>
<div>
<section id="examples">
<h3>Examples</h3>
<div>
<p>The <code>example</code> keyword is used by code blocks to indicate that code will be
rendered as a living example on the page.</p>
<p>An <code>example:html</code> code block
generates an iframe using the contents of the code block, followed by the
original code block. For example:</p>
<pre><code class="lang-css">```example:html
<button>This is a button</button>
```
</code></pre>
<p>is rendered as:</p>
<pre><code class="lang-example:html"><button>This is a button</button>
</code></pre>
<p>An <code>example</code> code block generates an iframe using the contents of the code
block without also rendering the original code block. For example:</p>
<pre><code class="lang-css">```example
<button>This is a button</button>
```
</code></pre>
<p>is rendered as:</p>
<pre><code class="lang-example"><button>This is a button</button>
</code></pre>
</div>
</section>
<section id="colors">
<h3>Colors</h3>
<div>
<p>Color examples are generated with <code>example:color</code> code blocks. For example:</p>
<pre><code class="lang-css">```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
```
</code></pre>
<p>is rendered as:</p>
<pre><code class="lang-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
</code></pre>
</div>
</section>
<section id="order">
<h3>Order</h3>
<div>
<p>The <code>order</code> 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.</p>
<pre><code class="lang-css">/*---
section: First Section
order: -1
---
</code></pre>
<p>Attached to a subsection, the order detail will control the position of the subsection inside the section.</p>
<pre><code class="lang-css">/*---
title: Last Subsection
section: Third Section
order: 1
---
</code></pre>
</div>
</section>
<section id="typography">
<h3>Typography</h3>
<div>
<p>This theme uses a common Helvetica font stack with a relative line height of
1.6 times the font size.</p>
<section id="headings">
<h4>Headings</h4>
<div>
<p>Headings match GitHub documentation conventions.</p>
<pre><code class="lang-example:html"><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>
</code></pre>
</div>
</section>
</div>
</section>
<section id="iconography">
<h3>Iconography</h3>
<div>
<p>This theme uses no iconography.</p>
</div>
</section>
</div>
</section>
<section id="layout">
<h2>Layout</h2>
<div>
<p>We use flex to horizontally stack the heading and main content areas.
The navigation remains fixed while you scroll.</p>
</div>
</section>
<section id="visual-language">
<h2>Visual Language</h2>
<div>
<p>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.</p>
<pre><code class="lang-html"><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>
</code></pre>
<section id="aspect">
<h3>Aspect</h3>
<div>
<p>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.</p>
</div>
</section>
<section id="hero">
<h3>Hero</h3>
<div>
<p>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.</p>
</div>
</section>
<section id="figure">
<h3>Figure</h3>
<div>
<p>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.</p>
</div>
</section>
<section id="blockquote">
<h3>Blockquote</h3>
<div>
<p>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.</p>
</div>
</section>
<section id="media">
<h3>Media</h3>
<div>
<p>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.</p>
</div>
</section>
</div>
</section>
<footer>Last modified Friday, 1 April 2016 22:47</footer>
</main>
<script src="prism.js"></script>
<script src="examples.js"></script>
<script src="script.js"></script>