レイアウトグリッドをコードで。

Adobe XDが持つレイアウトグリッドを再現できるCSSフレームワークです。プロトタイプとしてのAdobe XDの機能を活かします。

柔軟なデザイン。

従来のWEBフレームワークでは、スピーディに開発できるよう独自のデザイン(スタイル)が適用されています。SNUGはグリッド以外のコンポーネントは持たず、フレームワークに依存しないオリジナリティのあるデザインを可能にします。

チーム開発に。

ディレクター、デザイナーはSNUGの知識は必要ありません。Adobe XDのレイアウトグリッドを使うことでワイヤーフレーム、デザイン、プロトタイプといった作業はフレームワークを意識せずに行うことができます。

Quick start

01Download a SNUG.

DOWNLOAD SNUG

02Initialize.

// _init.scss

$maxcolumn: 12; // グリッドの最大カラム数を指定
$gutter: 28px; // グリッド同士の隙間を指定
$desktop: 146px; // コンテナーの両サイドのマージンを指定


03Markup.

// index.html

<div class="l-container">
  <div class="l-row">
    <div class="l-grid-12">
      // Your Content
    </div>
  </div>
</div>

Features

Build on Sass / Scss.

SNUGはSass / Scssを使った軽量なグリッドフレームワークです。

Include Icon Font.

Font Awesome 5をあらかじめインクルードしています。

Customize.

プロジェクト毎のカスタマイズも簡単に。

Responsive.

デスクトップ、モバイルだけじゃなくAdobe XDで使えるアートボード全てに対応しています。

License & more.

MIT License

This framework is released under the MIT License. Please read LICENSE.

Special Thanks.

Special thanks to Scss, reset css, and FontAwesome.

Found a bug?

Please open new issue on Github. Or tell me by email or Twitter.