http://blog.kzfmix.com/CSSProgramming, Music, SnowboardingjaFri, 08 Feb 2013 08:11:08 +0919http://blog.kzfmix.com/entry/1360270690<p><a href="http://learnboost.github.com/stylus/">Stylus</a>のフレームワークといえば<a href="https://npmjs.org/package/nib">nib</a>だろうが、他にもいくつかあったので調べてみた。プラグインっぽい拡張とかもあったんだけど、Stylusの公式からリンクも張ってないしnpmも探しにくいしどうしたらいいのかなぁと。</p> <h3>Framework</h3> <h4><a href="https://npmjs.org/package/nib">nib</a></h4> <p>お約束。でも<a href="http://blog.kzfmix.com/entry/1359031286">text-shadowがない</a>のはちょっと困るかな。</p> <h4><a href="https://npmjs.org/package/nibble">nibble</a></h4> <p>nibの上にのっかる感じのフレームワークらしい。ドキュメントが殆ど無いけど、<a href="http://foundation.zurb.com/">foundation</a>に強く影響を受けているらしいので、グリッドシステムとかレスポンシブ・ウェブデザインが充実しているのかな。僕の場合はGridのためにtwitter-bootstrapを使っているようなもんだから、こっちでいけるようだったら乗り換えてもいいかなと思うので、あとできちんと読んでみる。</p> <h4><a href="https://npmjs.org/package/fluidity">fluidity</a></h4> <p>こちらもグリッドシステム。</p> <blockquote> <p>Unlike other CSS grids, Fluidity does not use the same table-like concept of rows &amp; 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.</p> </blockquote> <h4><a href="https://npmjs.org/package/klipspringer">klipspringer</a></h4> <p>これもドキュメントがない。ソース見た感じではグリッドシステムとレスポンシブ・ウェブデザインは備えているっぽいがどこを目指しているのかちょっとわからない。</p> <h3>プラグインっぽいやつ</h3> <p>フレームワークほど大きくないモジュール</p> <h4><a href="https://npmjs.org/package/stylus-lemonade">stylus-lemonade</a></h4> <p>Compass/SASSでいうところのSpritingにあたる機能を提供する。<a href="http://t32k.me/mol/log/spriting-with-compass/">こういうやつ</a>だ。</p> <h4><a href="https://npmjs.org/package/stylus-images">stylus-images</a></h4> <p>@2xとかをよろしくやってくれるようだ。</p> <ul> <li>Merges duplicated data URIs</li> <li>Loads resolution dependent images when available</li> <li>Moves non-inlined relative url's into the output directory</li> </ul> <h3>エディタとか更新時コンパイルするもの</h3> <p>stylusにはwオプションがあって、これを使えば更新時にコンパイルしてくれる。</p> <h4><a href="https://npmjs.org/package/lyvus">lyvus</a></h4> <p>これはstylusのwオプションに加え、ブラウザもリロードしてくれる。利用するためには10行くらいのjsコードを埋め込む、lyvusコマンドで表示されるのでそれをコピペすればいい。</p> <p><img alt="lyvus" src="http://www.kzfmix.com/images/blog/lyvus.png" /></p> <p>ただ、僕がよく使うpyhttpd(python -m SimpleHTTPServerのalias)だとsocket.ioに対応してないからreloadしなくて残念。と思ったが、これのせいではない気もしているので後でちょっと調べる。</p> <h4><a href="https://npmjs.org/package/styler">styler</a></h4> <p>こちらはオンラインエディタ。触ってみたところ良い感じなんだけどEmacs使いたいからなぁ。</p>Fri, 08 Feb 2013 08:11:08 +0919javascriptStylusCSShttp://blog.kzfmix.com/entry/1359719466<p>こんな定義らしい</p> <blockquote> <p>JSを使用せず、HTML+CSSだけでJSを使ったかのようなPure CSSなコンテンツを作ることをCSS プログラミングと呼んでいます（勝手に）</p> </blockquote> <p>CSS Programming Advent Calendar 2012の一日目の内容が非常にわかりやすい。</p> <ul> <li><a href="http://geckotang.tumblr.com/post/36885315563/1-css-programming-advent-calendar-2012">1日目 : CSS Programming Advent Calendar 2012</a></li> </ul> <p>イベントを捉えて、それに応じてcssのプロパティを変化させることで動きを与えるらしい。擬似要素の数を状態として持たせるのもなんかラムダ計算みたいだなーとか思いながら見てた。</p> <p><a href="http://lopan.jp/css-slideshow/">CSSだけでスライドショーはつくれるよ。</a>が面白くてなるほどーとか思いながら読んだ。</p>Sat, 02 Feb 2013 08:36:12 +0919CSS