This repository has been archived by the owner. It is now read-only.
PostCSS plugin to generate a style guide automatically
Branch: master
Clone or download
Pull request Compare This branch is 3 commits ahead of morishitter:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
lib
test
.editorconfig
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json
style-guide-default.png
yarn.lock

README.md

postcss-mdgx

PostCSS plugin to generate a style guide automatically.CSS comments will be parsed through Markdown and displayed in a generated HTML document.

This is a fork of postcss-style-guide

Install

$ npm install postcss-mdgx

Example

Node.js:

var fs = require('fs');
var postcss = require('postcss');
var styleguide = require('postcss-mdgx');
var input = fs.readFileSync('input.css', 'utf8');

var output = postcss([
  styleguide
]).process(input)
.then(function (reuslt) {
  var output = fs.readFileSync('styleGuide/index.html', 'utf8');
  console.log('output:', output);
});

in Gulp:

var gulp = require('gulp')

gulp.task('build:css', function () {
    var concat = require('gulp-concat')
    var postcss = require('gulp-postcss')
    var autoprefixer = require('autoprefixer')
    var customProperties = require('postcss-custom-properties')
    var Import = require('postcss-import')
    var styleGuide = require('postcss-mdgx')
    var nano = require('cssnano')

    return gulp.src('./app.css')
        .pipe(postcss([
            Import,
            customProperties({ preserve: true }),
            autoprefixer,
            styleGuide({
                project: 'Project name',
                dest: 'styleguide/index.html',
                showCode: false,
                themePath: '../'
            }),
            nano
        ]))
        .pipe(concat('app.min.css'))
        .pipe(gulp.dest('dist/css'))
})

We can generate color palette from CSS Custom Properties with @start color and @end color annotations.

app.css:

@import "color";
@import "button";

color.css:

@import "button";
/* @start color */
:root {
    --red: #e23B00;
    --blue: #3f526b;
    --black: #000;
    --background: #faf8f5;
}
/* @end color */

postcss-mdgx generate style guide from CSS comments that have special annotation(@styleguide).

@title: set component name

button.css:

/*
@styleguide

@title Button

Use the button classes on and `<a>`, `<button>`, `<input>` elements.

<button class="button button--large button--red">Red Button</button>

    <button class="button button--large button--red">Red Button</button>

<button class="button button--large button--blue">Red Button</button>

    <button class="button button--large button--blue">Red Button</button>
*/
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.button--large {
    width: 140px;
    height: 40px;
    font-size: 14px;
}

.button--red {
    color: #fff;
    background-color: var(--red);
}

.button--blue {
    color: #fff;
    background-color: var(--blue);
}

You will get styleguide/index.html for the style guide.

Default style guide design

Options

  • options.src: The path to the source CSS file.
  • options.dest: The path to style guide file. (default: styleguide/index.html)
  • options.project: Project name. (default: Style Guide)
  • options.showCode: The flag to show CSS code (default: true)
  • options.theme: Theme name. (default: psg-theme-default)
  • options.themePath: The path to theme file. (default: node_modules/psg-theme-default)

Themes

You can select a theme of style guide with options.theme. And you can also create original themes. When you create themes, please read theme guideline

All of postcss-mdgx themes that can be used are here.

Themes list

How to develop postcss-mdgx theme

License

The MIT License (MIT)

Copyright (c) 2015 Masaaki Morishita