Edited at

Riot.js + Atomic Designのスタイルガイド用のテンプレート

More than 1 year has passed since last update.

Riot.js と Atomic Design ではじめるテクニカルクリエイター

を参考にしていて、うちもStyle Guideがあったら作業が捗るかなということで、

とりあえずテンプレ的なものを作ってみました。


使い方


  1. 適当にダウンロード

    https://github.com/negibouze/styleguide-template


  2. パッケージをインストールして実行

    ※一回目の起動はうまくいかないかもしれないです。


npm install or yarn install

npm start

成功するとこんな画面が出ます。

template.png


  1. コンポーネントの追加

├── src

│   ├── components
│   │   ├── atoms
│   │   │   ├── foo
│   │   │   │   ├── example.tag
│   │   │   │   ├── foo.styl
│   │   │   │   └── foo.tag
│   │   │   └── plus
│   │   │   ├── example.tag
│   │   │   ├── plus.svg
│   │   │   └── plus.tag
│   │   ├── molecules
│   │   │   └── bar
│   │   │   ├── bar.styl
│   │   │   ├── bar.tag
│   │   │   └── example.tag
│   │   ├── organisms
│   │   │   └── baz
│   │   │   ├── baz.styl
│   │   │   ├── baz.tag
│   │   │   └── example.tag
│   │   └── styleguide
│   │   ├── atoms
│   │   │   ├── atoms.styl
│   │   │   └── atoms.tag
│   │   ├── molecules
│   │   │   ├── molecules.styl
│   │   │   └── molecules.tag
│   │   └── organisms
│   │   ├── organisms.styl
│   │   └── organisms.tag
│   ├── index.html
│   ├── main.js
│   └── main.styl
├── webpack.config.babel.js

こんな階層になっているのでatoms, molecules, organismsの下に追加する。

追加したコンポーネントのtag, svg, stylnpm startを実行した時にmain.js, main.stylにimportされます。

実行前


main.js

/* inject:tag */

/* endinject:tag */

/* inject:svg */
/* endinject:svg */



main.styl

/* inject:styl */

/* endinject:styl */

実行後


main.js

/* inject:tag */

import './components/atoms/foo/foo.tag';
import './components/molecules/bar/bar.tag';
import './components/organisms/baz/baz.tag';
import './components/styleguide/atoms/atoms.tag';
import './components/styleguide/molecules/molecules.tag';
import './components/styleguide/organisms/organisms.tag';
/* endinject:tag */

/* inject:svg */
import './components/atoms/foo/foo.svg';
/* endinject:svg */



main.styl

/* inject:styl */

@import 'components/atoms/foo/foo';
@import 'components/molecules/bar/bar';
@import 'components/organisms/baz/baz';
@import 'components/styleguide/atoms/atoms';
@import 'components/styleguide/molecules/molecules';
@import 'components/styleguide/organisms/organisms';
/* endinject:styl */

あとはよしなに。

まだ箱ができただけで自分でもほとんど使っていないので使い勝手とかは分かりませんが、誰かのお役に立てば幸いです。