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

SCSS/Stylusを使っているデザイナーの方向け!

レスポンシブなWebデザインを行う上でも欠かせないのがグリッドシステムです。Bootstrapは何となく嫌だなと思いつつもその複雑なグリッド機能の恩恵にはあずかりたいと考える人も少なくありません。

この手のグリッドシステムでは幅を12分割して実装されることが多いのですが、それではコンピュータは良くとも人にとっては分かりづらいかも知れません。そこで使ってみたいのがJeetです。

Jeetの使い方

Jeetは

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

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

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

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

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

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

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

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

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

Jeet Grid System | Smart CSS preprocessor grids

mojotech/jeet

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2