

[![NPM Version][npm-img]][npm] [![Build Status][ci-img]][ci]
[mdcss] lets you easily create and maintain style guides with CSS comments using Markdown.
/*---
title: Buttons
section: Base CSS
---
Button styles can be applied to any element. Typically you'll want to use
either a or an element:
``example:html
Some Page
`
*/
.btn {
background-color: black;
color: white;
}
Usage
Add [mdcss] to your build tool:
`bash
npm install mdcss --save-dev
`
#### Node
`js
require('mdcss').process(YOUR_CSS, { / options / });
`
#### PostCSS
Add [PostCSS] to your build tool:
`bash
npm install postcss --save-dev
`
Load [mdcss] as a PostCSS plugin:
`js
postcss([
require('mdcss')({ / options / })
]);
`
#### Gulp
Add [Gulp PostCSS] to your build tool:
`bash
npm install gulp-postcss --save-dev
`
Enable [mdcss] within your Gulpfile:
`js
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
require('mdcss')({ / options / })
])
).pipe(
gulp.dest('./css')
);
});
`
#### Grunt
Add [Grunt PostCSS] to your build tool:
`bash
npm install grunt-postcss --save-dev
`
Enable [mdcss] within your Gruntfile:
`js
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('mdcss')({ / options / })
]
},
dist: {
src: 'css/*.css'
}
}
});
`
Options
#### theme
Type: NPM Repository
Default: require('mdcss-theme-github')
The theme used by [mdcss] to create the style guide.
`js
require('mdcss')({
theme: require('mdcss-theme-github')
})
`
Theme-specific options may also be passed in from the theme module itself, but note that any global options would then be ignored.
`js
require('mdcss')({
theme: require('mdcss-theme-github')(/ options /)
})
`
#### destination
Type: String
Default: 'styleguide'
The directory to write the style guide to.
#### assets
Type: Array
Default: []
The list of files or directories to copy into the style guide directory.
#### index
Type: String
Default: 'index.html'
The file to write the style guide to.
Writing documentation
To add a section of documentation, write a CSS comment that starts with three dashes ---.
`css
/*---
This is documentation.
*/
`
`css
/*
This is not documentation
*/
`
The contents of a section of documentation are parsed by Markdown and turned into HTML.
`css
/*---
Button styles can be applied to any element. Typically you'll want to use
either a
`html
Some Page
`
*/
`
`html
Button styles can be applied to any element. Typically you'll want to use
either a <button> or an <a> element:
<button class="btn">Click</button>
<a class="btn" href="/some-page">Some Page</a>
`
The contents of a section may also be imported from another file.
buttons.md:
Button styles can be applied to any element. Typically you'll want to use
either a