Button

hoge
fgua
[ { "target": "demo", "code": "<button class=\"button\">Button</button>\n<button class=\"button--active\">Active Button</button>\n<button class=\"button--disabled\">Disabled Button</button>" }, { "target": "html", "code": "<button class=\"button\">Button</button>\n<button class=\"button--active\">Active Button</button>\n<button class=\"button--disabled\">Disabled Button</button>" }, { "target": "sass", "code": "@mixin button__base($color: null, $bgColor: #f3f3f3, $bdColor: #a6a6a6) {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: $bgColor;\n border: 1px solid $bdColor;\n border-radius: 2px;\n outline: none;\n color: $color;\n}\n\n@mixin button--normal($color: null, $bgColor: #f3f3f3, $bdColor: #a6a6a6) {\n @include button__base($color, $bgColor, $bdColor);\n cursor: pointer;\n}\n\n@mixin button--disabled($color: null, $bgColor: #f3f3f3, $bdColor: #a6a6a6) {\n @include button__base($color, $bgColor, $bdColor);\n opacity: .4;\n cursor: default;\n}\n", "altCode": "@import \"button\";\n@import \"variable\";\n\n.button {\n @include button--normal;\n}\n\n.button--active {\n @include button--normal(#fff, $color, #710f26);\n}\n\n.button--disabled {\n @include button--disabled;\n}\n" }, { "target": "css", "code": ".button {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n}\n\n.button--active {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #cb1b45;\n border: 1px solid #710f26;\n border-radius: 2px;\n cursor: pointer;\n outline: none;\n color: #fff;\n}\n\n.button--disabled {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n opacity: .4;\n cursor: default;\n}\n" }, { "target": "postcss", "code": ".button {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n}\n\n.button--active {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #cb1b45;\n border: 1px solid #710f26;\n border-radius: 2px;\n cursor: pointer;\n outline: none;\n color: #fff;\n}\n\n.button--disabled {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n opacity: .4;\n cursor: default;\n}\n", "altCode": ".button {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n}\n\n.button--active {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #cb1b45;\n border: 1px solid #710f26;\n border-radius: 2px;\n cursor: pointer;\n outline: none;\n color: #fff;\n}\n\n.button--disabled {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n opacity: .4;\n cursor: default;\n}\n" }, { "target": "less", "code": ".button__base(@color: null, @bgColor: #f3f3f3, @bdColor: #a6a6a6) {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: @bgColor;\n border: 1px solid @bdColor;\n border-radius: 2px;\n outline: none;\n\n & when (iscolor(@color)) {\n color: @color;\n }\n}\n\n.button--normal(@color: null, @bgColor: #f3f3f3, @bdColor: #a6a6a6) {\n .button__base(@color, @bgColor, @bdColor);\n cursor: pointer;\n}\n\n.button--disabled(@color: null, @bgColor: #f3f3f3, @bdColor: #a6a6a6) {\n .button__base(@color, @bgColor, @bdColor);\n opacity: .4;\n cursor: default;\n}\n", "altCode": "@import (reference) \"button\";\n\n.button {\n .button--normal();\n}\n\n.button--active {\n .button--normal(#fff, #cb1b45, #710f26);\n}\n\n.button--disabled {\n .button--disabled();\n}\n" }, { "target": "stylus", "code": "button__base(color = null, bgColor = #f3f3f3, bdColor = #a6a6a6)\n font-size: inherit\n padding: .3em .5em\n margin: .5em\n background: bgColor\n border: 1px solid bdColor\n border-radius: 2px\n outline: none\n\n if color != null\n color: color\n\nbutton--normal(color = null, bgColor = #f3f3f3, bdColor = #a6a6a6)\n button__base(color, bgColor, bdColor)\n cursor: pointer\n\nbutton--disabled(color = null, bgColor = #f3f3f3, bdColor = #a6a6a6)\n button__base(color, bgColor, bdColor)\n opacity: .4\n cursor: default\n", "altCode": "@import \"button\"\n\n.button\n button--normal()\n\n.button--active\n button--normal(#fff, #cb1b45, #710f26)\n\n.button--disabled\n button--disabled()\n" } ]
html
sass
css
postcss
less
stylus

Card

hoge
fgua
Card

text...text...text....text....text....

[ { "target": "demo", "code": "<div class=\"card__box\">\n <div class=\"card__img\"></div>\n <div class=\"card__contents\">\n <div class=\"card__title\">Card</div>\n <p class=\"card__desc\">text...text...text....text....text....</p>\n </div>\n</div>" }, { "target": "html", "code": "<div class=\"card__box\">\n <div class=\"card__img\"></div>\n <div class=\"card__contents\">\n <div class=\"card__title\">Card</div>\n <p class=\"card__desc\">text...text...text....text....text....</p>\n </div>\n</div>" }, { "target": "sass", "code": "@mixin card() {\n width: 10em;\n border: 1px solid #ccc;\n}\n\n@mixin card__img($url: '//placehold.it/300x300') {\n height: 7em;\n background: url($url) center center / cover;\n}\n\n@mixin card__body() {\n padding: .3em .5em;\n}\n\n@mixin card__headline() {\n text-align: center;\n margin: .5em 0;\n}\n\n@mixin card__text() {\n font-size: .9em;\n word-break: break-all;\n}\n", "altCode": "@import \"card\";\n\n.card__box {\n @include card;\n}\n\n.card__img {\n @include card__img;\n}\n\n.card__contents {\n @include card__body;\n}\n\n.card__title {\n @include card__headline;\n}\n\n.card__desc {\n @include card__text;\n}\n" }, { "target": "css", "code": ".card__box {\n width: 10em;\n border: 1px solid #ccc;\n}\n\n.card__img {\n height: 7em;\n background: url(//placehold.it/300x300) center center / cover;\n}\n\n.card__contents {\n padding: .3em .5em;\n}\n\n.card__title {\n text-align: center;\n margin: .5em 0;\n}\n\n.card__desc {\n font-size: .9em;\n word-break: break-all;\n}\n" } ]
html
sass
css

Table

hoge
fgua
foobarbaz
hogefugapiyo
[ { "target": "demo", "code": "<div>\n <table class=\"table\">\n <thead>\n <tr>\n <th>foo</th>\n <th>bar</th>\n <th>baz</th>\n </tr>\n </thead>\n <tdoby>\n <tr>\n <td>hoge</td>\n <td>fuga</td>\n <td>piyo</td>\n </tr>\n </tbody>\n </table>\n</div>" }, { "target": "html", "code": "<div>\n <table class=\"table\">\n <thead>\n <tr>\n <th>foo</th>\n <th>bar</th>\n <th>baz</th>\n </tr>\n </thead>\n <tdoby>\n <tr>\n <td>hoge</td>\n <td>fuga</td>\n <td>piyo</td>\n </tr>\n </tbody>\n </table>\n</div>" }, { "target": "sass", "code": "@mixin table() {\n border-collapse: collapse;\n border: 1px solid #aaa;\n}\n\n@mixin table__item() {\n padding: .3em .5em;\n border: 1px solid #aaa;\n}\n\n@mixin table__headline() {\n @include table__item;\n background: #ccc;\n}\n", "altCode": "@import \"table\";\n\n.table {\n @include table;\n}\n\n.table th {\n @include table__headline;\n}\n\n.table td {\n @include table__item;\n}\n" }, { "target": "css", "code": ".table {\n border-collapse: collapse;\n border: 1px solid #aaa;\n}\n\n.table th {\n background: #ccc;\n}\n\n.table th,\n.table td {\n padding: .3em .5em;\n border: 1px solid #aaa;\n}\n" } ]
html
sass
css

yosuga

CSS styleguide generator

npm: nju33/yosugatested with jestCircleCICoverage Statuscode style: prettierlicense: mit

Demo

Page

https://nju33.github.io/yosuga/ yosuga: screenshot

Embed by <iframe/>

yosuga: embed-screenshot

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