ITエンジニア/デザイナ向けにオープンソースを毎日紹介

レスポンシブなサイトを作る際のベースに使うと良さそうです。

シンプルなUIでさくさくとWebサイトを作っていきたいならば何らかのデザインフレームワークを使うのが良いと思います。シンプルなものを使えば後々のカスタマイズ性も良いでしょう。

今回は軽量なフロントエンドフレームワーク、Kickoffを紹介します。ベースにSassを使っており、さらにGruntと組み合わせることでどんどん作っていけるというのが売りになっています。

そこでデザインサンプルを見ていきたいと思います。スクリーンショット多めで紹介します。

まずはタイポグラフィ系。

見出しです。
見出しです。

引用、リスト。
引用、リスト。

定義リスト。
定義リスト。

次はフォーム系。

通常の表示。
通常の表示。

ラベルが横に表示される形式。
ラベルが横に表示される形式。

インラインフォーム。
インラインフォーム。

検索フォーム。
検索フォーム。

エラー表示にも対応しています。
エラー表示にも対応しています。

次はグリッド。

基本的なグリッド。高さが自動で揃います。
基本的なグリッド。高さが自動で揃います。

グリッドを消すとよりすっきりとした感じが分かるかと思います。
グリッドを消すとよりすっきりとした感じが分かるかと思います。

カラムの中にカラムなど複雑な表示も可能です。
カラムの中にカラムなど複雑な表示も可能です。

オフセットを使えば分けた表示もできます。
オフセットを使えば分けた表示もできます。

並び順の制御も可能です。
並び順の制御も可能です。

カラムの中央寄せ。
カラムの中央寄せ。

その他の表示も以下のスクリーンショットをご覧ください。

画像、SVGの表示。
画像、SVGの表示。

注釈付きの画像、テーブル。
注釈付きの画像、テーブル。

カラーピッカー。
カラーピッカー。

ボタン。
ボタン。

角丸のボタン。
角丸のボタン。

テキストの回り込み。
テキストの回り込み。

タブ。
タブ。

Kickoffはレスポンシブやデザインフレームワークになっています。テーブルもある程度までレスポンシブに表示できるようです。日付の入力はカレンダーを使ってできたり、週の入力もできるなど、HTML5に特化してかなり細かい入力方法がサポートされています。

なお、その他のJavaScriptを使ったようなアニメーションやモーダルウィンドウなどは提供されていないようなのでその辺りの作り込みは必要になるかと思います。とは言え予め与えられたコンポーネントだけでなく、カスタマイズも行える点において使い勝手は良いかもしれません。

KickoffはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

tmwagency.github.io/kickoff/

tmwagency/kickoff

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2