Abstract alert component

scss

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

.c-alert {
  @include core.alert();
  padding: var(--_padding1);
  background-color: #4b9ad8;
  color: #fff;
}

html

<div class="c-alert" role="alert">
  ...
</div>

Abstract top balloon component

scss

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

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

.c-top-balloon {
  @include core.top-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-top-balloon">
  ...
</div>

Abstract right balloon component

scss

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

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

.c-right-balloon {
  @include core.right-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-right-balloon">
  ...
</div>

Abstract bottom balloon component

scss

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

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

.c-bottom-balloon {
  @include core.bottom-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-bottom-balloon">
  ...
</div>

Abstract left balloon component

scss

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

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

.c-left-balloon {
  @include core.left-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-left-balloon">
  ...
</div>

Abstract breadcrumbs component

scss

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

.c-breadcrumbs {
  @include core.breadcrumbs();
}

html

<ol class="c-breadcrumbs">
  <li class="c-breadcrumbs__item"><a href="#">Lorem</a></li>
  <li class="c-breadcrumbs__item">ipsum</li>
</ol>

Abstract button component

scss

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

.c-btn {
  @include core.btn();
  padding: var(--_padding-2) var(--_padding-1);
  background-color: #fff;
  color: var(--_color-text);
}

html

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

Abstract checkbox component

scss

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

.c-checkbox {
  @include core.checkbox();
}

html

<label>
  <span class="c-checkbox">
    <input type="checkbox" class="c-checkbox__control">
    <span class="c-checkbox__label">...</span>
  </span>
</label>

Abstract fluid container component

scss

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

.c-fluid-container {
  @include core.fluid-container();
}

html

<div class="c-fluid-container">
  ...
</div>

Abstract container component

scss

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

.c-container {
  @include core.container();
}

html

<div class="c-container">
  ...
</div>

Abstract row component of inline-block based grid system

scss

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

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

  &__col {
    @include core.ib-row__col();

    &--1-3 {
      @include core.ib-row__col(1, 3);
    }

    &--offset-1-3 {
      @include core.ib-row__col--offset(1, 3);
    }
  }
}

html

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

Abstract column element of inline-block based grid system

scss

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

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

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

  &__col {
    @include core.ib-row__col();

    &--1-3 {
      @include core.ib-row__col(1, 3);
    }
  }
}

html

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

Sets column width of inline-block based grid system

scss

//
// @param  length  $width
//

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

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

  &__col {
    @include core.ib-row__col();
    @include core.ib-row__col--width(auto);
  }
}

Sets column offset of inline-block based grid system

scss

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

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

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

  &__col {
    @include core.ib-row__col();
    @include core.ib-row__col--offset(1, 3);
  }
}

Sets row margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

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

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

Sets column margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

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

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

Abstract column element of flexbox based grid system

scss

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

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

.c-row {
  @include core.row();

  &__col {
    @include core.row__col();

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

html

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

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

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

.c-row {
  @include core.row();

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

Sets column offset of flexbox based grid system

scss

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

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

.c-row {
  @include core.row();

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

Sets row margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

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

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

Sets column margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

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

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

Abstract row component of flexbox based grid system

scss

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

.c-lattice {
  @include core.lattice();

  &__col {
    @include core.lattice__col();

    &--1-3 {
      @include core.lattice__col(1, 3);
    }
  }
}

html

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

Abstract column element of flexbox based grid system

scss

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

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

.c-lattice {
  @include core.lattice();

  &__col {
    @include core.lattice__col();

    &--1-3 {
      @include core.lattice__col(1, 3);
    }
  }
}

html

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

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

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

.c-lattice {
  @include core.lattice();

  &__col {
    @include core.lattice__col(1, 2);

    @include core.media-min(lg) {
      @include core.lattice__col--width(1 / 3 * 100%);
    }
  }
}

Abstract drawer component

scss

//
// @param  hash  $params
//   width      length
//   max-width  length
//

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

.c-drawer {
  @include core.drawer();

  &__focus-point {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
  }

  &__menu,
  &__submenu {
    @include core.list-unstyled();

    > *:not(:first-child) {
      margin-top: var(--_margin-1);
    }
  }

  &__item,
  &__subitem {
    position: relative;
    overflow: hidden;

    &--has-submenu {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      > * {
        flex: 1 1 auto;
      }

      > a {
        padding-right: var(--_padding-1);
        max-width: calc(100% - 42px);
      }

      > .c-drawer__toggle {
        flex: 0 0 auto;
        width: 42px;
        overflow: hidden;
      }

      > .c-drawer__submenu {
        flex: 1 1 100%;
      }
    }
  }

  &__submenu {
    margin-top: var(--_margin-1);
    margin-left: var(--_margin-1);

    &[aria-hidden="true"] {
      display: none;
      visibility: hidden;
    }
  }

  &__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

js

import BasisDrawer from 'node_modules/sass-basis/src/js/_drawer.js';
new BasisDrawer({
  drawer : '.c-drawer',
});

html

<div style="min-height: 200px; overflow: hidden">
  <nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labelledby="my-drawer-btn">
    <div class="c-drawer__inner">
      <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>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="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>
              <button class="c-drawer__toggle" aria-expanded="false">
                <span class="c-ic-angle-right" aria-hidden="true"></span>
              </button>
              <ul class="c-drawer__submenu" aria-hidden="true">
                <li class="c-drawer__subitem"><a href="#">submenu</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="c-drawer__item">
          <a href="#">menu</a>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="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>
    </div>
  </nav>
  <div class="c-drawer-close-zone" aria-controls="drawer" aria-hidden="true"></div>

  <nav id="drawer-inverse" class="c-drawer c-drawer--inverse" role="navigation" aria-hidden="true" aria-labelledby="my-drawer-btn-inverse">
    <div class="c-drawer__inner">
      <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>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="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>
              <button class="c-drawer__toggle" aria-expanded="false">
                <span class="c-ic-angle-right" aria-hidden="true"></span>
              </button>
              <ul class="c-drawer__submenu" aria-hidden="true">
                <li class="c-drawer__subitem"><a href="#">submenu</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="c-drawer__item">
          <a href="#">menu</a>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="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>
    </div>
  </nav>
  <div class="c-drawer-close-zone" aria-controls="drawer-inverse" aria-hidden="true"></div>
</div>

<button id="my-drawer-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU</span>
</button>

<button id="my-drawer-btn-inverse" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer-inverse">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU (Inverse)</span>
</dibuttonv>

Abstract dropdown component

scss

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

.c-dropdown {
  @include core.dropdown();

  &__menu,
  &__submenu {
    @include core.list-unstyled();

    > *:not(:first-child) {
      margin-top: var(--_margin-1);
    }
  }

  &__item,
  &__subitem {
    position: relative;
    overflow: hidden;

    &--has-submenu {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      > * {
        flex: 1 1 auto;
      }

      > a {
        padding-right: var(--_padding-1);
        max-width: calc(100% - 42px);
      }

      > .c-dropdown__toggle {
        flex: 0 0 auto;
        width: 42px;
        overflow: hidden;
      }

      > .c-dropdown__submenu {
        flex: 1 1 100%;
      }
    }
  }

  &__submenu {
    margin-top: var(--_margin-1);
    margin-left: var(--_margin-1);

    &[aria-hidden="true"] {
      display: none;
      visibility: hidden;
    }
  }

  &__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

js

import BasisDrawer from 'node_modules/sass-basis/src/js/_drawer.js';
new BasisDrawer({
  drawer : '.c-dropdown',
});

html

<div style="min-height: 200px; position: relative">
  <nav id="my-dropdown" class="c-dropdown" role="navigation" aria-hidden="true" aria-labelledby="my-dropdown-btn">
    <div class="c-dropdown__inner">
      <ul class="c-dropdown__menu">
        <li class="c-dropdown__item">
          <div class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="my-dropdown">
            <div class="c-hamburger-btn__bars">
              <div class="c-hamburger-btn__bar"></div>
              <div class="c-hamburger-btn__bar"></div>
              <div class="c-hamburger-btn__bar"></div>
            </div>
            <div class="c-hamburger-btn__label">MENU</div>
          </div>
        </li>
        <li class="c-dropdown__item"><a href="#">menu</a></li>
        <li class="c-dropdown__item"><a href="#">menu</a></li>
        <li class="c-dropdown__item">
          <a href="#">menu</a>
          <button class="c-dropdown__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="c-dropdown__submenu" aria-hidden="true">
            <li class="c-dropdown__subitem"><a href="#">submenu</a></li>
            <li class="c-dropdown__subitem"><a href="#">submenu</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>

<button id="my-dropdown-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-dropdown">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU</span>
</button>

Abstract entries component

scss

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

.c-entries {
  @include core.entries();
  boder-top: 1px solid var(--_light-color-gray);

  &__item {
    padding: var(--_padding1) 0;
    boder-bottom: 1px solid var(--_light-color-gray);
  }
}

html

<ul class="c-entries">
  <li class="c-entries__item">
    ...
  </li>
</ul>

Abstract entry component

scss

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

.c-entry {
  @include core.entry();

  &__header {
    margin-bottom: var(--_margin1);
    @include core.set-font-size-level(3);
  }

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

html

<article class="c-entry">
  <header class="c-entry__header">
    <h1 class="c-entry__title">...</h1>
    <div class="c-entry__content">
      ...
    </div>
  </header>
</article>

Abstract form control component

scss

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

.c-form-control {
  @include core.form-control();
}

html

<input type="text" class="c-form-control">

Abstract hamburger button component

scss

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

.c-hamburger-btn {
  @include core.hamburger-btn((
    height: 16px,
    width: 22px,
    bar-height: 2px,
    color: var(--_color-text),
  ));
}

js

import BasisHamburgerBtn from 'node_modules/sass-basis/src/js/_hamburger-btn.js';
new BasisHamburgerBtn({
  btn: '.c-hamburger-btn'
});

html

<button id="hamburger-btn" class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="drawer">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU</span>
</button>

<nav id="drawer" aria-labelledby="hamburger-btn">...</nav>

Abstract hero component

scss

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

.c-hero {
  @include core.hero();
  padding: var(--_padding1);

  &__header {
    margin-bottom: var(--_margin1);
  }

  &__footer {
    margin-top: var(--_margin1);
  }
}

html

<div class="c-hero">
  <div class="c-hero__header">
    ...
  </div>
  <div class="c-hero__content">
    ...
  </div>
  <div class="c-hero__footer">
    ...
  </div>
</div>

Abstract input group component

scss

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

.c-input-group {
  @include core.input-group();
}

html

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

Abstract media component

scss

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

.c-media {
  @include core.media();

  &__figure {
    margin-right: var(--_margin1);
  }
}

html

<div class="c-media">
  <div class="c-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px">
  </div>
  <div class="c-media__body">
    ...
  </div>
</div>

Abstract meta component

scss

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

.c-meta {
  @include core.meta();
}

html

<ul class="c-meta">
  <li class="c-meta__item">
    ...
  </li>
</ul>

Abstract navbar component

scss

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

.c-navbar {
  @include core.navbar();

  &__item > a {
    color: inherit;
    padding: var(--_padding-1) var(--_padding1);
  }
}

js

import BasisNavbar from 'node_modules/sass-basis/src/js/_navbar.js';
new BasisNavbar({
  wrapper: '.c-navbar',
});

html

<ul class="c-navbar">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item">
    <a href="#">menu</a>
  </li>
</ul>
``````html
<ul class="c-navbar" data-popup-mode="click">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <button class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </button>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <button class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </button>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <button class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </button>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <button class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </button>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <button class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </button>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item">
    <a href="#">menu</a>
  </li>
</ul>

Abstract page effect component

scss

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

.c-page-effect {
  @include core.page-effect((
    duration: .2s,
    background-color: #fff,
  ));
}

js

import BasisPageEffect from 'node_modules/sass-basis/src/js/_page-effect.js';
new BasisPageEffect({
  pageEffect: '.c-page-effect',
  duration: 200
});

html

<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
  <div class="c-page-effect__item">
    Loading...
  </div>
</div>

Abstract page header component

scss

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

.c-page-header {
  @include core.page-header();
  padding: var(--_padding2) 0;

  &__title {
    @include core.set-font-size-level(3);
  }
}

html

<div class="c-page-header">
  <h1 class="c-page-header__title">...</h1>
</div>

Abstract pagination component

scss

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

.c-pagination {
  @include core.pagination();
  text-align: center;
  font-size: 0;

  &__item,
  &__item-link,
  &__item-ellipsis {
    margin: 0 3px;
    display: inline-flex;
    @include core.square(30px);
    align-items: center;
    justify-content: center;
  }
}

html

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

Abstract pre component

scss

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

pre {
  @include core.pre();
}

html

<pre>pre</pre>

Abstract radio button component

scss

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

.c-radio {
  @include core.radio();
}

html

<label>
  <span class="c-radio">
    <input type="radio" class="c-radio__control">
    <span class="c-radio__label">...</span>
  </span>
</label>

Abstract responsive container component

scss

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

.c-responsive-container-16-9 {
  @include core.responsive-container();
  padding-bottom: (9 / 16 * 100%);
}

html

<div class="c-responsive-container-16-9">
  <iframe></iframe>
</div>

Abstract responsive table component

scss

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

.responsive-table {
  @include core.media-max(sm) {
    @include core.responsive-table();
  }
}

html

<div class="c-responsive-table">
  <table style="width: 1000px">
    <tr>
      <th>th</th>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <th>th</th>
      <td>td</td>
      <td>td</td>
    </tr>
  </table>
</div>

Abstract row component of flexbox based grid system

scss

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

.c-row {
  @include core.row();

  &__col {
    flex: 0 1 100%;
    max-width: 100%;

    &--1-3 {
      flex-basis: 33.33333%;
      max-width: 33.33333%;
    }
  }
}

html

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

Abstract section component

scss

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

.c-section {
  @include core.section();
  padding: var(--_padding3) 0;

  &__title {
    margin-bottom: var(--_margin2);
    @include core.set-font-size-level(3);
    text-align: center;
  }

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

html

<section class="c-section">
  <div class="_c-container">
    <h2 class="c-section__title">...</h2>
    <div class="c-section__content">
      ...
    </div>
  </div>
</section>

Abstract selectbox component

scss

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

.c-select {
  @include core.select();
}

html

<div class="c-select">
  <select class="c-select__control">
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__toggle"></span>
</div>

Abstract site branding component

scss

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

.c-site-branding {
  @include core.site-branding();
}

html

<div class="c-site-branding">
  <h1 class="c-site-branding__title">...</h1>
</div>

Abstract circle spinner component

scss

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

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

.c-circle-spinner {
  @include core.circle-spinner((
    size: 20px,
    color: var(--_light-color-gray),
    border-size: 3px,
    delay: 0s,
    duration: 2s,
  ));
}

html

<div class="c-circle-spinner"></div>

Abstract dots spinner component

scss

//
// @param  hash  $params
//   size         length
//   color        hex
//   delay        seconds
//   duration     seconds
//   scale        int
//

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

.c-dots-spinner {
  @include core.dots-spinner((
    size: 10px,
    color: var(--_color-gray),
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}

html

<div class="c-dots-spinner">
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
</div>

Abstract pulse spinner component

scss

//
// @param  hash  $params
//   height    length
//   width     length
//   color     hex
//   delay     seconds
//   duration  seconds
//   scale     int
//

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

.c-pulse-spinner {
  @include core.pulse-spinner((
    height: 16px,
    width: 5px,
    color: var(--_color-gray),
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}

html

<div class="c-pulse-spinner">
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
</div>