Stylusのフレームワークといえばnibだろうが、他にもいくつかあったので調べてみた。プラグインっぽい拡張とかもあったんだけど、Stylusの公式からリンクも張ってないしnpmも探しにくいしどうしたらいいのかなぁと。 Framework nib お約束。でもtext-shadowがないのはちょっと困るかな。 nibble nibの上にのっかる感じのフレームワークらしい。ドキュメントが殆ど無いけど、foundationに強く影響を受けているらしいので、グリッドシステムとかレスポンシブ・ウェブデザインが充実しているのかな。僕の場合はGridのためにtwitter-bootstrapを使っているようなもんだから、こっちでいけるようだったら乗り換えてもいいかなと思うので、あとできちんと読んでみる。 fluidity こちらもグリッドシステム。 Unlike other CSS grids, Fl
Nib CSS3 extensions for Stylus Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier. body { background: linear-gradient(top, white, black); } body { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)); background: -webkit-linear-gradient(top, #fff 0%, #000
ナウいらしいからgruntいれてみるよ cowboy/grunt GruntはJSで作られている、Rakeみたいなビルドタスクの管理ツールといえばよいのでしょうか。LESSやCoffee Scriptのようなコンパイルを必要するファイルの処理や、minify・concatなどもタスクとして実行できます。 デフォルトで、ファイル更新を監視するwatchタスクもあるため、コンパイル操作の自動化などにも使っていけます。npmでもgrunt関係のタスクが多数公開されているので、簡単にタスクを追加できます。 まずはnpmでgrunt本体をインストール。 # ng npm instlal grunt npm WARN prefer global [email protected] should be installed with -g # ok npm install -g grunt あ、グローバルじゃないと
stylus を使ってコードが短くなった例。 iPhone HOME みたいな配置がしたかった（アイテムが出てからリサイズしてみてください） のですが、CSS が長ったらしくなりわけが分からなくなりました。 HUNDRED = 100% itemHeight = 240px /* TODO: Use stylus iterator */ @media only screen and (max-width: 749px) .word:nth-child(1) .word:nth-child(2) top 0 .word:nth-child(3) .word:nth-child(4) top itemHeight .word:nth-child(5) .word:nth-child(6) top itemHeight * 2 .word:nth-child(7) .word:nth-child
CSSStylusってhttp://learnboost.github.com/stylus/nodeのモジュールについてるSassの書き方がいまいちググっても分からない（特にMixins周り）のでいっそ別のを使ってみるノリ。CSSの面倒くさいところを(Sassよりも)色々端折れるらしい。導入の仕方はhttp://d.hatena.ne.jp/ruedap/20110622/node_js_express_app_css_template_stylusの記事が詳しい。適当に書いてみるポジショニング pos(x=null, y=null) position absolute left x unless x is null top y unless y is null #box pos 10px 10px #box { position: absolute; left: 10px; top:
This page has moved to http://stylus-lang.com/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
