HTMLを愛する人のためのUIライブラリ、シンプルなHTMLでさまざまなレイアウトやUIコンポーネントを実装 -Kelp

シンプルなHTMLとモダンCSSを使用して、レイアウトやUIコンポーネントを実装するHTMLを愛する人のためのUIライブラリを紹介します。

手軽に実装できるように、classレスのHTMLにユーティリティとコンポーネント用のclassを組み合わせており、ブラウザネイティブのコンポーネントを使用して段階的にUIを強化します。

Kelp
Kelp -GitHub

• Kelpとは
• Kelpのデモ
• Kelpの使い方

Kelpとは

KelpはモダンCSSとWebコンポーネントを搭載した、HTMLを愛する人のためのUIライブラリです。簡単にカスタマイズができ、ビルドなどは不要です。

Kelp

Kelpの主な特徴は、下記の通り。

• 軽量のCSS

  classレスのHTMLとセマンティックユーティリティおよびコンポーネント用のCSSを組み合わせています。

• Webコンポーネント

  ブラウザネイティブのWebコンポーネントでUIを段階的に拡張しています。

• ビルドステップは不要

  CSS変数、カスケードレイヤー、HTML属性で自由にカスタマイズできます。

ライセンスはFair-codeで、オープンソースに似ていますが実用的になっています。個人や社内または非営利プロジェクトで無料で利用できます。収益が目的の場合はプロライセンスが必要となります。詳しくはライセンスページをご覧ください。

Kelpのデモ

Kelpでどんな感じに実装できるかは、デモページをご覧ください。

デモページ

デモは、CodePenで公開されています。

See the Pen
Kelp Demo by coliss (@coliss)
on CodePen.

Kelpの使い方

Kelpは、ビルドの手順なしで動作します。
CSSの外部ファイルをHTMLに記述するだけでOKです。

CDNはもっとも速く簡単な方法ですが、kelp.cssをGitHubからダウンロードして使用することもできます。

Kelp はセマンティックバージョニングを採用しています。CDNから@1.2.3という構文でメジャーバージョン、マイナーバージョン、パッチバージョンを取得できます。利用可能なバージョンはGitHubで確認できます。

基本となるHTMLは、下記の通りです。
いたってシンプルなHTMLです。

Kelpの詳しい実装方法は、ドキュメントが用意されています。

Docs -Kelp

たとえばレイアウトのコンテナでは、.container-*クラスはコンテンツをページの中央に配置し、最大幅にします。いずれも幅は86vwで、自然なパディングが確保されています。-xs, -s, -m, -l, -xl, -2xlで最大幅を変更できます。

Containers

コンポーネントも豊富に用意されています。
タブをはじめ、アバター、バッジ、ダイアログ、見出しアンカー、モーダル、スケルトン、オフキャンバスのドロワーなど、コピペで実装できます。

Tabs

便利なユーティリティも豊富です。
.align-*クラスはCSS GridまたはFlexboxで使用でき、align-itemsプロパティを追加あるいは変更できます。ほかにもあらゆる要素の背景色を満たす.fill、リストのliなど子要素間に区切り線を与える.dividedなど、実用的なものばかりです。

Align Items