mdcss-theme-github
Version:
GitHub flavored theme for mdcss
463 lines (329 loc) • 15.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>GitHub Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="primer.css" rel="stylesheet"><link href="style.css" rel="stylesheet"><link href="octicons/octicons.css" rel="stylesheet">
<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:16px;position:static;width:auto"};</script>
</head>
<body>
<header class="masthead" style="background-color: #222222;">
<div class="container">
<a href="/" class="masthead-logo">
<img src="mdcss-logo.png" alt="GitHub Theme" height="32"> GitHub Theme
</a>
<nav class="masthead-nav">
<a href="http://github.com/jonathantneal/mdcss" target="_blank">mdcss</a>
</nav>
</div>
</header>
<div class="container">
<div class="columns docs-layout">
<div class="one-fourth column">
<nav class="menu docs-menu">
<a class="menu-heading" href="#mdcss-github"><span>mdcss GitHub</span></a>
<a class="menu-item" href="#usage"><span>Usage</span></a>
<a class="menu-item" href="#options"><span>Options</span></a>
<a class="menu-heading" href="#overview"><span>Overview</span></a>
<a class="menu-item" href="#examples"><span>Examples</span></a>
<a class="menu-item" href="#colors"><span>Colors</span></a>
<a class="menu-item" href="#order"><span>Order</span></a>
<a class="menu-item" href="#typography"><span>Typography</span></a>
<a class="menu-item" href="#iconography"><span>Iconography</span></a>
<a class="menu-heading" href="#layout"><span>Layout</span></a>
<a class="menu-heading" href="#visual-language"><span>Visual Language</span></a>
<a class="menu-item" href="#aspect"><span>Aspect</span></a>
<a class="menu-item" href="#hero"><span>Hero</span></a>
<a class="menu-item" href="#figure"><span>Figure</span></a>
<a class="menu-item" href="#blockquote"><span>Blockquote</span></a>
<a class="menu-item" href="#media"><span>Media</span></a>
</nav>
</div>
<main class="three-fourths column markdown-body">
<section id="mdcss-github">
<h1 class="page-title">mdcss GitHub</h1>
<div class="markdown-body">
<section>
<div class="markdown-body">
<p><a href="https://www.npmjs.com/package/mdcss-theme-github"><img src="https://img.shields.io/npm/v/mdcss-theme-github.svg" alt="NPM Version"></a> <a href="https://travis-ci.org/jonathantneal/mdcss-theme-github"><img src="https://img.shields.io/travis/jonathantneal/mdcss-theme-github.svg" alt="Build Status"></a>
<a href="https://github.com/jonathantneal/mdcss-theme-github">mdcss GitHub</a> is a theme for <a href="https://github.com/jonathantneal/mdcss">mdcss</a> based on the documentation styles seen
across GitHub.</p>
</div>
</section>
<section id="usage">
<h2 class="page-title">Usage</h2>
<div class="markdown-body">
<p>Add <a href="https://github.com/jonathantneal/mdcss">mdcss</a> and <a href="https://github.com/jonathantneal/mdcss-theme-github">mdcss GitHub</a> to your build tool:</p>
<pre><code class="lang-bash">npm install mdcss mdcss-theme-github --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-github')({ /* options */ })
})
</code></pre>
</div>
</section>
<section id="options">
<h2 class="page-title">Options</h2>
<div class="markdown-body">
<p>Options control the look and feel of the mdcss GitHub 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>
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>'mdcss-logo.png'</code></p>
<p><img src="https://jonathantneal.github.io/mdcss-theme-github/demo/logo.png" height="32"></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>
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>
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']</code>
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>
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>
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>
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>
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">
<h1 class="page-title">Overview</h1>
<div class="markdown-body">
<section id="examples">
<h2 class="page-title">Examples</h2>
<div class="markdown-body">
<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.
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 class="btn">This is a button</button>
```
</code></pre>
<p>is rendered as:</p>
<pre><code class="lang-example:html"><button class="btn">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 class="btn">This is a button</button>
```
</code></pre>
<p>is rendered as:</p>
<pre><code class="lang-example"><button class="btn">This is a button</button>
</code></pre>
</div>
</section>
<section id="colors">
<h2 class="page-title">Colors</h2>
<div class="markdown-body">
<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">
<h2 class="page-title">Order</h2>
<div class="markdown-body">
<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.
```css
/*---
title: Last Subsection
section: Third Section</p>
<h2 id="order-1">order: 1</h2>
</div>
</section>
<section id="typography">
<h2 class="page-title">Typography</h2>
<div class="markdown-body">
<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">
<h3 class="page-title">Headings</h3>
<div class="markdown-body">
<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">
<h2 class="page-title">Iconography</h2>
<div class="markdown-body">
<p>This theme uses no iconography.</p>
</div>
</section>
</div>
</section>
<section id="layout">
<h1 class="page-title">Layout</h1>
<div class="markdown-body">
<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">
<h1 class="page-title">Visual Language</h1>
<div class="markdown-body">
<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">
<h2 class="page-title">Aspect</h2>
<div class="markdown-body">
<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">
<h2 class="page-title">Hero</h2>
<div class="markdown-body">
<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">
<h2 class="page-title">Figure</h2>
<div class="markdown-body">
<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">
<h2 class="page-title">Blockquote</h2>
<div class="markdown-body">
<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">
<h2 class="page-title">Media</h2>
<div class="markdown-body">
<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>
</main>
</div>
<footer class="footer">
Last modified Thursday, 23 June 2016 13:21
</footer>
</div>
<script src="prism.js?871234"></script>
<script src="examples.js?873428"></script>
<script src="script.js?02359872"></script>
<script src="anchor.min.js?225234"></script>
<script src="interact.min.js?8552934"></script>
<script>
anchors.options = {
placement: 'left',
visible: 'hover',
class: 'anchor-link'
};
anchors.add('h2, h3');
/* interact('.docs-resize')
* .resizable({
* edges: {
* left: '.c-resize--left',
* right: '.c-resize--right',
* bottom: false,
* top: false
* },
* onmove: function (e) {
* var width = e.rect.width,
* windowWidth = $(window).width();
* if (width < 160) {
* width = 160;
* } else if ((width * 2) + 100 > windowWidth) {
* width = (windowWidth - 100) / 2;
* }
* $('.docs-example').find('docs-resize').addClass('resize-overlay');
* $('.docs-resize').style.width = (width * 2) + 'px';
* },
* onend: function () {
* $('.docs-example').find('docs-resize').removeClass('resize-overlay');
* }
* })
* .on('resizemove', function (event) {
* var target = event.target,
* x = (parseFloat(target.getAttribute('data-x')) || 0);
* // update the element's style
* target.style.width = event.rect.width + 'px';
* // translate when resizing from top or left edges
* x += event.deltaRect.left;
* target.style.webkitTransform = target.style.transform =
* 'translateX(' + x + 'px)';
* target.setAttribute('data-x', x);
* target.textContent = Math.round(event.rect.width);
* });*/
</script>
</body>
</html>