BLOG
オススメのCSSフレームワーク「SNUG」のお話
2018/08/21 0:16
はい、俺です。
ラーメン記事やバス釣り記事をお楽しみの皆様、申し訳ございませんが…
今回はガッツリとWEBデザイン・コーディングのお話となります！
今一番オススメしたいフレームワーク「SNUG」
え～っとですね、このフレームワークはぶっちゃけいずれ流行ります。
いつかドカーンと来る日が来ます。
うん、間違いない。
ただ、残念ながらまだ日の目を見れていないだけです。
みんなが興味を持つ程、その内容がまだ世に知れ渡ってないだけです。
と言っても、まだパブリッシュしたばかりなのでそれはしょうがないのですが。
この使いやすさと利便性を理解すれば、こんなに軽くて使いやすいフレームワークは他にないですよ。
今回オススメしたいフレームワークは
「SNUG CSS」
うちの会社の先輩である、NAKAMURA氏が開発者です。
ほんで、そのもっと元になる開発者はこないだ退職した同僚さんのWADACYです。
2人は俺のWEBの師匠ですね。
この2人がいなければ100％今の俺はいません。
んで、ある意味SNUGはその2人の共同開発に近いのかな。
より良いものを！と追及した結果生まれたものでございます。
まずこのフレームワークを使う為に前提となるのが
・SASSの知識（scssのコンパイルが出来る人）
・AdobeXDの知識（XDを使ったモックデザイン等をされる人）
この2つは必須となると思います。
オススメポイント
ところでWEBデザイナーの皆さん、「Adobe XD」って使ってますか？
使ってないっていう方、使う気がないっていう方にはこのSNUGはちょっともったいないフレームワークかもです。
Adobe XDは簡単に言うと、デザインモックやワイヤーを手軽に作成できるツールです。
俺もまだガチガチに触ってるっていう訳ではないですが、どんな感じで作れるのかは何となく分かります。
確かにこれは手軽ですよ。
むしろ特にディレクター職の方とか、これ使えたらチーム開発も捗るんじゃなかろうか。
で、そのAdobe XDの手軽さと、このSNUGを使ったコーディングがあれば…
デザインモックの再現がとても簡単にできちゃうというスグレモノな訳ですよ奥さん！
そう、XDのレイアウトグリッドってやつと互換性があるのです。
つまり、同じ数字を入れるのみ！無駄な計算とか不要！
XDで設定した通りにあらかじめSNUGのファイルに変数としてレイアウトグリッド数値をセットするだけの楽ちん設定です。
さらに面倒なカラム割なんかも用意されたclass記述で簡単にコーディング出来てしまうのです。
従来のフレームワークと何が違うの？
そうですね、有名ドコロで言うと「Boo●strap」とかありますね。
俺も昔はよくお世話になりました。
でもハッキリ言って要らない機能多いんですよね。
あそこまでさすがに使いきれない！
そこでSNUGですよ。
もうね、無駄な機能を全て省いてるのでファイルも軽いの何のって。
XDとの互換性、コンテナ設定、グリッド設定、フレックス、レスポンシブ対応、必要最低限なものは既に用意されてます。
で、どうしても必要だと思うものがあれば自分でカスタマイズしてしまえばいいんですから。
簡単な使い方の例
取り合えず「GitHub」でダウンロード出来ますのでファイル一式DLしましょう。
【初期設定】
ファイルの中の
lib -> sass -> vendor -> _init.scssを開きます。
作成済みのAdobeXDのレイアウトグリッドの値に合わせていきます。
初期設定の例：
/* _init.scss */ $maxcolumn: 12; // 列の値 $gutter: 28px; // 段間隔の値 $desktop: 146px; //両サイドのマージン
下記は元々用意されているclass例の1つです。
カラム割の例（2分割パターン）：
<div class="l-container"> <div class="l-row"> <div class="l-grid-6"> <div style="background-color: #ddd;">コンテンツ</div> //見やすいようにグレーひいてます </div> <div class="l-grid-6"> <div style="background-color: #ddd;">コンテンツ</div> //見やすいようにグレーひいてます </div> </div> </div>
結果
※PCで見るとコンテンツが横に2つ並びます。
※スマホで見るとコンテンツが縦に2つ並びます。
つまり、閲覧する端末の横幅によって勝手にカラムが落ちてレスポンシブ対応もバッチリ。
しかもこれグリッド6で2分割にしてますが、グリッドauto設定も用意されてまして…
数字じゃなくl-grid-autoっていう記述をするだけで勝手にコンテンツ数からカラム数を割り出して均等配置もできるという…
こういう痒い所に手が届くフレームワークとなっている訳ですね。
ちなみにファイル構成の説明を簡単にさせてもらうと
・index.html
メインのhtmlファイルですね。
ちなみにWordpressテーマ用としてPHP版のものも作成されてますので
そのうちどこかでDL出来るようになるかと思います。
・lib -> sass -> vendor
この中のファイルは設定の為のものなので基本的にいじりません。
ただ、先程の例で挙げた「_init.scss」の数値のみ初期設定すればOKです。
・lib -> sass -> _custom.scss
オリジナルのスタイルの追加等はこのカスタム用のファイルに記述していくと良いでしょう。
・lib -> css -> style.css
sassのコンパイル後はこのcssファイルに吐き出されます。
ファイルが軽い！
簡単！シンプル！
自由度が高い！
一貫したクオリティのままチーム開発もしやすい！
そしてXDとの互換性アリ！
このSNUGという武器は一度使えばもう手放せなくなる事は間違いありません。
詳しい使用方法はSNUG公式サイトで見るのが一番なんで、興味のある方はぜひチェックしてみてください。
SNUG CSS
M.A.DESIGN ART WORKS
GitHub（ダウンロード）
https://github.com/snugcss/snug
Wadacy.com
という訳で今回はCSSフレームワークのお話でした！
ではまた近いうち！
アディオス！
1242 Views
コメントはこちらから