Style Guide - @hidoo/unit (v0.9.0)

builtin modifiers of hidden

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of box-model

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999; padding: 25px; border: 25px solid #ccc;"></div>
</div>

builtin modifiers of width. (0 to 150px in 25px steps, 200px to 450px in 50px steps, 500px to 1000px in 100px steps)

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of height. (0 to 150px in 25px steps, 200px to 450px in 50px steps, 500px to 1000px in 100px steps)

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of margin. (-60px to 60px in 5px steps)

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of padding. (0 to 60px in 5px steps)

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of border

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of position. (-60px to 60px in 5px steps)

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of z-index. (0 to 50 in 5 steps)

1

49

1

49

1

49

1

49

<div style="position:relative; padding:50px;">
  <div style="position:absolute; width:50px; height:50px; top:50%; left:50%; margin:-50px 0 0 -50px; line-height:50px; color:#fff; background:#ccc; text-align:center; z-index:1;">1</div>
  <div class="{{modifier_class}}" style="position:absolute; width:50px; height:50px; line-height:50px; top:50%; left:50%; margin:-25px 0 0 -25px; background:#999;"></div>
  <div style="position:absolute; width:50px; height:50px; line-height:50px; top:50%; left:50%; margin:0; color:#fff; background:#666; text-align:center; z-index:49">49</div>
</div>

builtin modifiers of float

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div style="position:relative; padding:50px;">
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
  <p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

builtin modifiers of clear

<div style="position:relative; padding:50px;">
  <div class="util--float-left" style="position:relative; width:50px; height:50px; background:#ccc;"></div>
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
  <div class="util--float-right" style="position:relative; width:50px; height:50px; background:#ccc;"></div>
  <div class="{{modifier_class}}" style="position:relative; width:50px; height:50px; background:#999;"></div>
</div>

builtin modifiers of vertical-align

<div style="display:table;">
  <div class="{{modifier_class}}" style="display:table-cell; height:100px; font-size:0;">
    <div style="display:inline-block; position:relative; width:50px; height:50px; background:#999;"></div>
  </div>
</div>

builtin modifiers of font-family

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

<!-- laten -->
<p class="unit-text  {{modifier_class}}">Lorem ipsum dolor sit amet, <b class="unit-text  unit-text--inline-true  unit-text--weight-bold">consectetur adipiscing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- japanese -->
<p class="unit-text  {{modifier_class}}">あのイーハトーヴォのすきとおった風、<b class="unit-text  unit-text--inline-true  unit-text--weight-bold">夏でも底に冷たさをもつ青いそら</b>、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>

builtin modifiers of font-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="unit-text  {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

@hidoo/unit

util

hidden

modifiers: hidden

box-model

modifiers: box-model

width

modifiers: width

height

modifiers: height

margin

modifiers: margin

padding

modifiers: padding

border

modifiers: border

position

modifiers: position

z-index

modifiers: z-index

float

modifiers: float

clear

modifiers: clear

vertical-align

modifiers: vertical-align

font-family

modifiers: font-family

font-size

modifiers: font-size