• TITLE 2018年にオススメしたいCSSフレームワーク
  • YEAR2018.05.16
  • TAG
2018年にオススメしたいCSSフレームワーク

2018年にオススメしたいCSSフレームワーク

どうもこんにちは。

今日は私の友人が制作したCSSフレームワークが良かったので紹介しようと思います。

代表的なCSSフレームワーク

最近では「鈴木」さんや「佐藤」さんを見つけるくらい簡単に見つかるCSSフレームワークですが、代表的なものだと「Bootstrap」とか「Bootstrap」とか「Bootstrap」がありますよね。

「Bootstrap」もv4.0以降「flexbox」での制作が可能になりましたが、やはり機能過多と言わざる得ない設計になっています。

そこで今回紹介したいのが「SNUG」というCSSフレームワークです。

SNUGとは?

設計自体はとてもシンプルな構成となっており、「flexbox」で構築していくフレームワークとなっています。

近年では「flexbox」に対応したブラウザも増えてきており、floatやinline-blockなどのプロパティを使わずに制作することも増えてきているかと思います。

そして、目玉機能として「Adobe XD」のレイアウトグリッドと互換性があるので、ワイヤーやモックからそのままサイト制作に望める利点があります。

「Adobe XD」のレイアウトグリッドとの互換性だけでなくグリッド幅やコンテナ幅は自由に変更できるため、自由度の高いサイト制作に対応できます。

また、Classベースでの記述とSassベースでの記述が可能となっているのもポイントです。

使い方

<!-- HTML -->
<div class="l-container">
  <div class="l-row">
    <div class="l-grid-12"> CONTENT </div>
  </div>
</div>

<div class="l-container">
  <div class="l-row">
    <div class="l-grid-4"> CONTENT </div>
    <div class="l-grid-6 l-offset-left-1"> CONTENT </div>
  </div>
</div>
/* SCSS */
.wrapper {
  @include l-container;
}

.inner {
  @include l-row;
}

.box {
  @include l-grid-3;
}

上記のように簡単にグリッドを組めるようになっています。

とても良いと思った機能

<!-- HTML -->
<div class="l-container">
  <div class="l-row">
    <div class="l-grid-auto"> CONTENT </div>
    <div class="l-grid-auto"> CONTENT </div>
    <div class="l-grid-auto"> CONTENT </div>
    <div class="l-grid-auto"> CONTENT </div>
    <div class="l-grid-auto"> CONTENT </div>
  </div>
</div>

「l-grid-auto」を使用することで、セレクター数をカラム数で割って自動でサイズを出してくれます。

記事内の画像を横に3つ並べたいときなどは「l-grid-auto」を3つ入れておけば自動で3つ並ぶのでとてもオススメの機能となっています。

他にも余白も持たないグリッドを組めたりしますがここでは割愛します。

まとめ

多くのCSSフレームワークが世に出回っていますが、機能盛り盛り!コンポーネント盛り盛り!がいいという人には向かないと思いますが、「flexbox」ベースのフレームワークであることや、理解のしやすさや、最低限の機能を備えたシンプルでとても使いやすいフレームワークとなっているので是非みなさんつかってみてください。それでは。

SNUG CSS : https://snugcss.com/