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に乗り換えました

関連記事

【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...