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

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

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

サイトのキャプチャサイトのキャプチャ

fractures
fractures -GitHub

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だけ、でも利用できます。

sponsors

top of page

©2018 coliss