_alert

//
// Alert
//
// @param  hash  $params  properties for decoration
//
.c-alert {
  @include _alert((
    background-color: null,
    border: null,
    padding: _space(.75),
  ));
}
<div class="c-alert" role="alert">
  ...
</div>

_balloon-top

//
// Balloon (Top)
//
// @param  hash  $params  properties for decoration
//
.c-balloon-top {
  @include _balloon-top((
    background-color: null,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
    padding: _space(.75),
  ));
}
<div class="c-balloon-top">
  ...
</div>

_balloon-right

//
// Balloon (Right)
//
// @param  hash  $params  properties for decoration
//
.c-balloon-right {
  @include _balloon-right((
    background-color: null,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
    padding: _space(.75),
  ));
}
<div class="c-balloon-right">
  ...
</div>

_balloon-bottom

//
// Balloon (Bottom)
//
// @param  hash  $params  properties for decoration
//
.c-balloon-bottom {
  @include _balloon-bottom((
    background-color: null,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
    padding: _space(.75),
  ));
}
<div class="c-balloon-bottom">
  ...
</div>

_balloon-left

//
// Balloon (Left)
//
// @param  hash  $params  properties for decoration
//
.c-balloon-left {
  @include _balloon-left((
    background-color: null,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
    padding: _space(.75),
  ));
}
<div class="c-balloon-left">
  ...
</div>

_btn

//
// Button
//
// @param  hash  $params  properties for decoration
//
.c-btn {
  @include _btn((
    background-color: null,
    border: null,
    padding: _space(.5) _space(1),
  ));
}
<a class="c-btn" role="button">btn</a>

_card

//
// Card
//
// @param  hash  $params  properties for decoration
//
.c-card {
  @include _card((
    background-color: null,
    padding: _space(.75),
  ));
}
<div class="c-card">
 <div class="c-card__figure">
   <img ...>
 </div>
 <div class="c-card__body">
   ...
 </div>
</div>

_checkbox

//
// Checkbox
//
.c-checkbox {
  @include _checkbox((
    size: $_base-font-size-px,
    border-radius: $_border-radius,
  ));
}
<label>
  <span class="c-checkbox">
    <input type="checkbox">
    <span class="c-checkbox__control"></span>
  </span>
  ...
</label>

_container

//
// Container max-width
// @var  length
//
$_container-max-width: 1200px !default;

//
// Container
//
.c-container {
  @include _container();
}
<div class="c-container">
  ...
</div>

_content

Each elements default margin is 0. If you use ._c-content or @include _content(), vertical rhythm is applied to elements. See more

//
// Content
//
.c-content {
  @include _content();
}
<div class="c-content">
  ...
</div>

_drawer JS

//
// Drawer
//
// @param  hash  $params  properties for decoration
//
.c-drawer {
  @include _drawer((
    background-color: _light($_color-black),
    width: ($_base-line-height * 10),
    max-width: 80%,
  ));
}
import BasisDrawer from 'node_modules/sass-basis/src/js/drawer.js';
new BasisDrawer();
<div class="c-drawer" data-c="drawer">
  <nav id="drawer" class="c-drawer__body" data-c="drawer__body" role="navigation" aria-hidden="true">
    <ul class="c-drawer__menu">
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item">
        <a href="#">menu</a>
        <div class="c-drawer__toggle" data-c="drawer__toggle" aria-expanded="false">&gt;</div>
        <ul class="c-drawer__submenu" data-c="drawer__submenu" aria-hidden="true">
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
//
<div class="_c-hamburger-btn" data-c="drawer-btn" aria-expanded="false" aria-controls="drawer">
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
</div>

_flex-media

//
// Flexible Media
//
.c-flex-media {
  @include _flex-media();
}
<div class="c-flex-media">
 <div class="c-flex-media__figure">
   <img ...>
 </div>
 <div class="c-flex-media__body">
   ...
 </div>
</div>

_form-control

//
// Form Control
//
.c-form-control {
  @include _form-control();
}
<input type="text" class="c-form-control">

_hamburger-btn

//
// Hamburger Button
//
// @param  hash  $params  properties for decoration
//
.c-hamburger-btn {
  @include _hamburger-btn((
    height: 16px,
    width: 22px,
    bar-height: 2px,
    color: $_color-text,
  ));
}
<div class="c-hamburger-btn" role="button" aria-expanded="false">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>

_hero

//
// Hero
//
.c-hero {
  @include _hero();
}
<div class="c-hero">
  <div class="c-hero__header"></div>
  <div class="c-hero__content"></div>
  <div class="c-hero__footer"></div>
</div>

_ic

//
// Icon Font
//
.c-ic {
  @include _ic();
}

_ib-row

//
// Grid System (Inline Block Base)
//
// Grid wrapper
//
@include _ib-row();

//
// Setting column width
//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//
@include _ib-row__col($columns: null, $max-columns: null);

//
// Setting column width
//
// @param  length  $width
//
@include _ib-row__col--width($width);

//
// Setting column offset
//
// @param  int  $columns      molecule offset size
// @param  int  $max-columns  denominator offset size
//
@include _ib-row__col--offset($columns: null, $max-columns: null);

//
// Adding margin for the column
//
// @param  int  $coefficient
//
@include _ib-row__col--margin($coefficient);

//
// Adding margin for the row
//
// @param  int  $coefficient
//
@include _ib-row--margin($coefficient);

.c-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);
  }
}

_input-group

//
// Input Group
//
// .c-input-group {
//   @include _input-group();
}
<div class="c-input-group">
  <div class="c-input-group__addon">@</div>
  <div class="c-input-group__field">
    <input type="text">
  </div>
  <button class="c-input-group__btn">Go</button>
</div>

_media

//
// Media
//
.c-media {
  @include _media();
}
<div class="c-media">
  <div class="c-media__figure">
    <img ...>
  </div>
  <div class="c-media__body">
    ...
  </div>
</div>

_navbar

//
// Navbar
//
.c-navbar {
  @include _navbar();
}
import BasisNavbar from 'node_modules/sass-basis/src/js/navbar.js';
new BasisNavbar();
<ul class="_c-navbar">
  <li class="_c-navbar__item" data-c="navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="_c-navbar__submenu" data-c="navbar__submenu" aria-hidden="true">
      <li class="_c-navbar__subitem" data-c="navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="_c-navbar__submenu" data-c="navbar__submenu" aria-hidden="true">
          <li class="_c-navbar__subitem" data-c="navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

_page-effect JS

//
// Page Effect
//
// @param  hash  $params  properties for decoration
//
.c-page-effect {
  @include _page-effect((
    duration: .2s,
    background-color: #fff,
  ));
}
import BasisPageEffect from 'node_modules/sass-basis/src/js/page-effect.js';
new BasisPageEffect();
<div class="c-page-effect" data-c="page-effect" data-page-effect="fadein" aria-hidden="false">
  <div class="c-page-effect__item">
    Loading...
  </div>
</div>

_pagination

//
// Pagination
//
.c-pagination {
  @include _pagination();
}
<div class="c-pagination">
  <span class="c-pagination__item" aria-current="page">1</span>
  <a class="c-pagination__item-link">2</a>
  <span class="c-pagination__item-ellipsis" aria-hidden="true">…</span>
  <a class="c-pagination__item-link">99</a>
  <a class="c-pagination__item-link">100</a>
</div>

_radio

//
// Radio
//
// @param  hash  $params  properties for decoration
//
.c-radio {
  @include _radio((
    size: $_base-font-size-px,
  ));
}
<label>
  <span class="c-radio">
    <input type="radio">
    <span class="c-radio__control"></span>
  </span>
  ...
</label>

_row

//
// Grid System
//
// Grid wrapper
//
@include _row();

//
// Setting column width
//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//
@include _row__col($columns: null, $max-columns: null);

//
// Setting column width
//
// @param  length  $width
//
@include _row__col--width($width);

//
// Setting column offset
//
// @param  int  $columns      molecule offset size
// @param  int  $max-columns  denominator offset size
//
@include _row__col--offset($columns: null, $max-columns: null);

//
// Adding margin for the column
//
// @param  int  coefficient
//
@include _row__col--margin($coefficient);

//
// Adding margin for the row
//
// @param  int  $coefficient
//
@include _row--margin($coefficient);

.c-row {
  @include _row();
  &__col {
    @include _row__col();
    &--1-3 {
      @include _row__col(1, 3);
    }
    &--offset-1-3 {
      @include _row__col--offset(1, 3);
    }
  }
}

_select JS

//
// Select
//
.c-select {
  @include _select();
}
import BasisSelect from 'node_modules/sass-basis/src/js/select.js';
new BasisSelect();
<span class="c-select" data-c="select" aria-selected="false">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option></select>
  <span class="c-select__label" data-c="select__label"></span>
</span>

_spinner-dots

//
// Spinner (Circle)
//
// @param  hash  $params  properties for decoration
//
.c-spinner-circle {
  @include _spinner-circle((
    size: 20px,
    color: _light($_color-gray),
    border-size: 3px,
    delay: 0s,
    duration: 2s,
}
<div class="c-spinner-dots">
  <div class="c-spinner-dots__dot"></div>
  <div class="c-spinner-dots__dot"></div>
  <div class="c-spinner-dots__dot"></div>
</div>

_spinner-pulse

//
// Spinner (Dots)
//
// @param  hash  $params  properties for decoration
//
.c-spinner-dots {
  @include _spinner-dots((
    size: 10px,
    color: $_color-gray,
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}
<div class="c-spinner-pulse">
  <div class="c-spinner-pulse__bar"></div>
  <div class="c-spinner-pulse__bar"></div>
  <div class="c-spinner-pulse__bar"></div>
</div>

_spinner-circle

//
// Spinner (Pulse)
//
// @param  hash  $params  properties for decoration
//
.c-spinner-pulse {
  @include _spinner-pulse((
    height: 16px,
    width: 5px,
    color: $_color-gray,
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}
<div class="c-spinner-circle"></div>