正直しんどいコーディングを快適に〈フレームワーク〉

CSSフレームワーク

Bootstrapや、Foundation/Pure/など色々な「フレームワーク」が配布されています。
CSSフレームワークは、コーディングの際に、簡略化するという「フレームワーク」です。
CSSフレームワークは、ビジュアルに関する事前定義が指定されています。

グリッド

いくつかボックスのパターンが定義されています。

ボタン専用のフレームワーク

cssで作成されたボタンのパターンが多くあり、フリーでダウンロードできます!!

Buttons
サイト詳細はこちらから「http://unicorn-ui.com/buttons/builder/






フレームークの紹介

では実際に配布されている「フレームワーク」のご紹介をしていきます!!

Bootstrap

「BootstrapはレスポンシブかつモバイルファーストなWebプロジェクトのための、
一番人気のHTML、CSS、JavaScriptフレームワークです」

Bootstrapサイト詳細はこちらから「https://getbootstrap.com/

  • 開発者:Mark Otto、Jacob Thornton
  • リリース:2011年
  • 現行バージョン:3.3.7
  • 人気度:GitHubスター111,000個
  • コンセプト・原則:レスポンシブWebデザイン(以下RWD)、モバイルファースト
  • サイズ:154KB
  • プリプロセッサー:Less、Sass
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:Glyphicons Halfling
  • 拡張・アドオン:バンドルされていないものの多数のサードパーティ製プラグインあり
  • 特徴的なコンポーネント:Jumbotron
  • ドキュメント類:良好
  • カスタマイズ:基本的GUIカスタムあり。残念ながらカラーピッカーは無く、自分で色の値入力が必要
  • ブラウザー対応:Firefox、Chrome、Safari、IE8以上(IE8にはRespond.jsが必要)
  • ライセンス形態:MIT

Foundation

世界でもっとも進んだフロントエンドのレスポンシブフレームワークです。

Foundationサイト詳細はこちらから「https://foundation.zurb.com/

  • 開発者:ZURB
  • リリース:2011年
  • 現行バージョン:6.3.1
  • 人気度:GitHubスター254,000個
  • コンセプト・原則:RWD、モバイルファースト、セマンティック
  • サイズ:197.5KB
  • プリプロセッサー:Sass
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:Foundation Icon Fonts
  • 拡張・アドオン:あり
  • 特徴的なコンポーネント:Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
  • ドキュメント類:良好。公式以外の参考リソースも多数あり
  • カスタマイズ:Bootstrapのものに似た基本的なGUIカスタムツール
  • ブラウザー対応:Chrome、Firefox、Safari、IE9以上、iOS、Android、 Windows Phone 7以上
  • ライセンス形態:MIT

Semantic UI

自然言語の法則にもとづいたUIコンポーネントフレームワーク

Semantic UIサイト詳細はこちらから「https://semantic-ui.com/

  • 開発者:Jack Lukic
  • リリース:2013年
  • 現行バージョン:2.2
  • 人気度:GitHubスター34,762個
  • コンセプト・原則:セマンティック、使用するHTMLタグの自由さ、レスポンシブ
  • サイズ:806KB
  • プリプロセッサー:Less
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり、基本的なものは提供
  • アイコンセット:Font Awesome
  • 拡張・アドオン:なし
  • 特徴的なコンポーネント:Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、Dimmer、Rating, Shape
  • ドキュメント類:非常に良い。整理された公式ドキュメントに加え、専用Webサイトで開始の手引き、カスタマイズ、テーマの作成を解説している
  • カスタマイズ:GUIカスタムツールなし、自力で変更するのみ
  • ブラウザー対応:Firefox、Chrome、Safari、IE10以上(IE9はプレフィックスが必要)、Android 4以上、Blackberry 10
  • ライセンス形態:MIT






Pure (by Yahoo!)

どんなWebプロジェクトでも使える軽量でレスポンシブなCSSモジュール

Pureサイト詳細はこちらから「https://purecss.io/

    • 開発者:Yahoo
    • リリース:2013年
    • 現行バージョン:0.6.2
    • 人気度:GitHubスター16,637個

コンセプト・原則:SMACSS、ミニマリズム

  • サイズ:16KB
  • プリプロセッサー:なし
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:なし。代わりにFont Awesomeを使用可
  • 拡張・アドオン:なし
  • 特徴的なコンポーネント:なし
  • ドキュメント類:良好
  • カスタマイズ:基本的なGUIスキン作成ツール
  • ブラウザー対応:最新版のFirefox、Chrome、Safari、IE7以上、iOS 6[c].x・7.x、Android 4.x
  • ライセンス形態:Yahoo! Inc. BSD

 

UIkit (by YOOtheme)

速くてパワフルなWebインターフェイス作成のための、軽量かつモジュール化されたフロントエンドフレームワーク

UIkitサイト詳細はこちらから「https://yootheme.com//

  • 開発者:YOOtheme
  • リリース:2013年
  • 現行バージョン:3.0.0
  • 人気度:GitHubスター9,422個
  • 説明:速くてパワフルなWebインターフェイス作成のための、軽量かつモジュール化されたフロントエンドフレームワーク
  • コンセプト・原則:RWD、モバイルファースト
  • サイズ:326.9KB(SVGアイコン関連機能のuikit-icons.min.jsを含めた場合384.4KB)
  • プリプロセッサー:Less、Sass
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:独自のSVGアイコンシステムと、現在数を増やしつつあるアイコンライブラリー
  • 拡張・アドオン:あり
  • 特徴的なコンポーネント:Article、Flex、Cover、HTMLエディター
  • ドキュメント類:良好
  • カスタマイズ:GUIカスタムツールは旧バージョンの2.x用のみ
  • ブラウザー対応:Chrome、Firefox、Safari、IE9以上
  • ライセンス形態:MIT

実際のテンプレートの紹介

Template Collection 2017

100種類パックデータを無料でダウンロードできます。ツイッタでつぶやけばダウンロード可能です。

Template Collection 2017サイト詳細はこちらから「http://demo.themewagon.com/preview/template-collection-2017

フレームワークのメリットデメリット

まとめ

参考サイト

Commentsこの記事についたコメント

%d人のブロガーが「いいね」をつけました。