ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSは柔軟な書き方に対応するフォーマットだが、運用を続けていくと構造の階層が乱れていったり、フォントサイズの設定が様々な場所に散らばったりと管理しづらくなっていく。

データを上手に管理すべく、プログラマブルなCSSを導入してみるのはいかがだろう。

今回紹介するオープンソース・ソフトウェアはMoonfall、CSSジェネレータだ。

Moonfallはスクリプトで定義する変数のリストと、CSSテンプレートからなる。CSSテンプレートには[]で囲むと数値や文字に置き換わる。ハッシュで定義してCSS指定をまとめることもできる。

fillと言う関数を利用すると、二、三段のカラム生成が容易にできる。幅や一部のカラムの大きさを指定すれば、あまった場所については自動計算してくれる仕組みだ。

現状のCSSは言わば各数値、文字列がハードコーディングされた状態だ。柔軟なデザイン変更に対応するにはやはり変数化が便利だろう。

MoonfallではLuaと言う言語が使われている。これはAdobe Lightroomでも使われている言語で、記法は特に難しいわけではないが一応覚える必要はある。

Moonfall: CSS with variables

http://moonfall.org/

その他のスクリーンショットはこちら。

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2