スタイルガイドジェネレーターFractal導入フロー

Fractal導入

環境構築

$ mkdir patterns

$ npm init

$ npm install --save @frctl/fractal

$ npm i -g @frctl/fractal

ディレクトリ例

StyleGuide
├── src
│   ├── components
│       └── headings.hbs
│   └── docs
│       └── index.md
├── fractal.js
└── package.json

表示させる(自動コンパイル)

$ fractal start --sync

静的ファイルを書き出す

---

fractal.js に追記

fractal.web.set('builder.dest', __dirname + '/build');

コンパイル

$ fractal build

---

Fractal UIカスタム

• CSS場所
• /node_modules/@frctl/mandelbrot/dist/css/xxx.css
• 今回はwhite.css使用

---

HTML

• Slimの取扱はFractalは非推奨
• 実装時コンバートする時は、エディターやコマンド、オンラインツールなど使用

オンラインSlimコンバーター参照

• http://erb2slim.com/
• https://html2slim.herokuapp.com/