レスポンシブで軽量な20のCSSフレームワーク

Eric Karkovack

Eric Karkovack氏は20年以上の経験を持つWebデザイナーです。”Your Guide to Becoming a Freelance Web Designer“の著者。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

20 Responsive & Lightweight CSS Frameworks

良質でレスポンシブなCSSフレームワークを使えば、どんなWebデザインプロジェクトも有利にスタートできます。CSSフレームワークのなかには、Bootstrapのようにコードが多すぎて重いものもあれば、反応が遅いものもあります。

不必要な選択肢に悩まされない、操作に十分な機能だけあるものが理想的でしょう。

よければ、Material Design Web FramewoeksOpen-Source WordPress Development Frameworkの記事もご覧ください。

ここでは、軽量でベーシックな20のCSSフレームワークをご紹介します。

FICTOAN

FICTOANは、複雑なフレームワークを好まないユーザーにとっての優れた選択肢になることを狙っています。含む機能は、鮮やかなカラースキーム、カスタムアイコン、そして多くの軽いデザイン要素です。

Avalanche

ニーズに合わせてカスタマイズできるフレームワークです。流動的なグリッドシステム、オフセットクラス、コンテナ、バーティカルスペーシングなどの特定の機能を使うことができます。

Beauter

5KB未満に圧縮されたBeauterは、超軽量を実現しています。軽いだけで機能がないわけではありません。レスポンシブなグリッドなどの基本機能だけでなく、パララックススクロール、モーダル、ツールTIPSなどの良い機能が備わっています。

Vanilla Framework

Vanilla Frameworkはシンプルなデザインで、プロジェクトの立ち上げに使用するのに良いフレームワークです。そのままでも見栄えがするコンテナとデザイン要素がたくさん含まれていますが、簡単に好みの形にカスタマイズすることもできます。

Bulma

CSS FlexboxをベースにしたBlumaは、必要なものだけを使うことができる、完全レスポンシブなモジュールフレームワークです。数字やビューポートに基づいて自動的にカラムやタイル状のデザインを実現するといった、Flexboxの便利な機能を備えています。

Milligram

Milligramはその名前の通り、とても軽量です。圧縮時にはたったの2KBになります。想像するような基本機能をすべて含み、サイトを組み直すための最小限のスタイルで設計されています。

InvisCss

InvisCssは、複雑なフレームワークの代用品として構築されました。シンプルなCSSセレクタ名と小規模ながら魅力的なUIが特徴です。

Look

個人のプロジェクトの産物であるLookは、ミニマルなCSSフレームワークです。サイト開発者が仕事を始めるときに導入しやすい基本のフレームワークになっています。デザイン要素はシンプルで、好みの形にカスタマイズできます。

unlimitedGrid

Sassに基づいたunlimitedGridは、フレキシブルでモバイルファーストなグリッドのフレームワークです。モジュラーなので、必要とする機能のみを使わなくてはいけません。Flexboxのサポートを含み、複数のグリッドバリエーションから選べます。

Vital

より大きなフレームワークへの「逆アプローチ」として構築されたVitalは、軽量かつスケーラブルです。Sassを使って構築されているので、有効なグリッドレイアウト、カスタムボタンとローダーを見つけられます。写真加工、カードコンテナ、フォーム用にいくつかの便利なレイアウトがあります。

PowerToCSS

SMACCSやDRYをベースにしたPowerToCSSは、強固な基盤を提供する軽量のCSSフレームワークで、Webプロジェクトを次々に素早く始められます。

Kouto Swiss

Kouto Swissは、Stylusのための完全なCSSフレームワークで、多くのmixin、機能、そして素早くコード化するためのユーティリティソフトウェアを持っています。また、Caniuse Webサイトの権限も持っており、互換性のニーズに合ったスタイルシートを作ることができます。

Muffin

Muffin自体はフレームワークではありませんが、ここで取り上げる価値があるものです。デザイン重視のフロントエンドデザインテンプレートで、SASSやJekyllを使って静的なサイトを作ることができます。Muffinは、Bootstrap、Boilerplate、 inuit.cssなどのライブラリから一般的な方法を採用しているので、すぐにコーデイングを始められます。

Furtive CSS

Furtiveは、少ないメモリでも動作するモバイルファーストなフレームワークです。古いバージョンのブラウザでも作動します。つまりflexboxやSVGや、一部のベンダープレフィックスなどの「最先端技術」使うことができます。SCSSやCSSでも入手でき、構築をカスタマイズするのにGulpのファイルを用います。

Webplate

Webplateには、強固でレスポンシブなレイアウトエンジンから、グローバルなボタン要素、カスタマイズ可能なフォームや、IcoMoonアイコンフォント用サポートまですべてが含まれます。jQuery、Modernizr、Typeplateもデフォルトで入っています。

Fluidity

Fluidityは、現存するもっとも軽量でレスポンシブ対応したCSSフレームワークかもしれません。そのHTML記述だけで、追加設定なしに、115バイトのCSSファイルのみでほぼ100%レスポンシブ対応します。これ以上軽量のものはないでしょう。

Schema

LESS上に構築されたSchemaは、レスポンシブなフロントエンドのUIフレームワークで、CSSコンポーネントの包括的なコレクション(ボタン、ドロップダウン、フォームなど)を搭載しているので、素早く使用を始められます。

Emerald

Emeraldは、LESS内の実用的でレスポンシブなグリッドシステムで、ブロック要素に基づいており(フロートとは正反対)、BEMシンタックスを用いたOOCSSで書かれています。

Bijou

Bijouは、軽量(2KB以下)でレスポンシブな10カラムのグリッドフレームワークです。ボタン、アラート、テーブル、ナビゲーションバー、グリッドから構成されています。

Base

Baseは、セマンティックかつ軽量で拡張可能なフレームワークで、流動的グリッドと固定的グリッドを独自の幅、カラム、ガター、オフセット、パディングで作成できます。ボタン、フォーム、メニュー要素、CSS3プロパティ用のLESS mixinコレクション、アニメーション、グラデーション、いくつかの便利なmixinまでも含みます。

Spark

Sparkはレスポンシブデザイン用の、モバイルファーストのアプローチに基づいた軽量フレームワークです。そのフレームワークは交換可能ないくつかのカラーテーマを使い、明るくフラットなスタイルであらかじめ構築されています。

Typebase

Typebase.cssは、最小限でカスタマイズできるCSSタイポグラフィの文例集です。Typebase.cssが提供するもっとも重要な機能は、ほとんどのデバイス画面に適用される強制的なバーティカルリズムです。カラムにまたがるテキストと長いコピーが自動的に揃うようにします。 Less版とSass版が入手できます。

Hoisin

Sassで構築されたHoisinは、シンプルでレスポンシブなフロントエンドミニフレームワークで、複雑で肥大化したフロントエンドフレームワークの代替品として作られました。コンポーネントを一切含まず、その代わりに、独自のライブラリを作れる組織化された基盤の提供に注力しています。

Cute Grids

Cute Gridsは、モバイルファーストな12カラムのレスポンシブグリッドシステムです。多くのプロジェクトを大失敗させデザイナーの創造力を制限する恐れのある、今日のフレームワークへの失望から生まれました。

軽量でありながら強力

どんな種類であれフレームワークを使う際のポイントは、作業をより簡単にするかどうかです。たくさんのCSSスタイルを変更したり一連のスクリプトを読み込む際に、フレームワークを使おうとしないのはまったく論理的ではありません。

上記の基本フレームワークのどれかを使うことで、悩まされずに素早く作業を始められます。なかにはモジュラーアプローチを用いたフレームワークもあるので、特定のプロジェクトのために必要なアイテムだけを選んで使うこともできます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集