SCSS/Stylusを使っているデザイナーの方向け！ レスポンシブなWebデザインを行う上でも欠かせないのがグリッドシステムです。Bootstrapは何となく嫌だなと思いつつもその複雑なグリッド機能の恩恵にはあずかりたいと考える人も少なくありません。 この手のグリッドシステムでは幅を12分割して実装されることが多いのですが、それではコンピュータは良くとも人にとっては分かりづらいかも知れません。そこで使ってみたいのがJeetです。

Jeetの使い方

Jeetは .col-6 のような書き方をしないのが特徴です。ではそのデザインを見てみましょう。

グリッドの例。囲まれた部分がグリッド指定されています。

テーブル組みに見えますが実際にはDivタグです。

こんな感じでdiv構成になっています。

こんな感じの複雑な表現もできます。

SCSS/Stylus向けにメソッドが用意されています。

SPAN/SHIFTといったメソッドを使ってデザインを行っていきます。

スタイルシートの代替記法を使っている場合に採用してみると面白いかも知れません。グリッドだけに特化しているので、デザインの柔軟性は損なわれずに使えるのではないでしょうか。

Jeetはnode/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Jeet Grid System | Smart CSS preprocessor grids mojotech/jeet