Cntlog > スキルアップ・ノウハウ > コーディング > gulpで作るスタイルガイドをFrontNoteにした

gulpで作るスタイルガイドをFrontNoteにした

みなさん、スタイルガイドは使ってますか。
私は今年になって使い始めました。
これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。
乗り換えたスタイルガイドジェネレーターは「frontNote」です。

FrontNoteとは

FrontnoteはNode.js製のスタイルガイドジェネレータです。
このスタイルガイドジェネレーターはKSSをインスパイアして開発されたものです。
KSSにない機能としてスタイル全体の概要、カラーパレット、スタイルに任意のラベル付けの機能があります。

スライド-CSS Living StyleGuide

公式にGulp.js・Grunt.jsのプラグインもあり、簡単にスタイルガイド作成を自動化することができます。
FrontNote-gulp

FrontNoteがイケてるところ

scssでもCSSでコンパイル設計の対象にできる
他のスタイルガイドの生成ツールを見てるとSASSが使えない、対応するのに一苦労しそうなのがあった中簡単に対応できて使いやすいです。
SASSを対象にできるとSCSS内のコメントでスタイルガイドのコードを書いた時、CSSをコンパイルするときMinifineしてスタイルガイド用の記述削除できるので運用面でも使いやすくなります。
自分のCSS設計に合う(flocssベース)
スタイルガイドを作るためにCSSの設計をあわせる必要がなかった。
styledoccoではそれが私の場合あったので、FrontNoteのほうが汎用性があると判断した
オプションの追加が簡単
githubにoption周りの事が書いてあり、プログラムのわからない私でも理解できる範囲だったので、使いやすいと判断しました。
ナビゲーションの区分けが便利
出力したサイトのナビゲーション名前などはファイル名に依存せずに変更できるので汎用性が高いと判断した。
ゴミファイルが出来ない(生成するページが指定しやすい)
もともとのコメントの書き方に依存すると思うのですが、FrontNoteでは意図しないスタイルガイドのコメントが入ることが無かったので気に入っています。
JSも読み込める
JSも読み込める(読み込むファイルを指定できる)のでtoggleなどのUIもスタイルガイドジェネレータで実装ができる。素敵。
作者が日本人
何かあったときに相談できそう&日本語のドキュメントがあるので人にも薦めやすい。

使い方

githubに上がっているのでその通りにやれば動きます。
FrontNote-github
※node.js、gulpは事前にインストールしてある前提です。

npm install frontnote --save-dev

gulpfile.jsに下記を追加。

var frontNote = require('gulp-frontnote');
gulp.src('src/**/*.css')
.pipe(frontNote({
// options
}));

私専用汎用gulpでも組み込んでます。
ぼっち専用gulp
※怖くないプルリクは歡迎です。

最後に

StyleGuideはとても大事なものです。
それはチームだけでなく、個人の案件でも同じことです。(2週間も立ったら自分の書いたコードも忘れます…)

コーディング規約やスタイルガイドのない案件は運用していくうちにCSSが腐ってしまいます。
CSSは生物です、ちゃんとメンテナンスをしてあげましょう。

とは言うものの私もこのブログでスタイルガイド作れていないので、ちょっとずつ整理していきます…。
当ブログのスタイルガイド(制作途中)

新人のコーダーさんに「CSSなんですぐ死んでしまうん…」なんて言わせない文化を築きましょうね(*ゝω・*)

追記

Front Note使ってたのですがaigisに乗り換えました。
昔は導入しにくかったけど、今は導入も簡単です。よかったらこちらも参考にしてください

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

関連記事

このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...