Giter Site home page Giter Site logo

mdcss-theme-github's Introduction

mdcss GitHub

NPM Version Build Status

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 */ })
})

Features

Example

The example keyword is used to render living examples of code in iframes.

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

Specifying a language like example:html generates an example that is then followed by the original code block.

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

Color

The color keyword is used to generate a visual palette of colors. Arguments that follow @name: value may be used to provide any additional details about a color.

```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
```

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
---

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.

css

Type: Array
Default: ['style.css']

A list of CSS files to be used by the theme.

js

Type: Array
Default: []

A list of JavaScript files to be used by the theme.

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.

mdcss-theme-github's People

Contributors

jonathantneal avatar josephschmitt avatar stephenway avatar txhawks avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

mdcss-theme-github's Issues

Cannot find module

I'm following the readme and doing everything as laid out, however my gulp task is returning that it can't find this theme module. I also installed this project separately after installing mdcss.

      require('mdcss')({
        theme: require('mdcss-theme-github')({
          title: 'UI',
          logo: 'logo.png',
          'examples.base': 'dist',
          'examples.css': ['docs.css']
        })
      }),
$ gulp docs
module.js:340
    throw err;
    ^

Error: Cannot find module 'mdcss-theme-github'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:289:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/Stephen/projects/project/gulpfile.js:57:16)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)

Example iFrame Widths

Trying to change the width of some of my examples and the recommended style doesn't seem to work:

example:html,width=320px
or
example,width=320

Publish update or restore master branch

There are bug fixes that have been sitting around in the master branch without publishing to npm for a while now. In order to use these fixes, we've been installing from master in this github project. However, it seems you've deleted your master branch. Could you please either restore it or publish your fixes to npm?

can't reorder sections

I want mixins section to show up on bottom, but order doesn't seem to be able to be set on the section level:

/*---
section: Mixins
order: 99

---
*/

but when I look at the doc.list, there is no order prop on that section

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.