_alert()
Abstract alert component
scss
.c-alert {
@include _alert();
@include _padding(1);
background-color: #4b9ad8;
color: #fff;
}
html
<div class="c-alert" role="alert">
...
</div>
Abstract alert component
.c-alert {
@include _alert();
@include _padding(1);
background-color: #4b9ad8;
color: #fff;
}
<div class="c-alert" role="alert">
...
</div>
Abstract top balloon component
//
// @param hash $params
// background-color hex
// border-color hex
// border-size length
// triangle-size length
//
.c-top-balloon {
@include _top-balloon((
background-color: #fff,
border-color: null,
border-size: null,
triangle-size: 10px,
));
@include _padding(1);
}
<div class="c-top-balloon">
...
</div>
Abstract right balloon component
//
// @param hash $params
// background-color hex
// border-color hex
// border-size length
// triangle-size length
//
.c-right-balloon {
@include _right-balloon((
background-color: #fff,
border-color: null,
border-size: null,
triangle-size: 10px,
));
@include _padding(1);
}
<div class="c-right-balloon">
...
</div>
Abstract bottom balloon component
//
// @param hash $params
// background-color hex
// border-color hex
// border-size length
// triangle-size length
//
.c-bottom-balloon {
@include _bottom-balloon((
background-color: #fff,
border-color: null,
border-size: null,
triangle-size: 10px,
));
@include _padding(1);
}
<div class="c-bottom-balloon">
...
</div>
Abstract left balloon component
//
// @param hash $params
// background-color hex
// border-color hex
// border-size length
// triangle-size length
//
.c-left-balloon {
@include _left-balloon((
background-color: #fff,
border-color: null,
border-size: null,
triangle-size: 10px,
));
@include _padding(1);
}
<div class="c-left-balloon">
...
</div>
Abstract breadcrumbs component
.c-breadcrumbs {
@include _breadcrumbs();
}
<ol class="c-breadcrumbs">
<li class="c-breadcrumbs__item"><a href="#">...</a></li>
<li class="c-breadcrumbs__item">...</li>
</ol>
Abstract button component
.c-btn {
@include _btn();
@include _padding(.5, 1);
background-color: #fff;
color: $_color-text;
}
<a class="c-btn" role="button">btn</a>
Abstract card component
.c-card {
@include _card();
background-color: #fff;
&__body, &__action {
@include _padding(.75);
}
}
<div class="c-card">
<div class="c-card__figure">
<img src="/basis/aigis_assets/images/dummy.jpg">
</div>
<div class="c-card__body">
...
</div>
<div class="c-card__action">
...
</div>
</div>
<div class="c-card">
<div class="c-card__figure" style="background-image: url('/basis/aigis_assets/images/dummy.jpg'); padding-top: 50%">
<div style="position: absolute; left: 10px; bottom: 10px">...</div>
</div>
<div class="c-card__body">
...
</div>
<div class="c-card__action">
...
</div>
</div>
Abstract checkbox component
//
// @param hash $params
// size length
// border-radius length
//
.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 side margin
//
// @var length
//
$_container-margin: $_base-line-height;
Abstract fluid container component
.c-fluid-container {
@include _fluid-container();
}
<div class="c-fluid-container">
...
</div>
Container max width
//
// @var length
//
$_container-max-width: 1200px;
Abstract container component
.c-container {
@include _container();
}
<div class="c-container">
...
</div>
Abstract drawer component
//
// @param hash $params
// width length
// max-width length
//
.c-drawer {
@include _drawer((
width: ($_base-line-height * 10),
max-width: 80%,
));
$item-padding-coefficient: 1;
&__menu {
@include _list-unstyled();
}
&__item, &__subitem {
position: relative;
}
&__item {
@include _padding(.5, $item-padding-coefficient, 0);
}
&__submenu {
@include _list-unstyled();
@include _margin(0, ($item-padding-coefficient * -1), 0, 0);
padding-left: 1em;
}
&__subitem {
@include _padding(.5, $item-padding-coefficient, 0, 0);
}
&__toggle {
@include _position(absolute, _space(.5), 5px, 0);
@include _square($_base-line-height);
display: flex;
align-items: center;
justify-content: center;
}
}
import BasisDrawer from 'node_modules/sass-basis/src/js/drawer.js';
new BasisDrawer({
drawer : '.c-drawer',
toggle : '.c-drawer__toggle',
submenu: '.c-drawer__submenu'
});
<div style="min-height: 200px">
<nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labelledby="hamburger-btn">
<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" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</div>
<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>
</nav>
</div>
<div id="hamburger-btn" class="c-hamburger-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>
Abstract entries component
.c-entries {
@include _entries();
boder-top: 1px solid _light($_color-gray);
&__item {
@include _padding(1, 0);
boder-bottom: 1px solid _light($_color-gray);
}
}
<ul class="c-entries">
<li class="c-entries__item">
...
</li>
</ul>
Abstract entry component
.c-entry {
@include _entry();
&__header {
@include _margin(0, 0, 1);
@include _font-size-line-height($_base-font-size * 1.5);
}
&__content {
@include _content();
}
}
<article class="c-entry">
<header class="c-entry__header">
<h1 class="c-entry__title">...</h1>
<div class="c-entry__content">
...
</div>
</header>
</article>
Abstract flexible media component
.c-flex-media {
@include _flex-media();
&__figure {
@include _margin(0, 0, .5);
width: 100%;
@include _media-min(md) {
@include _margin(0, 1, 0, 0);
width: 150px;
}
}
}
<div class="c-flex-media">
<div class="c-flex-media__figure">
<img src="/basis/aigis_assets/images/dummy.jpg">
</div>
<div class="c-flex-media__body">
...
</div>
</div>
Abstract form control component
.c-form-control {
@include _form-control();
}
<input type="text" class="c-form-control">
Abstract hamburger button component
.c-hamburger-btn {
@include _hamburger-btn((
height: 16px,
width: 22px,
bar-height: 2px,
color: $_color-text,
));
}
import BasisHamburgerBtn from 'node_modules/sass-basis/src/js/hamburger-btn.js';
new BasisHamburgerBtn({
btn: '.c-hamburger-btn'
});
<div id="hamburger-btn" class="c-hamburger-btn" role="button" 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>
<nav id="drawer" aria-labelledby="hamburger-btn">...</nav>
Abstract hero component
.c-hero {
@include _hero();
@include _padding(1);
&__header {
@include _margin(0, 0, 1);
}
&__footer {
@include _margin(1, 0, 0);
}
}
<div class="c-hero">
<div class="c-hero__header">
...
</div>
<div class="c-hero__content">
...
</div>
<div class="c-hero__footer">
...
</div>
</div>
Abstract row component of inline-block based grid system
.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);
}
}
}
<div class="c-row">
<div class="c-row__col c-row__col--1-3">
...
</div>
</div>
Abstract column element of inline-block based grid system
//
// @param int $columns molecule column size
// @param int $max-columns denominator column size
//
.c-row {
@include _ib-row();
&__col {
@include _ib-row__col();
&--1-3 {
@include _ib-row__col(1, 3);
}
}
}
<div class="c-row">
<div class="c-row__col c-row__col--1-3">
...
</div>
</div>
Sets column width of inline-block based grid system
//
// @param length $width
//
.c-row {
@include _ib-row();
&__col {
@include _ib-row__col();
@include _ib-row__col--width(auto);
}
}
Sets column offset of inline-block based grid system
//
// @param int $columns molecule column size
// @param int $max-columns denominator column size
//
.c-row {
@include _ib-row();
&__col {
@include _ib-row__col();
@include _ib-row__col--offset(1, 3);
}
}
Sets row margin of inline-block based grid system
//
// @param int $coefficient
//
.c-row {
@include _ib-row();
@include _ib-row--margin(1);
}
Sets column margin of inline-block based grid system
//
// @param int $coefficient
//
.c-row {
@include _ib-row();
@include _ib-row--margin(1);
}
Abstract icon component
.c-ic-angle-right {
@include _ic();
&::before {
content: "\e900";
}
}
<span class="c-ic-angle-right" aria-hidden="true"></span>
Abstract input group component
.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>
Abstract media component
.c-media {
@include _media();
&__figure {
@include _margin(0, 1, 0, 0);
}
}
<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
.c-meta {
@include _meta();
}
<ul class="c-meta">
<li class="c-meta__item">
...
</li>
</ul>
Abstract navbar component
.c-navbar {
@include _navbar();
&__item > a {
color: $_color-text;
@include _padding(.5, 1);
}
}
import BasisNavbar from 'node_modules/sass-basis/src/js/navbar.js';
new BasisNavbar({
item : '.c-navbar__item',
submenu: '.c-navbar__submenu',
subitem: '.c-navbar__subitem'
});
<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>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
</li>
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
</li>
</ul>
z-index
of page effect
$_page-effect-z-index: 1000000;
Abstract page effect component
.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({
pageEffect: '.c-page-effect',
duration: 200
});
<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
.c-page-header {
@include _page-header();
@include _padding(2, 0);
&__title {
@include _font-size-line-height($_base-font-size * 2);
}
}
<div class="c-page-header">
<h1 class="c-page-header__title">...</h1>
</div>
Abstract pagination component
.c-pagination {
@include _pagination();
text-align: center;
font-size: 0;
&__item,
&__item-link,
&__item-ellipsis {
margin: 0 3px;
display: inline-flex;
@include _square(30px);
@include _font-size($_base-font-size-px - 2);
align-items: center;
justify-content: center;
}
}
<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 radio button component
.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>
Abstract row component of flexbox based grid system
.c-row {
@include _row();
&__col {
@include _row__col();
&--1-3 {
@include _row__col(1, 3);
}
&--offset-1-3 {
@include _row__col--offset(1, 3);
}
}
}
<div class="c-row">
<div class="c-row__col c-row__col--1-3">
...
</div>
</div>
Abstract column element of flexbox based grid system
//
// @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);
}
}
}
<div class="c-row">
<div class="c-row__col c-row__col--1-3">
...
</div>
</div>
Sets column width of flexbox based grid system
//
// @param length $width
//
.c-row {
@include _row();
&__col {
@include _row__col();
@include _row__col--width(auto);
}
}
Sets column offset of flexbox based grid system
//
// @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);
}
}
Sets row margin of flexbox based grid system
//
// @param int $coefficient
//
.c-row {
@include _row();
@include _row--margin(1);
}
Sets column margin of flexbox based grid system
//
// @param int $coefficient
//
.c-row {
@include _row();
@include _row--margin(1);
}
Abstract section component
.c-section {
@include _section();
@include _padding(2, 0);
&__title {
@include _margin(0, 0, 2);
@include _font-size-line-height($_base-font-size * 1.5);
text-align: center;
}
&__content {
@include _content();
}
}
<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
.c-select {
@include _select();
}
import BasisSelect from 'node_modules/sass-basis/src/js/select.js';
new BasisSelect({
select: '.c-select',
label : '.c-select__label'
});
<span class="c-select c-select--block" aria-selected="false">
<select>
<option value="1">label-1</option>
<option value="2">label-2</option>
<option value="3">label-3</option>
</select>
<span class="c-select__label"></span>
</span>
Abstract site branding component
.c-site-branding {
@include _site-branding();
}
<div class="c-site-branding">
<h1 class="c-site-branding__title">...</h1>
</div>
Abstract circle spinner component
//
// @param hash $params
// size length
// color hex
// border-size length
// delay seconds
// duration seconds
//
.c-circle-spinner {
@include _circle-spinner((
size: 20px,
color: _light($_color-gray),
border-size: 3px,
delay: 0s,
duration: 2s,
));
}
<div class="c-circle-spinner"></div>
Abstract dots spinner component
//
// @param hash $params
// size length
// color hex
// delay seconds
// duration seconds
// scale int
//
.c-dots-spinner {
@include _dots-spinner((
size: 10px,
color: $_color-gray,
delay: 0s,
duration: 2s,
scale: 1.3,
));
}
<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
//
// @param hash $params
// height length
// width length
// color hex
// delay seconds
// duration seconds
// scale int
//
.c-pulse-spinner {
@include _pulse-spinner((
height: 16px,
width: 5px,
color: $_color-gray,
delay: 0s,
duration: 2s,
scale: 1.3,
));
}
<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>