@hidoo/unit

v0.9.0

Sass based css framework.

component for button.

5.1

core module of unit-button

default style of unit-button

default
Lorem ipsum dolor sit amet.
<!-- link element -->
<a class="unit-button" href="javascript:;">
  <span class="unit-button__label  unit-text">Lorem ipsum dolor sit amet.</span>
</a>
<!-- button element -->
<button class="unit-button">
  <span class="unit-button__label  unit-text">Lorem ipsum dolor sit amet.</span>
</button>

5.2

theme modifiers of unit-button

builtin modifiers of theme for unit-button

default
Lorem ipsum dolor sit amet.
unit-button--theme-light
light theme
Lorem ipsum dolor sit amet.
unit-button--theme-dark
dark theme
Lorem ipsum dolor sit amet.
<!-- link element -->
<a class="unit-button  {{modifier_class}}" href="javascript:;">
  <span class="unit-button__label  unit-text">Lorem ipsum dolor sit amet.</span>
</a>
<!-- button element -->
<button class="unit-button  {{modifier_class}}">
  <span class="unit-button__label  unit-text">Lorem ipsum dolor sit amet.</span>
</button>

5.3

inline modifiers of unit-button

builtin modifiers of inline for unit-button

default
Lorem ipsum dolor sit amet.
unit-button--inline-false
disable inline (default)
Lorem ipsum dolor sit amet.
unit-button--inline-true
enable inline
Lorem ipsum dolor sit amet.
<!-- link element -->
<a class="unit-button  unit-button--theme-light  {{modifier_class}}" href="javascript:;">
  <span class="unit-button__label  unit-text">Lorem ipsum dolor sit amet.</span>
</a>
<!-- button element -->
<button class="unit-button  unit-button--theme-dark  {{modifier_class}}">
  <span class="unit-button__label  unit-text">Lorem ipsum dolor sit amet.</span>
</button>