![Readme](#<h1 id="yosuga">yosuga</h1>
<p>CSS styleguide generator</p>
<p><a href="https://www.npmjs.com/package/yosuga"><img src="https://img.shields.io/npm/v/yosuga.svg" alt="npm: nju33/yosuga"></a>
<a href="https://github.com/facebook/jest"><img src="https://img.shields.io/badge/tested_with-jest-99424f.svg" alt="tested with jest"></a>
<a href="https://circleci.com/gh/nju33/yosuga"><img src="https://circleci.com/gh/nju33/yosuga.svg?style=svg" alt="CircleCI"></a>
<a href="https://coveralls.io/github/nju33/yosuga?branch=master"><img src="https://coveralls.io/repos/github/nju33/yosuga/badge.svg?branch=master" alt="Coverage Status"></a>
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier"></a>
<img src="https://img.shields.io/packagist/l/doctrine/orm.svg" alt="license: mit"></p>
<h2 id="demo">Demo</h2>
<h3 id="page">Page</h3>
<p><a href="https://nju33.github.io/yosuga/">https://nju33.github.io/yosuga/</a>
<img src="https://github.com/nju33/yosuga/blob/master/assets/screenshot.png?raw=true" alt="yosuga: screenshot"></p>
<h3 id="embed-by-iframe-">Embed by <code><iframe/></code></h3>
<p><img src="https://github.com/nju33/yosuga/blob/master/assets/embed-screenshot.png?raw=true" alt="yosuga: embed-screenshot"></p>
<h2 id="quickstart">QuickStart</h2>
<p><a href="https://github.com/nju33/yosuga-quickstart">https://github.com/nju33/yosuga-quickstart</a></p>
<h2 id="cli">CLI</h2>
<p><a href="https://github.com/nju33/yosuga-cli">https://github.com/nju33/yosuga-cli</a></p>
<h2 id="install">Install</h2>
<pre><code class="lang-bash">yarn add -D yosuga
npm i -D yosuga
</code></pre>
<h2 id="usage">Usage</h2>
<h3 id="example">Example</h3>
<h4 id="code">Code</h4>
<pre><code class="lang-js">import Yosuga from 'yosuga';
const yosuga = new Yosuga({
icon: 'icon.png',
name: 'Yosuga DEMO',
base: `${process.cwd()}/example`,
main: 'sass',
style: {
fontSize: '14px',
},
generate: {
dir: 'docs',
},
});
yosuga
.prepare()
.then(() => {
// for development
yosuga.serve();
// if production
// yosuga.generate('/yosuga/');
})
.catch(err => {
console.log(err);
});
</code></pre>
<h4 id="tree">Tree</h4>
<p>Each (alt)css file must output the same content between the same basename.
For targets other than <code>css</code>, <code>* .yosuga.*</code> is actually used for comparison.</p>
<pre><code class="lang-bash">.
├── css // optional
│ ├── button.css
│ ├── card.css
│ ├── nav.css
│ ├── tab.css
│ └── table.css
├── icon.png // optional
├── less // optional
│ ├── button.less
│ └── button.yosuga.less
├── postcss // optional
│ ├── button.css
│ └── button.yosuga.css
├── sass // optional
│ ├── button.scss
│ ├── button.yosuga.scss
│ ├── card.scss
│ ├── card.yosuga.scss
│ ├── nav.scss
│ ├── nav.yosuga.scss
│ ├── table.scss
│ └── table.yosuga.scss
├── stylus // optional
│ ├── button.styl
│ └── button.yosuga.styl
└── yosuga
├── button.html
├── card.html
├── nav.html
├── tab.html
└── table.html
</code></pre>
<p>For example, if <code>opts.main</code> is set to <code>less</code>, only the <code>button</code> will be included in the site.</p>
<h3 id="options">Options</h3>
<pre><code class="lang-js">interface Options {
// Base directory
base: `${process.cwd()}/example`;
// Site's icon(logo) file name. This is as follows
// `path.join(opts.base, opts.icon)`, if there is
icon?: string;
// Site's title
name?: string;
// Main (alt)css
main?: 'css' | 'postcss' | 'sass' | 'less' | 'stylus';
// default is `css`
// Map of each directory name
dirs?: {
// ``path.join(opts.base, opts.dirs.yosuga)`
yosuga?: string;
// ``path.join(opts.base, opts.dirs.css)`
css?: string
// ``path.join(opts.base, opts.dirs.postcss)`
postcss?: string
// ``path.join(opts.base, opts.dirs.sass)`
sass?: string
// ``path.join(opts.base, opts.dirs.less)`
less?: string
// ``path.join(opts.base, opts.dirs.stylus)`
stylus?: string
},
//
// defaults
//
// dirs: {
// yosuga: 'yosuga',
// css: 'css',
// postcss: 'postcss',
// sass: 'sass',
// less: 'less',
// stylus: 'stylus',
// }
// `nuxt.generate`
generate?: {
dir?: 'docs';
};
// Adjust to your liking
style?: {
fontSize?: string;
accentColor?: string;
};
//
// default
//
// style: {
// fontSize: '13px',
// accentColor: '#cb1b45'
// }
// Adjust the contents
contents?: {
readme?: boolean; // Add project README.md
};
//
// default
//
// contents: {
// readme: true,
// }
}
</code></pre>
<h2 id="license">License</h2>
<p>The MIT License (MIT)</p>
<p>Copyright (c) 2017 nju33 <a href="mailto:nju33.ki@gmail.com">nju33.ki@gmail.com</a></p>){kind=link}
Button
hoge
fgua
Card
hoge
fgua
Card
text...text...text....text....text....
Table
hoge
fgua
| foo | bar | baz |
|---|---|---|
| hoge | fuga | piyo |
yosuga
CSS styleguide generator
Demo
Page
https://nju33.github.io/yosuga/ 
Embed by <iframe/>
QuickStart
https://github.com/nju33/yosuga-quickstart
CLI
https://github.com/nju33/yosuga-cli
Install
yarn add -D yosuga
npm i -D yosuga
Usage
Example
Code
import Yosuga from 'yosuga';
const yosuga = new Yosuga({
icon: 'icon.png',
name: 'Yosuga DEMO',
base: `${process.cwd()}/example`,
main: 'sass',
style: {
fontSize: '14px',
},
generate: {
dir: 'docs',
},
});
yosuga
.prepare()
.then(() => {
// for development
yosuga.serve();
// if production
// yosuga.generate('/yosuga/');
})
.catch(err => {
console.log(err);
});
Tree
Each (alt)css file must output the same content between the same basename. For targets other than css, * .yosuga.* is actually used for comparison.
.
├── css // optional
│ ├── button.css
│ ├── card.css
│ ├── nav.css
│ ├── tab.css
│ └── table.css
├── icon.png // optional
├── less // optional
│ ├── button.less
│ └── button.yosuga.less
├── postcss // optional
│ ├── button.css
│ └── button.yosuga.css
├── sass // optional
│ ├── button.scss
│ ├── button.yosuga.scss
│ ├── card.scss
│ ├── card.yosuga.scss
│ ├── nav.scss
│ ├── nav.yosuga.scss
│ ├── table.scss
│ └── table.yosuga.scss
├── stylus // optional
│ ├── button.styl
│ └── button.yosuga.styl
└── yosuga
├── button.html
├── card.html
├── nav.html
├── tab.html
└── table.html
For example, if opts.main is set to less, only the button will be included in the site.
Options
interface Options {
// Base directory
base: `${process.cwd()}/example`;
// Site's icon(logo) file name. This is as follows
// `path.join(opts.base, opts.icon)`, if there is
icon?: string;
// Site's title
name?: string;
// Main (alt)css
main?: 'css' | 'postcss' | 'sass' | 'less' | 'stylus';
// default is `css`
// Map of each directory name
dirs?: {
// ``path.join(opts.base, opts.dirs.yosuga)`
yosuga?: string;
// ``path.join(opts.base, opts.dirs.css)`
css?: string
// ``path.join(opts.base, opts.dirs.postcss)`
postcss?: string
// ``path.join(opts.base, opts.dirs.sass)`
sass?: string
// ``path.join(opts.base, opts.dirs.less)`
less?: string
// ``path.join(opts.base, opts.dirs.stylus)`
stylus?: string
},
//
// defaults
//
// dirs: {
// yosuga: 'yosuga',
// css: 'css',
// postcss: 'postcss',
// sass: 'sass',
// less: 'less',
// stylus: 'stylus',
// }
// `nuxt.generate`
generate?: {
dir?: 'docs';
};
// Adjust to your liking
style?: {
fontSize?: string;
accentColor?: string;
};
//
// default
//
// style: {
// fontSize: '13px',
// accentColor: '#cb1b45'
// }
// Adjust the contents
contents?: {
readme?: boolean; // Add project README.md
};
//
// default
//
// contents: {
// readme: true,
// }
}
License
The MIT License (MIT)
Copyright (c) 2017 nju33 nju33.ki@gmail.com