...
...
Alert
/src/css/object/component/alert.styl
...
<div class="_c-alert" role="alert">
...
</div>
Balloon (Top)
/src/css/object/component/balloon.styl
...
<div class="_c-balloon-top">
...
</div>
Balloon (Right)
/src/css/object/component/balloon.styl
...
<div class="_c-balloon-right">
...
</div>
Balloon (Bottom)
/src/css/object/component/balloon.styl
...
<div class="_c-balloon-bottom">
...
</div>
Balloon (Left)
/src/css/object/component/balloon.styl
...
<div class="_c-balloon-left">
...
</div>
Breadcrumbs
/src/css/object/component/breadcrumbs.styl
<ol class="_c-breadcrumbs">
<li class="_c-breadcrumbs__item"><a href="#">...</a></li>
<li class="_c-breadcrumbs__item">...</li>
</ol>
Button
/src/css/object/component/btn.styl
<a class="_c-btn" role="button">btn</a>
<a class="_c-btn _c-btn--block" role="button">btn</a>
<a class="_c-btn _c-btn--ghost" role="button">btn</a>
Card
/src/css/object/component/card.styl
...
...
<div class="_c-card">
<div class="_c-card__figure">
<img src="/aigis_assets/images/dummy.jpg">
</div>
<div class="_c-card__body">
...
</div>
<div class="_c-card__action">
...
</div>
</div>
Checkbox
/src/css/object/component/checkbox.styl
<label>
<span class="_c-checkbox">
<input type="checkbox">
<span class="_c-checkbox__control"></span>
</span>
...
</label>
Container (Fluid)
/src/css/object/component/container.styl
...
<div class="_c-container-fluid">
...
</div>
Container
/src/css/object/component/container.styl
...
<div class="_c-container">
...
</div>
Copyright
/src/css/object/component/copyright.styl
...
<div class="_c-copyright">
...
</div>
Drawer
/src/css/object/component/drawer.styl
<div class="_c-drawer" data-c="drawer" style="min-height: 200px">
<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">
<span class="_ic-angle-right" aria-hidden="true"></span>
</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>
Entries
/src/css/object/component/entries.styl
- ...
<ul class="_c-entries">
<li class="_c-entries__item">
...
</li>
</ul>
Entry
/src/css/object/component/entry.styl
<article class="_c-entry">
<header class="_c-entry__header">
<h1 class="_c-entry__title">...</h1>
<div class="_c-entry__content">
...
</div>
</header>
</article>
Flexible media
/src/css/object/component/flex-media.styl
...
<div class="_c-flex-media">
<div class="_c-flex-media__figure">
<img src="/aigis_assets/images/dummy.jpg" style="width: 150px">
</div>
<div class="_c-flex-media__body">
...
</div>
</div>
Form Control
/src/css/object/component/form-control.styl
<input type="text" class="_c-form-control">
<textarea class="_c-form-control"></textarea>
<input type="text" class="_c-form-control" disabled>
<input type="text" class="_c-form-control" readonly>
Hamberger Button
/src/css/object/component/hamburger-btn.styl
<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
/src/css/object/component/hero.styl
...
...
<div class="_c-hero" style="background-image: url(/aigis_assets/images/dummy.jpg)">
<div class="_c-hero__header">
...
</div>
<div class="_c-hero__content">
...
</div>
<div class="_c-hero__footer">
...
</div>
</div>
Icon (Angle Right)
/src/css/object/component/ic.styl
<span class="_ic-angle-right" aria-hidden="true"></span>
Icon (Check)
/src/css/object/component/ic.styl
<span class="_ic-check" aria-hidden="true"></span>
Icon (Angle Down)
/src/css/object/component/ic.styl
<span class="_ic-angle-down" aria-hidden="true"></span>
Input Group
/src/css/object/component/input-group.styl
@
<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
/src/css/object/component/media.styl
...
<div class="_c-media">
<div class="_c-media__figure">
<img src="/aigis_assets/images/dummy.jpg" style="width: 150px">
</div>
<div class="_c-media__body">
...
</div>
</div>
Meta
/src/css/object/component/meta.styl
<ul class="_c-meta">
<li class="_c-meta__item">
...
</li>
</ul>
navbar
/src/css/object/component/navbar.styl
<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>
<li class="_c-navbar__item" data-c="navbar__item" aria-haspopup="true">
<a href="#">menu</a>
</li>
<li class="_c-navbar__item" data-c="navbar__item" aria-haspopup="true">
<a href="#">menu</a>
</li>
</ul>
<ul class="_c-navbar _c-navbar--auto">
<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>
<li class="_c-navbar__item" data-c="navbar__item" aria-haspopup="true">
<a href="#">menu</a>
</li>
<li class="_c-navbar__item" data-c="navbar__item" aria-haspopup="true">
<a href="#">menu</a>
</li>
</ul>
Page Effect
/src/css/object/component/page-effect.styl
Loading...
<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>
Page Header
/src/css/object/component/page-header.styl
...
<header class="_c-page-header">
<h1 class="_c-page-header__title">...</h1>
</header>
Paginatiion
/src/css/object/component/pagination.styl
<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
/src/css/object/component/radio.styl
<label>
<span class="_c-radio">
<input type="radio">
<span class="_c-radio__control"></span>
</span>
...
</label>
Grid System
/src/css/object/component/row.styl
1
2
3
<div class="_c-row">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3
</div>
</div>
1
2
3
<div class="_c-row _c-row--reverse">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3
</div>
</div>
1
2
3
<div class="_c-row _c-row--nowrap">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3
</div>
</div>
1
2
<div class="_c-row _c-row--left">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
</div>
1
2
<div class="_c-row _c-row--right">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
</div>
1
2
<div class="_c-row _c-row--center">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
</div>
1
2
<div class="_c-row _c-row--between">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
</div>
1
2
<div class="_c-row _c-row--around">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
</div>
1
2
2
2
3
3
3
3
3
<div class="_c-row _c-row--top">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2<br>
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3<br>
3<br>
3
</div>
</div>
1
2
2
2
3
3
3
3
3
<div class="_c-row _c-row--bottom">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2<br>
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3<br>
3<br>
3
</div>
</div>
1
2
2
2
3
3
3
3
3
<div class="_c-row _c-row--middle">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2<br>
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3<br>
3<br>
3
</div>
</div>
1
2
2
2
3
3
3
3
3
<div class="_c-row _c-row--baseline">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2<br>
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3<br>
3<br>
3
</div>
</div>
1
2
3
<div class="_c-row _c-row--collapse">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3
</div>
</div>
1
2
3
<div class="_c-row _c-row--margin">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3
</div>
</div>
1
2
3
<div class="_c-row _c-row--margin-s">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3
</div>
</div>
1
2
3
<div class="_c-row _c-row--margin-l">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3
</div>
</div>
1
2
2
2
3
3
3
3
3
<div class="_c-row _c-row--fill">
<div class="_c-row__col _c-row__col--1-3">
1
</div>
<div class="_c-row__col _c-row__col--1-3">
2<br>
2
</div>
<div class="_c-row__col _c-row__col--1-3">
3<br>
3<br>
3
</div>
</div>
Section
/src/css/object/component/section.styl
...
...
<section class="_c-section">
<h2 class="_c-section__title">...</h2>
<div class="_c-section__content">
...
</div>
</section>
Select
/src/css/object/component/select.styl
<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>
Site Branding
/src/css/object/component/site-branding.styl
...
<div class="_c-site-branding">
<h1 class="_c-site-branding__title">...</h1>
</div>
Spinner (Circle)
/src/css/object/component/spinner-circle.styl
<div class="_c-spinner-circle"></div>
Spinner (Dots)
/src/css/object/component/spinner-dots.styl
<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)
/src/css/object/component/spinner-pulse.styl
<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>