Stylusのフレームワーク

Fri, 08 Feb 2013 08:11:08 +0919

Stylusのフレームワークといえばnibだろうが、他にもいくつかあったので調べてみた。プラグインっぽい拡張とかもあったんだけど、Stylusの公式からリンクも張ってないしnpmも探しにくいしどうしたらいいのかなぁと。

Framework

nib

お約束。でもtext-shadowがないのはちょっと困るかな。

nibble

nibの上にのっかる感じのフレームワークらしい。ドキュメントが殆ど無いけど、foundationに強く影響を受けているらしいので、グリッドシステムとかレスポンシブ・ウェブデザインが充実しているのかな。僕の場合はGridのためにtwitter-bootstrapを使っているようなもんだから、こっちでいけるようだったら乗り換えてもいいかなと思うので、あとできちんと読んでみる。

fluidity

こちらもグリッドシステム。

Unlike other CSS grids, Fluidity does not use the same table-like concept of rows & columns. Instead of the usual print inspired multi-column style grid where the designer has to think about how wide a column is, what margins exist between them, and the usual "wait... how many columns wide is 315px?" Fluidity focuses on the screen and the varying screensizes in our world by describing things in terms of percentage of screen size or exact pixels which is much easier to visualize, plan around, and ultimately understand.

klipspringer

これもドキュメントがない。ソース見た感じではグリッドシステムとレスポンシブ・ウェブデザインは備えているっぽいがどこを目指しているのかちょっとわからない。

プラグインっぽいやつ

フレームワークほど大きくないモジュール

stylus-lemonade

Compass/SASSでいうところのSpritingにあたる機能を提供する。こういうやつだ。

stylus-images

@2xとかをよろしくやってくれるようだ。

Merges duplicated data URIs
Loads resolution dependent images when available
Moves non-inlined relative url's into the output directory

エディタとか更新時コンパイルするもの

stylusにはwオプションがあって、これを使えば更新時にコンパイルしてくれる。

lyvus

これはstylusのwオプションに加え、ブラウザもリロードしてくれる。利用するためには10行くらいのjsコードを埋め込む、lyvusコマンドで表示されるのでそれをコピペすればいい。

ただ、僕がよく使うpyhttpd(python -m SimpleHTTPServerのalias)だとsocket.ioに対応してないからreloadしなくて残念。と思ったが、これのせいではない気もしているので後でちょっと調べる。

styler

こちらはオンラインエディタ。触ってみたところ良い感じなんだけどEmacs使いたいからなぁ。

ズルデザStylusでモック体質の愛され★ウェブサイトみたいな

Fri, 25 Jan 2013 19:11:41 +0919

Rubyのヒトは迷わずSass+Compass使うのかもしれないけど、僕は見た目がすっきりしているStylusのほうが好きです。

Stylusのよいところ

Pythonっぽくかける
coffescriptっぽくもある
{}を極力使わなくていいので右手の小指に負担がかからない(Emacsユーザーは酷使するのは左手小指で十分)
Jadeを使えば全てインデントで統一できる
nibがある

Stylusのよくないところ

LESS2Stylusがない(twitter-bootstrap困る)

Sass関係ないですね。

ズルいStylus

ズルいデザインが良かったので、自分のためにStylus+nibで関数(mixin)にしておくことにした。CSSプリプロセッサのメリットはこういったデザイナーさんの知恵というかプロセスに名前を付けて単なる関数に落とし込めることだと思うんだけど、そういうライブラリはまだあんまないよなと思う。

こういう考え方はwebよりもPixateみたいなスマホとかそっち方面のほうが効果的なのかなぁ。

stylusにtext-shadowがなかったのでズルい線とズルいグラデーションしかやってない。ボックスとかは書くの飽きた。

最近プログラマー(僕はプログラマーじゃないんだけど)向けのデザインのスライドが増えてきて嬉しいですね。

もちろん予約した

スマートフォンデザインでラクするために
石嶋未来
技術評論社 / 2499円 ( 2013-01-29 )

Stylus / Drkcore