これまでとは異なるCSSフレームワークが登場! 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

これまでとは異なるCSSフレームワークが登場しました!
Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数(カスタムプロパティ)で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。

単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。

CSS変数を使用したCSSフレームワーク -Open Props

Open Props
Open Props -GitHub

Open Propsとは

Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数(カスタムプロパティ)ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実装でき、あらゆるプロジェクトに役立ちます。

MITライセンスで、商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

Open Props

Open Propsの使い方

使い方は簡単で、通常のCSSフレームワークと同様に外部ファイルとして使用するだけでなく、PostCSS、JSON、JavaScriptからも使用できます。

CSSの場合

当CSSファイルを外部ファイルとして記述します。

必要な機能だけを個別のCSSにパッケージされたものも用意されています。
index.cssを用意して、必要なCSSファイルを記述します。

JavaScriptの場合

index.jsを用意して、下記を記述します。

個別のCSSファイルは、下記の通りです。

サイトのキャプチャ

Overview

たとえば、colors.cssには、UI開発用に最適化されたオープンソースの配色であるOpen Colorが含まれています。

サイトのキャプチャ

Colors

gradients.cssには、オリジナルの30種類のグラデーションが含まれています。 線形グラデーションの方向は、ミックスインで簡単に変更できます。粒子の粗さLv1-5のノイズのグラデーションもお見逃しなく。

サイトのキャプチャ

Gradients

shadows.cssには、ライトモードとダークモードに対応する外側と内側のシャドウです。

サイトのキャプチャ

Shadows

media.cssには、CSS仕様の一歩先を行くOpen Propsは@custom-media構文を使用した名前付きメディアクエリを提供します。
※PostCSSプラグインでのみ利用可能。

サイトのキャプチャ

Media Queries

Open Propsのデモ

Open Propsのデモは、CodePenに公開されています。CSS変数なので、値を簡単に変更できます。

サイトのキャプチャ

Open Propsのデモ: HeroLayout

18個のユーティリティクラスとnormalize.cssで実装されたヒーローレイアウト

サイトのキャプチャ

Open Propsのデモ: Adaptive Cards

8個のユーティリティクラスとnormalize.cssで実装されたカードコンポーネント

サイトのキャプチャ

Open Propsのデモ: Adaptive Buttons

10個のユーティリティクラスで実装されたカードコンポーネント

サイトのキャプチャ

Normalize Preview

HTMLのすべての要素をOpen Propsでノーマライズした最小限のスタイル。

sponsors

top of page

©2022 coliss