2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ

Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。

2017年、チェックしておきたい!CSSの軽量フレームワークのまとめ

サイトのキャプチャ

mini.css -GitHub
mini.css
テンプレート一覧

モバイルデバイスと最新のブラウザを考慮して設計された軽量(7KB)CSSフレームワーク。ほとんどのコンポーネントはFlexboxで実装されています。カスタマイズにも優れており、デザインにとらわれることなく、利用できます。

サイトのキャプチャ

Cutestrap -GitHub
Cutestrap

Bootstrapの代替として利用できるよう設計された軽量(8KB)のフレームワーク。CSSの詳細度を小さい値で実装されており、KSSを使用したスタイルガイドのベースになります。

サイトのキャプチャ

Milligram -GitHub
Milligram
デモ一覧

ミリグラムの名の通り非常に軽量(2KB)のフレームワークで、実装の出発点として最小のスタイル設定を提供します。リセットすべきプロパティはよりクリーンなコードで、より良いパフォーマンスと高い生産性を目的に設計されています。

サイトのキャプチャ

Buefy -GitHub
Buefy

BulmaをベースにしたVue.js用の軽量UIコンポーネント。派手なアニメーションはなしで、ユーザビリティとパフォーマンスに焦点を当てています。
Bulmaについては、下記を参考に。

サイトのキャプチャ

Siimple -GitHub
Siimple

フラットなデザインで、クリーンなWebサイトを設計するためのレスポンシブ対応のオープンソースの軽量(8KB)フレームワーク。Material Designの美しいカラーを使ったシンプルなコンポーネントが用意されています。

サイトのキャプチャ

Mobi.css -GitHub
Mobi.css

モバイルファーストで設計された軽量(3KB)のフレームワーク。デスクトップでも動作します。コンポーネントのディテールに重点が置かれており、特にコンテンツが豊富なページに最高のユーザーエクスペリエンスを提供します。

サイトのキャプチャ

modulr.css -GitHub
modulr.css
デモ一覧

パワフルなWebインターフェイスとモバイルインターフェイスを構築するために、モジュラー式で設計された軽量(17KB)フレームワーク。必要なCSSファイルのみで構成するとさらに軽くなります。

サイトのキャプチャ

Grd -GitHub
Grd

日本人制作者による、Flexboxで実装されたグリッド専門の軽量(321bytes)フレームワーク。使用するclassは、2つだけで、単位にcalc()を使用して、グリッドを作成します。

サイトのキャプチャ

Frow -GitHub
Frow

Flexboxでグリッドをはじめ、さまざまなコンポーネントを実装できる軽量(21KB)フレームワーク。ヘッダやカード、高さ100%など、最近人気のコンポーネントが揃っています。

サイトのキャプチャ

EqualizeCss -GitHub
EqualizeCss

Flexboxの各プロパティを活用して制作された軽量(13KB)のフレームワーク。必要なスタイルを記述するだけで、グリッドを作成し、行や列を管理することができます。class名は一般的なフレームワークと同じなので、移行も簡単です。

サイトのキャプチャ

Waffle Grid System -GitHub
Waffle Grid System

Flexboxで実装された軽量(6KB)のフレームワーク。ガード型レイアウトが、まるでワッフルのように簡単にレイアウトできます。

サイトのキャプチャ

Fukol Grids -GitHub
デモページ

今回紹介している中で最軽量の93bytes!
たった9行でレスポンシブ対応、プログレッシブエンハンスベースのグリッドを実装するCSSフレームワークです。

サイトのキャプチャ

MUI -GitHub
MUI

GoogleのMaterial Designのガイドラインに準拠した軽量(5.4KB)のCSSフレームワーク。サイトを構築するために必要な基本コンポーネントはすべて含まれています。

サイトのキャプチャ

Picnic CSS -GitHub
Picnic CSS
デモページ

さまざまなコンポーネントが含まれた、プロジェクトをはじめる際のベースになる軽量(37KB)のフレームワーク。ファイルサイズの割に、かなりの数のコンポーネントが用意されています。

サイトのキャプチャ

Turretcss -GitHub
Turretcss

デフォルトのHTML要素を使い、アクセシブルでセマンティックなWebサイトを構築するための軽量(71KB)フレームワーク。

サイトのキャプチャ

Spectre.css -GitHub
Spectre.css

カスタマイズ性に優れた、レスポンシブ対応の軽量(10KB)のフレームワーク。Flexboxベースで実装されており、モバイルフレンドリーのレイアウトを構築できます。

サイトのキャプチャ

Basscss -GitHub
Basscss

スピード、パフォーマンス、スケーラビリティのために設計された軽量ユーティリティのコレクション。グリッド用、レイアウト用、ボーダー用など、それぞれ利用するもののみ使用することができます。

サイトのキャプチャ

hack.css -GitHub
hack.css

非常にシンプルなデザインで、Flexboxをベースに実装された軽量フレームワーク。用途ごとにCSSファイルが管理されており、グリッド用、コンポーネント用、マークダウン用などが揃っています。

top of page

©2017 coliss