Cntlog > スキルアップ・ノウハウ > コーディング > 【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました

【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました

これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。

乗り換えた理由

以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。
理由は単純で、Frontnoteだと導入が楽だったからです。
スタイルガイドジェネレーターを探していた当時aigisを導入してみたのですが、私は上手くできなかったので泣く泣く諦めて,Frontnoteを使うことにしました。

Frontnoteは今でも使いやすいスタイルガイドジェネレーターだと思うのですが、カスタマイズが私にとってはしにくくて自分の作りたい形での出力ができなかったので、使ってるうちに自分の要望が増えてきてしまったので、この度aigisに乗り換えました。

現在もaigisはバージョンアップが進められており、導入もしやすくなったと聞いたのも乗り換えのきっかけです。
サンプルとかもちゃんと用意されています。嬉しい事に日本語版のドキュメントもあります。

aigisの良いところ

aigisを導入してみて良かったと思うところはjadeが使えるところです。
jadeで書くとこんな感じでかけるので、cssのclassがコピペしやすくてドキュメントを書く負担が減るところです。
```jade
.c-btn
      a ボタンの名称だよ
```

※こんな感じに書くとスタイルガイド内にHTMLが生成されます。

他にも、スタイルガイドのテンプレートが自分用にカスタマイズし易いところも気に入っています。
スタイルガイドのテンプレートはjadeベースで使えるものがあってレイアウトや色など自分のCSSで簡単に変更できるので拡張性が高いという印象です。
外部JSも簡単に入れれます。

aigisの使い方

node.jsとgulpを使える環境があればすぐお試しいただけるようにサンプルを作りました。
よかったら使って見てください。
サンプル

サンプルの使い方

ターミナルを開いて、下記コマンドを入力してください。
npm install

gulp aigis

これをすると「styleguide」ってディレクトリができていると思うのでその中にあるindex.htmlにアクセスするとスタイルガイドが出来上がってるかと思います。

スタイルガイドについて

スタイルガイドは作って終わりじゃありません。
作り続ける事が大事です。

よく「CSSなんですぐ死んでしまうん」と言った声を現場で良く聞くのですがそれは情報の共有がされていない事と適切なCSSの設計ができていないからと思います。

私はスタイルガイドを作り始めてCSSの設計をちゃんと考える時間を作るようになりました。
世の中ではBEMやFLCSSが良い風潮を感じますが、個人的にはBEMやFLCSSを使うだけでは、活きの良いCSSは書けないかなと思っています。

絶対にコレといったCSS設計はないと思っていますが、スタイルガイドに合わせてCSSを設計するとそれなりに良い感じの設計になるのでは無いのでしょうか。少なくとも何もない状態のオレオレコーディングよりは使いやすいと思います。

CSSを書くプロの人はたくさんいると思いますが、CSSを設計できるプロはそれほど見たことがありません。
私はスタイルガイドを通じて納品のためのCSSではなくプロジェクト運用のためのCSSを書ける人材になろうかなと思う次第です。

今後はなるべく業務と関係ない自分のプロジェクトはgithubに公開して、一緒にスタイルガイドも公開していきたいなーと思ってます(*ゝω・*)

関連記事

Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...