これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
Post on:2022年4月5日
sponsors
これまでとは異なるCSSフレームワークが登場しました！
Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。
単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。
Open Propsとは
Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実装でき、あらゆるプロジェクトに役立ちます。
MITライセンスで、商用プロジェクトでも無料で利用できます。
Open Propsの使い方
使い方は簡単で、通常のCSSフレームワークと同様に外部ファイルとして使用するだけでなく、PostCSS、JSON、JavaScriptからも使用できます。
CSSの場合
当CSSファイルを外部ファイルとして記述します。
|
1 2 |
<link rel="stylesheet" href="https://unpkg.com/open-props"/> <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/> |
必要な機能だけを個別のCSSにパッケージされたものも用意されています。
index.cssを用意して、必要なCSSファイルを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
@import "https://unpkg.com/open-props/colors.min.css"; @import "https://unpkg.com/open-props/colors-hsl.min.css"; @import "https://unpkg.com/open-props/indigo.min.css"; @import "https://unpkg.com/open-props/indigo-hsl.min.css"; @import "https://unpkg.com/open-props/easings.min.css"; @import "https://unpkg.com/open-props/animations.min.css"; @import "https://unpkg.com/open-props/sizes.min.css"; @import "https://unpkg.com/open-props/gradients.min.css"; |
JavaScriptの場合
index.jsを用意して、下記を記述します。
|
1 2 |
import 'https://unpkg.com/open-props'; import 'https://unpkg.com/open-props/normalize.min.css'; |
個別のCSSファイルは、下記の通りです。
たとえば、colors.cssには、UI開発用に最適化されたオープンソースの配色であるOpen Colorが含まれています。
gradients.cssには、オリジナルの30種類のグラデーションが含まれています。 線形グラデーションの方向は、ミックスインで簡単に変更できます。粒子の粗さLv1-5のノイズのグラデーションもお見逃しなく。
shadows.cssには、ライトモードとダークモードに対応する外側と内側のシャドウです。
media.cssには、CSS仕様の一歩先を行くOpen Propsは@custom-media構文を使用した名前付きメディアクエリを提供します。
※PostCSSプラグインでのみ利用可能。
Open Propsのデモ
Open Propsのデモは、CodePenに公開されています。CSS変数なので、値を簡単に変更できます。
18個のユーティリティクラスとnormalize.cssで実装されたヒーローレイアウト
8個のユーティリティクラスとnormalize.cssで実装されたカードコンポーネント
Open Propsのデモ: Adaptive Buttons
10個のユーティリティクラスで実装されたカードコンポーネント
HTMLのすべての要素をOpen Propsでノーマライズした最小限のスタイル。
sponsors
