08022013 javascript Stylus CSS
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使いたいからなぁ。
スマートフォンデザインでラクするために