Bounce vertical

scss

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

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.bounce-vertical(4px, .5s);
  }
}

Shake vertical

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.shake-vertical();
  }
}

Vibrate vertical

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.vibrate-vertical();
  }
}

Bounce horizontal

scss

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

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.bounce-horizontal(4px, .5s);
  }
}

Shake horizontal

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.shake-horizontal();
  }
}

Vibrate horizontal

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.vibrate-horizontal();
  }
}

Bounce scale

scss

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

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.bounce-scale(1.2, .5s);
  }
}

Shake scale

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.shake-scale();
  }
}

Vibrate scale

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.vibrate-scale();
  }
}

Extend the underline from the center.

• This mixin use the pseudo-elements.

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo a {
  @include core.hover() {
    &::after {
      @include core.extend-underline();
    }
  }
}

Background image cover + centering

scss

@use "node_modules/sass-basis/src/css/core";

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

Background image fixed

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.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
//

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.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
//

@use "node_modules/sass-basis/src/css/core";

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

Clearfix helper

scss

@use "node_modules/sass-basis/src/css/core";

.clerfix {
  @include core.clearfix();
}

html

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

Sets Child elements margin

scss

//
// @param  int  $level
//

@use "node_modules/sass-basis/src/css/core";

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

html

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

Sets Child elements margin

scss

//
// @param  int  $level
//

@use "node_modules/sass-basis/src/css/core";

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

html

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

Hover event helper

scss

@use "node_modules/sass-basis/src/css/core";

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

Sets padding for form controls

scss

@use "node_modules/sass-basis/src/css/core";

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

Sets border for form controls

scss

@use "node_modules/sass-basis/src/css/core";

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

Ghost button helper

scss

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

@use "node_modules/sass-basis/src/css/core";

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

html

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

Unstyled list

scss

@use "node_modules/sass-basis/src/css/core";

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

Inline list

scss

@use "node_modules/sass-basis/src/css/core";

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

min-width media query

scss

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

@use "node_modules/sass-basis/src/css/core";

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

max-width media query

scss

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

@use "node_modules/sass-basis/src/css/core";

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

Specific size only media query

scss

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

@use "node_modules/sass-basis/src/css/core";

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

Overlay helper

scss

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

@use "node_modules/sass-basis/src/css/core";

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

Create circle object

scss

//
// @param  length  $size
//

@use "node_modules/sass-basis/src/css/core";

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

Creating square

scss

//
// @param  length  $size
//

@use "node_modules/sass-basis/src/css/core";

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

Generate top triangle style

scss

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

@use "node_modules/sass-basis/src/css/core";

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

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

@use "node_modules/sass-basis/src/css/core";

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

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

@use "node_modules/sass-basis/src/css/core";

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

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

@use "node_modules/sass-basis/src/css/core";

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

Transition helper

scss

//
// @param  string  $property
//

@use "node_modules/sass-basis/src/css/core";

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

  @include core.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.
//

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.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.
//

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.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

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hidden();

  @include core.media-min(md) {
      @include core.visible();
  }
}

Visible helper

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

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hidden();

  @include core.media-min(md) {
      @include core.visible();
  }
}

Invisible helper

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.invisible();
}