レイアウトグリッドをコードで。
Adobe XDが持つレイアウトグリッドを再現できるCSSフレームワークです。プロトタイプとしてのAdobe XDの機能を活かします。
柔軟なデザイン。
従来のWEBフレームワークでは、スピーディに開発できるよう独自のデザイン（スタイル）が適用されています。SNUGはグリッド以外のコンポーネントは持たず、フレームワークに依存しないオリジナリティのあるデザインを可能にします。
チーム開発に。
ディレクター、デザイナーはSNUGの知識は必要ありません。Adobe XDのレイアウトグリッドを使うことでワイヤーフレーム、デザイン、プロトタイプといった作業はフレームワークを意識せずに行うことができます。
Quick start
01Download a SNUG.
DOWNLOAD SNUG02Initialize.
// _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で使えるアートボード全てに対応しています。