WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。 今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん、UIコンポーネントも多数揃ったフレームワークになっています。

natUIveの使い方

スクリーンショット多めで紹介します。まずはグリッド。

タイポグラフィ。

メニューなどに使えるナビゲーション。

スライダー。

タブ。

クリックで画像を拡大表示するLightbox風UI。

こんな感じにウィンドウ全体に表示されます。

ビデオ。

テーブル。ソートもできます。

アコーディオン。

ツールチップ。

モーダル。

ボタン。

リスト。

フォーム。

カード。

背景を写真にするUI。

言語選択。

通知。

クリップボードコピー。

natUIveでは他にも細かいUIコンポーネントが揃っています。最近のWebサイトでは静的に表示するだけでなく、クリックやキーボード操作によるダイナミックなUI反映も求められます。natUIveを使えばそういったJavaScript部分の実装工数が大幅に軽減されます。

natUIveはCSS/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

natUIve radogado/natuive: 10+10 KB feature-rich front-end framework