Bounce vertical

scss

//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-vertical(4px, .5s);
  }
}

Shake vertical

scss

.c-foo {
  @include _hover() {
    @include _shake-vertical();
  }
}

Vibrate vertical

scss

.c-foo {
  @include _hover() {
    @include _vibrate-vertical();
  }
}

Bounce horizontal

scss

//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-horizontal(4px, .5s);
  }
}

Shake horizontal

scss

.c-foo {
  @include _hover() {
    @include _shake-horizontal();
  }
}

Vibrate horizontal

scss

.c-foo {
  @include _hover() {
    @include _vibrate-horizontal();
  }
}

Bounce scale

scss

//
// @param   float              $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-scale(1.2, .5s);
  }
}

Shake scale

scss

.c-foo {
  @include _hover() {
    @include _shake-scale();
  }
}

Vibrate scale

scss

.c-foo {
  @include _hover() {
    @include _vibrate-scale();
  }
}

Extend the underline from the center.

• This mixin use the pseudo-elements.

scss

.c-foo a {
  @include _hover() {
    &::after {
      @include _extend-underline();
    }
  }
}

Background image cover + centering

scss

.c-foo {
  @include _background-image-cover();
  background-image: url(...);
}

Background image fixed

scss

.c-foo {
  @include _background-image-fixed();
  background-image: url(...);
}

Generate balloon triangle

scss

//
// @param  string  $position
// @param  length  $size              triangle size
// @param  hex     $background-color
// @param  length  $border-size
// @param  hex     $border-color
//

.c-foo {
  @include _balloon-triangle(top, 10px, #fff, 1px, #ccc);
  position: relative;
  background-color: #fff;
  border: 1px solid #ccc;
}

Generate balloon

scss

//
// @param  string  $angle   position of arrow
// @param  hash    $params  properties for decoration
//

.c-foo {
  @include _balloon(top, (
    background-color: #fff,
    border-color: #ccc,
    border-size: 1px,
    triangle-size: 10px,
  ));
}

Clearfix helper

scss

.clerfix {
  @include _clearfix();
}

html

<div class="clearfix">
  <img style="float: right">
  ....
</div>

Sets Child elements margin

scss

//
// @param  int  $level
//

.u-between-content {
  @include _set-between-content-level(1);
}

html

<div class="u-between-content">
  ...
</div>

Sets Child elements margin

scss

//
// @param  int  $level
//

.u-content {
  @include _set-content-level(1);
}

html

<div class="u-content">
  ...
</div>

Sets Child elements margin

scss

//
// @param  int  $coefficient
//

.u-between-content {
  @include _between-content(1);
}

html

<div class="u-between-content">
  ...
</div>

Sets Child elements margin

scss

//
// @param  int  $coefficient
//

.u-content {
  @include _content(1);
}

html

<div class="u-content">
  ...
</div>

Sets margin-top

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _margin-top(1);
@include _margin-top(10px);
@include _margin-top(1, false);

Sets margin-right

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _margin-right(1);
@include _margin-right(10px);
@include _margin-right(1, false);

Sets margin-bottom

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _margin-bottom(1);
@include _margin-bottom(10px);
@include _margin-bottom(1, false);

Sets margin-left

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _margin-left(1);
@include _margin-left(10px);
@include _margin-left(1, false);

Sets margin

scss

//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
// @param  boolean  $apply-margin-scale
//

@include _margin(1);
@include _margin(1, 2);
@include _margin(1, 2, .5);
@include _margin(1, 2, .5, 2);
@include _margin(10px);
@include _margin(1, null, null, null, false);

Sets padding-top

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _padding-top(1);
@include _padding-top(10px);
@include _padding-top(1, true);

Sets padding-right

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _padding-right(1);
@include _padding-right(10px);
@include _padding-right(1, true);

Sets padding-bottom

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _padding-bottom(1);
@include _padding-bottom(10px);
@include _padding-bottom(1, true);

Sets padding-left

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@include _padding-left(1);
@include _padding-left(10px);
@include _padding-left(1, true);

Sets padding

scss

//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
// @param  boolean  $apply-margin-scale
//

@include _padding(1);
@include _padding(1, 2);
@include _padding(1, 2, .5);
@include _padding(1, 2, .5, 2);
@include _padding(10px);
@include _padding(1, null, null, null, true);

The position shorthand

scss

//
// @param  string  $position
// @param  length  $top
// @param  length  $right
// @param  length  $bottom
// @param  length  $left
// @param  int     $z-index
//

@include _position(absolute, 10px, null, null, 10px, 1);

Sets top

scss

//
// @param  int  $coefficient
//

@include _top(1);
@include _top(10px);

Sets right

scss

//
// @param  int  $coefficient
//

@include _right(1);
@include _right(10px);

Sets bottom

scss

//
// @param  int  $coefficient
//

@include _bottom(1);
@include _bottom(10px);

Sets left

scss

//
// @param  int  $coefficient
//

@include _left(1);
@include _left(10px);

Sets rem font-size

scss

//
// @param  int  $scale-or-font-size  Font size scaling factor.
//

.c-foo {
  @include _font-size(12px);
}

Sets line-height for vertical rhythum

scss

//
// @param  int  $scale-or-font-size  Font size scaling factor.
//

.c-foo {
  @include _line-height(12px);
}

Sets rem font-size and line-height for vertical rhythum.

scss

//
// @param  int  $font-size
//

.c-foo {
  @include _font-size-line-height(2);
}

html

<h3>English</h3>

<p class="font-size-10px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-12px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-14px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-16px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-24px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-30px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-34px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-38px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-42px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-46px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-50px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-100px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-200px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<h3>Japanese</h3>

<p class="font-size-10px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-12px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-14px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-16px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-20px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-24px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-30px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-34px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-38px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-42px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-46px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-50px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-100px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-200px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

Hover event helper

scss

img {
  @include _hover() {
    opacity: .8;
  }
}

Sets padding for form controls

scss

input[type="text"],
select {
  @include _form-control-base-padding();
}

Sets border for form controls

scss

input[type="text"],
select {
  @include _form-control-base-border();
}

Ghost button helper

scss

//
// @param  hash  $params
//   border-size  length
//   color        hex
//

.c-ghost-btn {
  @include _btn();
  @include _ghost((
    border-size: 1px,
    color: #fff,
  ));
  padding: var(--_padding1) var(--_padding2);
}

html

<a class="c-ghost-btn" role="button">btn</a>

Unstyled list

scss

ul.u-unstyled-list {
  @include _list-unstyled();
}

Inline list

scss

ul.u-inline-list {
  @include _list-inline();
}

min-width media query

scss

//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-min(md) {
    ...
  }
}

max-width media query

scss

//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-max(md) {
    ...
  }
}

Specific size only media query

scss

//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-only(md) {
    ...
  }
}

Overlay helper

scss

//
// @param  hex  $hex
// @param  int  $opacity
//

.c-foo {
  @include _overlay(#fff, .5);
}

Create circle object

scss

//
// @param  length  $size
//

.c-foo {
  @include _circle(30px);
}

Creating square

scss

//
// @param  length  $size
// @param  length  $border-radius
//

.c-foo {
  @include _square(30px);
}

Generate top triangle style

scss

//
// @param  length  $width
// @param  length  $height
// @param  hex     $colors
//

.c-triangle-top {
  @include _triangle-top(10px, 10px, #000);
}

//
// Generate right triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $colors
//

.c-triangle-right {
  _triangle-right(10px, 10px, #000);
}

//
// Generate bottom triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $colors
//

.c-triangle-bottom {
  @include _triangle-bottom(10px, 10px, #000);
}

//
// Generate left triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $colors
//

.c-triangle-left {
  @include _triangle-left(10px, 10px, #000);
}

Transition helper

scss

//
// @param  string  $property
//

a {
  @include _transition(color, font-size);
  color: #f00;
  font-size: 12px;

  @include _hover() {
    color: #f9c;
    font-size: 14px;
  }
}

Sets font-size and line-height.

scss

//
// @param  int  $level  Font size level. Min -2, Max var(--_harmonic-sequence-base) - 1.
//

.c-foo {
  @include _set-font-size-level(1);
}

html

<h3>English</h3>

<p class="font-size-level:-2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:-1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:0">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:5">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:6">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="font-size-level:7">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<h3>Japanese</h3>

<p class="font-size-level:-2">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:-1">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:0">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:1">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:2">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:3">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:4">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:5">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:6">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="font-size-level:7">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

Sets fluid font-size and line-height.

scss

//
// @param  int  $level  Font size level. Min -2, Max var(--_harmonic-sequence-base) - 1.
//

.c-foo {
  @include _set-fluid-font-size-level(1);
}

html

<h3>English</h3>

<p class="fluid-font-size-level:-2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:-1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:0">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:5">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:6">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<p class="fluid-font-size-level:7">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
</p>

<h3>Japanese</h3>

<p class="fluid-font-size-level:-2">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:-1">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:0">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:1">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:2">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:3">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:4">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:5">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:6">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

<p class="fluid-font-size-level:7">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
</p>

Hidden helper

• This helper set "position" property.
• We recomment to use this helper on elements with no position specified.

scss

.c-foo {
  @include _hidden();

  @include _media-min(md) {
      @include _visible();
  }
}

Visible helper

• This helper set "position" property.
• We recomment to use this helper on elements with no position specified.

scss

.c-foo {
  @include _hidden();

  @include _media-min(md) {
      @include _visible();
  }
}

Invisible helper

scss

.c-foo {
  @include _invisible();
}