スタイルシートのフレームワークはとても数多くあります。有名なところではBootstrap/Zerb/Ionicなどがありますが、有名なものは情報が多い一方、使った時のデザインが似通ったものになってしまいます。 そこで人と違ったフレームワークを採用するのも面白さがあります。もちろんカスタマイズのしやすさなども大事でしょう。そこで今回はBlackholeを紹介します。

Blackholeの使い方

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

ヘッダー。

ボタン。

インプット。

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

タブ。

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

ドロップダウン。

プロフィール入力。

ネストできるリスト。

メニュー。

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

アラート。

通知。

ボックス。

リボン。

ボックス+アイコン。

テーブル。

アイコン。

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

イメージ。

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

水平線。

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

垂直なタイムライン。

プライスリスト。

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

返信可能なコメント。

回転。

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

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

Blackhole - Minimalistic but powerful SASS / CSS Framework alinseba/blackhole