style="height: 50px"とかつい直書きしたくなるシーンに有効なcssライブラリー作ったので共有

CSSライブラリ作りました

Htmlのレイアウトを作成する時, paddingやwidthなどのpxを細かく指定したい時に以下のように記述したいと思いました。

<p class="p-45px height-100px max-width-300px"></p>

なので、そういう記述ができるライブラリを作りました。
https://github.com/programmerkgit/dot-style

これで名前空間を汚さず、styleへの直書きもせずにアトミックなクラスの組み合わせでスタイルを記述できるようになります。

z-index, height, width, min-max height, width, padding, margin, position(top, left, bottom, right)などに対応しています。

以下、使用例です　(拙い英語で書いたReadmeそのまま載せます。)

Usage

Box Spacing

You can style padding, margin.

You can choose number from between 0 to 500, incremented step by 2.

Padding

<p class="pt-30px"></p>
<p class="pr-30px"></p>
<p class="pb-30px"></p>
<p class="pl-30px"></p>
<p class="px-30px"></p>
<p class="py-30px"></p>
<p class="p-30px"></p>

Margin

<p class="mt-30px"></p>
<p class="mr-30px"></p>
<p class="mb-30px"></p>
<p class="ml-30px"></p>
<p class="mx-30px"></p>
<p class="my-30px"></p>
<p class="m-30px"></p>

Dimension

You can set width, max-width, min-width, height, max-height, min-height

<p class="width-30px"></p>
<p class="max-width-30px"></p>
<p class="min-wdith-30px"></p>
<p class="height-30px"></p>
<p class="max-height-30px"></p>
<p class="min-height-30px"></p>

You can choose number from between 0 to 1000, incremented step by 5.

Line height

You can set lien-height

<p class="line-height-30px"></p>

You can choose number from between 0 to 100, incremented by step 2.

Positioning

You can set top, right, bottom, left.

You can choose number from between 0 to 1000, incremented by step 5.

<p class="t-30px"></p>
<p class="r-35px"></p>
<p class="b-40px"></p>
<p class="l-45px"></p>
<p class="x-50px"></p>
<p class="y-55px"></p>

z-index

You can set z-index.

you can choose number from between 1-50 and from between 2000-2050.

<p class="z-index-1"></p>
<p class="z-index-2"></p>
<p class="z-index-2000"></p>
<p class="z-index-2001"></p>

Golden ratio of font-size, line-height and margins

Font size and line height and text block margin has a golden ratio.

You can set golden ratio by specifying fontsize.

<p class="gr-16px"></p> => font-size is set 16px, and correspoinding line-height, margin-top, margin-bottom are set. 

追加開発してきます

以下の点を満たすようなライブラリーにしようと考えています。

1. 主要なPropertyを全てclassで指定できる。
   class="p-30px flex-grow-3 pointer-cursor" などのように、classでほぼ全てのプロパティーを指定できるようにします。これによってついつい style="" の直書きをしたくなるようなシーンを無くします。

2. component指向ではなくアトミックな機能群の提供。
   CSSライブラリの多くが提供しているcomponentを使用すると素早くレイアウトができる代わりに、望まぬデフォルトのOutlineや色などが付与されてしまいます。
   なので、class名を見るとどのプロパティーがどう内部で変化するかがすぐにわかるような機能群を作っていきます。