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

スタイルシートのフレームワークはとても数多くあります。有名なところではBootstrap/Zerb/Ionicなどがありますが、有名なものは情報が多い一方、使った時のデザインが似通ったものになってしまいます。

そこで人と違ったフレームワークを採用するのも面白さがあります。もちろんカスタマイズのしやすさなども大事でしょう。そこで今回はBlackholeを紹介します。

Blackholeの使い方

スクリーンショットを多めに紹介します。

ヘッダー。
ヘッダー。

ボタン。
ボタン。

インプット。
インプット。

こんな感じにインプットを警告表示にすることもできます。
こんな感じにインプットを警告表示にすることもできます。

タブ。
タブ。

右側にタブとプログレスバー。
右側にタブとプログレスバー。

ドロップダウン。
ドロップダウン。

プロフィール入力。
プロフィール入力。

ネストできるリスト。
ネストできるリスト。

メニュー。
メニュー。

ナビゲーションバー。ページネーション。
ナビゲーションバー。ページネーション。

アラート。
アラート。

通知。
通知。

ボックス。
ボックス。

リボン。
リボン。

ボックス+アイコン。
ボックス+アイコン。

テーブル。
テーブル。

アイコン。
アイコン。

こんな感じにエフェクトもできます。
こんな感じにエフェクトもできます。

イメージ。
イメージ。

動画プレーヤもあります。
動画プレーヤもあります。

水平線。
水平線。

ソーシャルアイコンとタイムライン。
ソーシャルアイコンとタイムライン。

垂直なタイムライン。
垂直なタイムライン。

プライスリスト。
プライスリスト。

マウスオーバーでズームします。
マウスオーバーでズームします。

返信可能なコメント。
返信可能なコメント。

回転。
回転。

Blackholeの特徴としては軽量であること、Sassで書かれていること、モジュールベース、セマンティック、レスポンシブ、右書き対応などがあります。カラーリングが派手で、文字も大きめなのでモバイルデバイスなどに使うと良さそうです。

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

Blackhole - Minimalistic but powerful SASS / CSS Framework

alinseba/blackhole

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2