@hidoo/styleunit

v1.0.0-alpha.9

The unit oriented CSS framework implemented in Sass.

14 util

The utility modules.

14.1 Hidden

The hidden module.

14.1.1 Modifiers

The hidden modifiers.

  • The breakpoint prefixes can be specified like as sm:util--hidden.
default
util--hidden
Hidden element.
<div class="hidden-example {{modifier_class}}"></div>
<style>
  :where(.hidden-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

14.2 Box sizing

The box sizing module.

14.2.1 Modifiers

The box sizing modifiers.

  • The breakpoint prefixes can be specified like as sm:util--box-sizing-border-box.
default
util--box-sizing-border-box
Set border box
util--box-sizing-content-box
Set content box
<div class="box-sizing-example {{modifier_class}}"></div>
<style>
  :where(.box-sizing-example) {
    position: relative;
    width: 50px;
    height: 50px;
    padding: 25px;
    background: #999;
    border: 25px solid #ccc;
  }
</style>

14.3 Width

The width module.

14.3.1 Modifiers

The width modifiers.

  • You can specify min or max option like as util--width-max-1000.
  • The breakpoint prefixes can be specified like as util--width-1000.
default
util--width-0
0px width.
util--width-1000
1000px width.
util--width-normal
Normal width.
util--width-fit
100% width.
util--width-auto
Auto width.
util--width-min-none
None min width.
util--width-max-none
None max width.
<div class="width-example {{modifier_class}}"></div>
<style>
  :where(.width-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
    transition: width 0.2s ease-in-out;
  }
</style>

14.4 Height

The height module.

14.4.1 Modifiers

The height modifiers.

  • You can specify min or max option like as util--height-max-1000.
  • The breakpoint prefixes can be specified like as sm:util--height-1000.
default
util--height-0
0px height
util--height-1000
1000px height
util--height-normal
Normal height
util--height-fit
100% height
util--height-auto
auto height
util--height-min-none
None min height.
util--height-max-none
None max height.
<div class="height-example {{modifier_class}}"></div>
<style>
  :where(.height-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
    transition: height 0.2s ease-in-out;
  }
</style>

14.5 Margin

The margin module.

14.5.1 Modifiers

The margin modifiers.

  • The direction can be specified like as util--margin-top-50. (Direction: "", "top", "right", "bottom", "left", "block", "inline")
  • The breakpoint prefixes can be specified like as sm:util--margin-50.
default
util--margin-0
All 0px margin.
util--margin-_50
All -50px margin.
util--margin-50
All 50px margin.
util--margin-normal
All normal margin.
<div class="margin-example {{modifier_class}}"></div>
<style>
  :where(.margin-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

14.6 Padding

The padding module.

14.6.1 Modifiers

The padding modifiers.

  • The direction can be specified like as util--padding-top-50. (Direction: "", "top", "right", "bottom", "left", "block", "inline")
  • The breakpoint prefixes can be specified like as sm:util--padding-50.
default
util--padding-0
All 0px padding.
util--padding-50
All 50px padding.
util--padding-normal
All normal padding.
<div class="padding-example {{modifier_class}}"></div>
<style>
  :where(.padding-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

14.7 Border

The border module.

14.7.1 Modifiers

The border modifiers.

  • The direction can be specified like as util--border-top-normal. (Direction: "", "top", "right", "bottom", "left", "block", "inline")
  • The breakpoint prefixes can be specified like as sm:util--border-normal.
default
util--border-normal
All normal border
<div class="border-example {{modifier_class}}"></div>
<style>
  :where(.border-example) {
    position: relative;
    width: 50px;
    height: 50px;
    color: #900;
    background: #999;
  }
</style>

14.8 Position

The position module.

14.8.1 Modifiers

The position modifiers.

  • The direction can be specified like as util--position-top-50. (Direction: "", "top", "right", "bottom", "left", "block", "inline")
  • The breakpoint prefixes can be specified like as sm:util--position-50.
default
util--position-0
All 0px position.
util--position-_50
All -50px position.
util--position-50
All 50px position.
util--position-normal
All normal position.
<div class="padding-example {{modifier_class}}"></div>
<style>
  :where(.padding-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

14.9 Z index

The z-index module.

14.9.1 Modifiers

The z-index modifiers.

  • The breakpoint prefixes can be specified like as sm:util--z-index-50.
default
1
49
util--z-index-0
0 z-index
1
49
util--z-index-50
50 z-index
1
49
util--z-index-normal
Normal z-index
1
49
<div class="z-index-example-wrapper">
  <div class="z-index-example-1">1</div>
  <div class="z-index-example {{modifier_class}}"></div>
  <div class="z-index-example-49">49</div>
</div>
<style>
  :where(.z-index-example-wrapper) {
    position: relative;
    width: 75px;
    height: 75px;
  }
  :where(.z-index-example) {
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    background: #999;
    z-index: 2;
  }
  :where(.z-index-example-1) {
    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;
  }
  :where(.z-index-example-49) {
    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;
  }
</style>

14.10 Float

The float module.

14.10.1 Modifiers

The float modifiers .

  • The breakpoint prefixes can be specified like as sm:util--float-left.
default

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

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

util--float-left
Float to left side

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

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

util--float-right
Float to right side

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

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

util--float-none
Disable floating

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

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

<div class="float-example {{modifier_class}}"></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>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<style>
  :where(.float-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
    transition: width 0.2s ease-in-out;
  }
</style>

14.11 Clear

The clear module.

14.11.1 Modifiers

The clear modifiers .

  • The breakpoint prefixes can be specified like as sm:util--clear-left.
default

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

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

util--clear-left
Clear left side floating

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

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

util--clear-right
Clear right side floating

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

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

util--clear-both
Clear both floating

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

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

<div class="clear-example  util--float-left"></div>
<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>
<div class="clear-example  util--float-right"></div>
<p class="unit-text  {{modifier_class}}">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<style>
  :where(.clear-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

14.12 Vertical align

The vertical-align module.

14.12.1 Modifiers

The vertical-align modifiers.

  • The breakpoint prefixes can be specified like as sm:util--vertical-align-top.
default
util--vertical-align-top
Set top
util--vertical-align-middle
Set middle
util--vertical-align-baseline
Set baseline
util--vertical-align-bottom
Set bottom
<div class="valign-example-wrapper  {{modifier_class}}">
  <div class="valign-example"></div>
</div>
<style>
  :where(.valign-example-wrapper) {
    display:table-cell;
     height:100px;
  }
  :where(.valign-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

14.13 Font family

The font-family module.

14.13.1 Modifiers

The font-family modifiers .

  • The breakpoint prefixes can be specified like as sm:util--font-family-default.
default

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

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

util--font-family-sans-serif
Sans-serif.

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

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

util--font-family-monospace
Monospace.

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, <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>
<p class="unit-text  {{modifier_class}}">あのイーハトーヴォのすきとおった風、<b class="unit-text  unit-text--inline-true  unit-text--weight-bold">夏でも底に冷たさをもつ青いそら</b>、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>

14.14 Font size

The font-size module.

14.14.1 Modifiers

The font-size modifiers .

  • The breakpoint prefixes can be specified like as sm:util--font-size-xsmall.
default

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

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

util--font-size-xsmall
Extra small font size.

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

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

util--font-size-small
Small font size.

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

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

util--font-size-medium
Medium font size.

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

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

util--font-size-large
Large font size.

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

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

util--font-size-xlarge
Extra large font size.

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

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

util--font-size-2xlarge
2 extra large font size.

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

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

util--font-size-3xlarge
3 extra large font size.

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

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

util--font-size-4xlarge
4 extra large 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>
<p class="unit-text  {{modifier_class}}">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>

14.15 Font weight

The font-weight module.

14.15.1 Modifiers

The font-weight modifiers .

  • The breakpoint prefixes can be specified like as sm:util--font-weight-medium.
default

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

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

util--font-weight-thin
Thin font weight.

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

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

util--font-weight-extra-light
Extra light font weight.

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

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

util--font-weight-light
Light font weight.

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

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

util--font-weight-regular
Regular font weight.

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

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

util--font-weight-medium
Medium font weight.

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

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

util--font-weight-semi-bold
Semi bold font weight.

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

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

util--font-weight-bold
Bold font weight.

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

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

util--font-weight-extra-bold
Extra bold font weight.

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

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

util--font-weight-black
Black font weight.

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>
<p class="unit-text  {{modifier_class}}">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>