Basis Styleguide

_ib-row()

/src/css/core/abstract/_deprecated.scss

Abstract row component of inline-block based grid system

scss

.c-ib-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();

    &--1-3 {
      @include _ib-row__col(1, 3);
    }

    &--offset-1-3 {
      @include _ib-row__col--offset(1, 3);
    }
  }
}

html

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.

<div class="c-ib-row">
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

_ib-row__col()

/src/css/core/abstract/_deprecated.scss

Abstract column element of inline-block based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-ib-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();

    &--1-3 {
      @include _ib-row__col(1, 3);
    }
  }
}

html

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.

<div class="c-ib-row">
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

_ib-row__col--width()

/src/css/core/abstract/_deprecated.scss

Sets column width of inline-block based grid system

scss

//
// @param  length  $width
//

.c-ib-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();
    @include _ib-row__col--width(auto);
  }
}

_ib-row__col--offset()

/src/css/core/abstract/_deprecated.scss

Sets column offset of inline-block based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-ib-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();
    @include _ib-row__col--offset(1, 3);
  }
}

_ib-row--margin()

/src/css/core/abstract/_deprecated.scss

Sets row margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

.c-ib-row {
  @include _ib-row();
  @include _ib-row--margin(1);
}

_ib-row__col--margin()

/src/css/core/abstract/_deprecated.scss

Sets column margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

.c-ib-row {
  @include _ib-row();
  @include _ib-row--margin(1);
}

_row__col()

/src/css/core/abstract/_deprecated.scss

Abstract column element of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();

    &--1-3 {
      @include _row__col(1, 3);
    }
  }
}

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>

_row__col--width()

/src/css/core/abstract/_deprecated.scss

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();
    @include _row__col--width(auto);
  }
}

_row__col--offset()

/src/css/core/abstract/_deprecated.scss

Sets column offset of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();
    @include _row__col--offset(1, 3);
  }
}

_row--margin()

/src/css/core/abstract/_deprecated.scss

Sets row margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

.c-row {
  @include _row();
  @include _row--margin(1);
}

_row__col--margin()

/src/css/core/abstract/_deprecated.scss

Sets column margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

.c-row__col {
  @include _row__col();
  @include _row__col--margin(1);
}

_lattice()

/src/css/core/abstract/_deprecated.scss

Abstract row component of flexbox based grid system

scss

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col();

    &--1-3 {
      @include _lattice__col(1, 3);
    }
  }
}

html

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.

<div class="c-lattice">
  <div class="c-lattice__col c-lattice__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-lattice__col c-lattice__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

_lattice__col()

/src/css/core/abstract/_deprecated.scss

Abstract column element of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col();

    &--1-3 {
      @include _lattice__col(1, 3);
    }
  }
}

html

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.

<div class="c-lattice">
  <div class="c-lattice__col c-lattice__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-lattice__col c-lattice__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

_lattice__col--width()

/src/css/core/abstract/_deprecated.scss

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col(1, 2);

    @include _media-min(lg) {
      @include _lattice__col--width(1 / 3 * 100%);
    }
  }
}

_font-size()

/src/css/core/function/_deprecated.scss

Return rem font-size

scss

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

font-size: _font-size(1); // => 16px

_line-height()

/src/css/core/function/_deprecated.scss

Return line-height for vertical rhythum

scss

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

.c-foo {
  line-height: _line-height(1); // line-height for 1rem
}

_space()

/src/css/core/function/_deprecated.scss

Return the margin conforming to the rhythm

When coefficient is lenght return it as is

scss

//
// @param   number   $coefficient
// @param   boolean  $apply-space-scale
// @param   boolean  $apply-margin-scale
// @return  length
//

padding: _space(1);
padding: _space(1, true);
padding: _space(1, true, true);

_between-content()

/src/css/core/mixin/_deprecated.scss

Sets Child elements margin

scss

//
// @param  int  $coefficient
//

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

html

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

_content()

/src/css/core/mixin/_deprecated.scss

Sets Child elements margin

scss

//
// @param  int  $coefficient
//

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

html

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

_margin-top()

/src/css/core/mixin/_deprecated.scss

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);

_margin-right()

/src/css/core/mixin/_deprecated.scss

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);

_margin-bottom()

/src/css/core/mixin/_deprecated.scss

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);

_margin-left()

/src/css/core/mixin/_deprecated.scss

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);

_margin()

/src/css/core/mixin/_deprecated.scss

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);

_padding-top()

/src/css/core/mixin/_deprecated.scss

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);

_padding-right()

/src/css/core/mixin/_deprecated.scss

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);

_padding-bottom()

/src/css/core/mixin/_deprecated.scss

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);

_padding-left()

/src/css/core/mixin/_deprecated.scss

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);

_padding()

/src/css/core/mixin/_deprecated.scss

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);

_position()

/src/css/core/mixin/_deprecated.scss

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);

_top()

/src/css/core/mixin/_deprecated.scss

Sets top

scss

//
// @param  int  $coefficient
//

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

_right()

/src/css/core/mixin/_deprecated.scss

Sets right

scss

//
// @param  int  $coefficient
//

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

_bottom()

/src/css/core/mixin/_deprecated.scss

Sets bottom

scss

//
// @param  int  $coefficient
//

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

_left()

/src/css/core/mixin/_deprecated.scss

Sets left

scss

//
// @param  int  $coefficient
//

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

_font-size()

/src/css/core/mixin/_deprecated.scss

Sets rem font-size

scss

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

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

_line-height()

/src/css/core/mixin/_deprecated.scss

Sets line-height for vertical rhythum

scss

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

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

_font-size-line-height()

/src/css/core/mixin/_deprecated.scss

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

scss

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

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

html

English

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

Japanese

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

<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>

$_base-font-size-px

/src/css/core/variable/_deprecated.scss

Default font size

If html is font-size: 62.5%, set 10px
If you change $_base-font-size-px, you must also change $_base-font-size.

scss

$_base-font-size-px: 16px;

$_half-leading

/src/css/core/variable/_deprecated.scss

Between the character and line of line-height

scss

$_half-leading: .4;

$_base-line-height

/src/css/core/variable/_deprecated.scss

Default line height rem

scss

$_base-line-height: calc(1rem + var(--_half-leading) * 2rem)

$_margin-coefficient

/src/css/core/variable/_deprecated.scss

Margin coefficient

scss

$_margin-coefficient: 1;

$_h1-margin-top

/src/css/core/variable/_deprecated.scss

h1 margin top coefficient

scss

$_h1-margin-top: 0;

$_h1-margin-bottom

/src/css/core/variable/_deprecated.scss

h1 margin bottom coefficient

scss

$_h1-margin-bottom: 1;

$_h2-margin-top

/src/css/core/variable/_deprecated.scss

h2 margin top coefficient

scss

$_h2-margin-top: 2;

$_h2-margin-bottom

/src/css/core/variable/_deprecated.scss

h2 margin bottom coefficient

scss

$_h2-margin-bottom: 1;

$_h3-margin-top

/src/css/core/variable/_deprecated.scss

h3 margin top coefficient

scss

$_h3-margin-top: 1.5;

$_h3-margin-bottom

/src/css/core/variable/_deprecated.scss

h3 margin bottom coefficient

scss

$_h3-margin-bottom: 1;

$_h4-margin-top

/src/css/core/variable/_deprecated.scss

h4 margin top coefficient

scss

$_h4-margin-top: 1.25;

$_h4-margin-bottom

/src/css/core/variable/_deprecated.scss

h4 margin bottom coefficient

scss

$_h4-margin-bottom: 1;

$_h5-margin-top

/src/css/core/variable/_deprecated.scss

h5 margin top coefficient

scss

$_h5-margin-top: 1;

$_h5-margin-bottom

/src/css/core/variable/_deprecated.scss

h5 margin bottom coefficient

scss

$_h5-margin-bottom: .5;

$_h6-margin-top

/src/css/core/variable/_deprecated.scss

h6 margin top coefficient

scss

$_h6-margin-top: 1;

$_h6-margin-bottom

/src/css/core/variable/_deprecated.scss

h6 margin bottom coefficient

scss

$_h6-margin-bottom: .5;

$_font-family

/src/css/core/variable/_deprecated.scss

Default font family

scss

$_font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

$_border-radius

/src/css/core/variable/_deprecated.scss

Border radius

scss

$_border-radius: 3px;

$_color-gray

/src/css/core/variable/_deprecated.scss

Default gray color

scss

$_color-gray: #999;

$_color-red

/src/css/core/variable/_deprecated.scss

Default red color

scss

$_color-red: #e74c3c;

$_container-margin

/src/css/core/variable/_deprecated.scss

Container side margin

scss

//
// @var  length
//

$_container-margin: $_base-line-height;

$_container-max-width

/src/css/core/variable/_deprecated.scss

Container max width

scss

//
// @var  length
//

$_container-max-width: 1280px;

$_page-effect-z-index

/src/css/core/variable/_deprecated.scss

z-index of page effect

scss

$_page-effect-z-index: 1000000;

$_transition-duration

/src/css/core/variable/_deprecated.scss

Animation time

scss

$_transition-duration: .1s;

$_transition-function-timing

/src/css/core/variable/_deprecated.scss

Transition function timing

scss

//
// @link  http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
//

$_transition-function-timing: ease-out;

$_transition-delay

/src/css/core/variable/_deprecated.scss

Transition function timing

scss

$_transition-delay: 1s;

core/abstract

scss

html

scss

html

scss

scss

scss

scss

scss

html

scss

scss

scss

scss

scss

html

scss

html

scss

scss

scss

scss

scss

html

scss

html

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

html

English

Japanese

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss

scss