UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。 今回はSirius UIというUIフレームワークを紹介します。多数のUIコンポーネントが提供されています。

Sirius UIの使い方

スクリーンショット多めで紹介します。まずはボタン、ラベル、バッジ、フォーム、アラートなど。

ナビゲーション、ドロップダウン、テーブル、ページネーションなどが提供されています。

ログインのモーダル実装例。

タブとイメージ、カルーセル。

トップページ風レイアウト。

機能一覧風。

フッター。

Sirius UIのベースはBootstrapとなっており、さらにFlexboxとVue.jsを組み合わせています。UIコンポーネントなどはどれも汎用的なデザインで、多くのWebサイトで利用できるでしょう。

Sirius UIはHTML5/JavaScript製のオープンソース・ソフトウェア(LGPL)です。

Sirius UI - Complete UI for Laravel applications macmotp/sirius: Sirius UI - Flexible CSS Framework based on Flexbox and VueJs.