Atomic DesignやPattern Labの運用方法を模索して記述していきます。
触りだけの記事になります。

基本は公式のDocsを見て記述していきます。
http://patternlab.io/docs/requirements.html

DEMOは下記から
http://demo.patternlab.io/

準備

PHP5.4+が推奨です。
Dependenciesの管理にComposerを使用します。
→QiitaのComposerに関する記事らです。
https://qiita.com/search?utf8=%E2%9C%93&sort=rel&q=Php+Composer
GlobalにComposerは入れておきましょう。

Pattern Labは基本、コンパイルしてHTML+CSS+Javascriptを./publicに出力しているだけなので、上記のみでOK。本サイトからZIPでダウンロードもできます。

インストール

複数種類がありますが、Twigを最初ダウンロードし、ドキュメントが少ないので、Mustachをインストールします。
https://github.com/pattern-lab/patternlab-php

  1. ダウンロードしたいディレクトリーに移動。
  2. 下記をTerminalで入力

composer create-project pattern-lab/edition-mustache-standard patternlab2-example && cd $_

pattern-lab.png
3. 選択を迫られるので、1のDEMOを選びます。

以上です。

起動して触ってみます。

下記を先程create-projectで作ったディレクトリー内で打ちます。

php core/console --server --with-watch

もしくは下記でも実行できます。

php core/console --watch
php core/console --server

詳しいコマンドは下記で確認

php core/console --help

ブラウザーを確認すると、DEMOページが確認できます。
http://localhost:8080/

pattern-lab-demo.png

先程、選択肢で選ばされた時に2を選ぶと、まっさらなpattern-labのプロジェクトが作成できます。ただ、ドキュメントに詳しい事が書いていない(見つからない)ので、Demoの中身を読んでいくのが良いです。
pattern-lab.png

今後の記述予定:
Laravel + SASS + Pattern Lab
Laravel + Pattern Lab(Mustach)
Laravel + React + Pattern Lab

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.