[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures

float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositionのスタイルなど、CSSでページを実装する際にユーティリティとして活躍するスタイルがまとめられたスタイルシートを紹介します。

自分で作成したCSSを「美」調整したい時に、BootstrapやFoundationやBulmaなど人気のフレームワークにも利用できます。

fractures
fractures -GitHub

• fracturesの特徴
• fracturesのデモ
• fracturesの使い方

fracturesの特徴

fracturesはWebページのUIを実装する複雑さをシンプルにし、生産性を向上させる非常に軽量なスタイルシートです。

fractures

• あらゆるフレームワークで利用できます。
• UIには干渉しません。
• アトミック デザイン対応。
• 小さな要素をはじめ、コンポーネント、レイアウト、何でもOK。
• 軽量で素早く、ロードの負荷は最小限。

fracturesのデモ

fracturesではWebページを実装する際に役立つユーティリティがまとめられています。

Borderは矩形から、角丸、楕円、円形まで。
Colorはモノクロのカラースキームで、ホワイトから、グレー、ブラックまで。

Displayはレイアウトで使用するプロパティがまとめられています。
Flexはflexboxでよく使用する指定方法が簡単に利用できます。

Heightでは高さ0から、minvhまで。
Listはulとolで利用できるコンマのスタイルがまとめられています。

Marginは上書きが可能なボックスサイズに基づくマージン指定です。

Opacityでは不透明度が段階的に用意されています。
Paddingではマージンと同様に、上書きが可能なボックスサイズに基づく指定です。

Positionはポジションに関するプロパティで、stickyやz-indexも。
Widthでは幅のオプションで、幅0からminvwまで用意されています。

fracturesの使い方

当スタイルシートを外部ファイルに指定するだけです。

CSSは、marginだけ、borderだけ、でも利用できます。