Diary 2018-07-05 Style Guide, Push Notification
Today's workings
- スタイルガイド・パターンガイドジェネレータの調査
Detail
仕事でこれは必要だろ、と思い作るに至るのだが、何分初めて作るのでガリガリ一から作っても良いけどそれはアホでしょと。 先人たちの素晴らしいツールが世の中にはたくさんあるじゃろうと。言うことで調べて選んでみた次第。
はじめはこの記事を見て Fractal を使ってみた。 軽く触った感じは悪くはなかった。特徴は
npm
からインストールできる- ソースディレクトリやコンパイル時の出力ディレクトリの指定がとても簡単で、すぐにでも始められる
- コンパイルの設定は不要
- httpサーバーが自動で起動しデモ環境が
watch
モードで開く - 各コンポーネントの階層がネストしても、それに準拠して表示される
こんなところで、割と使い勝手は良さそうだが、css
のコードが表示されないのがアウト… 後は、個人的にデザインが好きじゃなかったので見送った。
お次は、先程の記事と同じ方のかかれたこちらの記事を見た。「あれ?もしかして俺が欲しいのはスタイルガイドではなく、パターンガイドでは?」とも思ったが、 この2つの明確な境界線はなさそうで、割と曖昧な感じ。ほしいのはパターンガイドが近いのだが、表示してほしいものにはスタイルガイドの要素もだいぶある。
そんなこんなで、結局はスタイルガイドジェネレータを探すことにして、こちらの記事で紹介されていた U.S. Web Design System を軽く試してみた。
こちらも良さげだった。htmlのソースコードが表示されるのも良い。デザインも好きなものだったのでこれで行こうかなーと思ったが、いや待てよと。
各コンポーネントのコードは良いけどほしいのは css
のソースコード + クラス名だろと。
htmlのソースコードにクラス名も載ってるから惜しいのだが、css 設計もドキュメント化したいのでこちらも落選。
余談
Brand Style Guide Examples, Hand-picked by Saijo George
こちらのリンクのサンプルがどれも素晴らしかったのだが、その中でも特に目を引いたのが Frontify さん。 観た瞬間惚れた。作りたいと思っていたイメージにドンピシャで当たっていて、「正直これ使わせて欲しい!」とかおもったw
ほいで、お次はこちらの記事から sc5-styleguide を試してみた。今回選んだツールはこの子です。 機能的にはとても気に入ったのだが、2点ほど残念な点がある。
- リンクが
サイドバー
ではないため、スクロールに追いついてくれない - ヘッダーがスクロールしても追ってきてくれない
まぁ、この子を使うのなら一点目は諦めて、二点目は自分でCSSをカスタマイズしてしまえば簡単にできるので、それでカバーする。 何にせよはじめての試みでもあるので、まずはなんでも良いのでやってみようと思う。(「なんでも」とか言っておきながら、いろいろ選んでんじゃんw)
Comments
chrome://flags
っていうURLを今日初めて知った。chromeってほんまに最先端なブラウザだなと。