docs/index.html
<!DOCTYPE html><html lang="en"><head><title>Documentation</title><meta charset="utf-8"><link href="ayu.min.css" rel="stylesheet"><link href="demo.css" rel="stylesheet"></head><body><div class="row"><div class="gr-10"><div class="u-pd-right--large u-pd-left--x-large"><div class="hero"><h1 class="hero__title u-text-post--x-large u-text-align--center">Ayu</h1><p class="hero__body u-text-post--medium u-text-align--center">CSS bootstrap for web UI, powered by Gridle and follow BEM styleguide.</p></div><p class="u-text-align--center"><em>Why another scaffold dear developer?</em> Because i need my very own scaffold.</p><section class="section" id="badge"><header class="section__header"><h2 class="u-text-post--large u-mg-bottom--medium">Badge</h2></header><div class="section__content"><p class="u-text--large">Basic Badge</p><div class="section__items u-mg-bottom--medium"><span class="badge">Badge</span><span class="badge badge--gray">Badge</span><span class="badge badge--blue">Badge</span><span class="badge badge--red">Badge</span><span class="badge badge--orange">Badge</span></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>></span>Badge<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge badge--gray"</span>></span>Badge<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge badge--blue"</span>></span>Badge<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge badge--red"</span>></span>Badge<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge badge--orange"</span>></span>Badge<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></div></section><section class="section" id="button"><header class="section__header"><h2 class="u-text-post--large u-mg-bottom--medium">Buttons</h2></header><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Basic Button</p><div class="section__items u-mg-bottom--medium"><button class="btn btn--x-large u-mg-right--small">x-large</button><button class="btn btn--large u-mg-right--small">large</button><button class="btn u-mg-right--small">medium</button><button class="btn btn--small">small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--large"</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--small"</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button CTA</p><div class="section__items u-mg-bottom--medium"><button class="btn btn--cta btn--x-large u-mg-right--small">x-large</button><button class="btn btn--cta btn--large u-mg-right--small">large</button><button class="btn btn--cta u-mg-right--small">medium</button><button class="btn btn--cta btn--small">small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta btn--x-large"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta btn--large"</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta"</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta btn--small"</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Inverse CTA</p><div class="section__items u-mg-bottom--medium"><button class="btn btn--i-cta btn--x-large u-mg-right--small">x-large</button><button class="btn btn--i-cta btn--large u-mg-right--small">large</button><button class="btn btn--i-cta u-mg-right--small">medium</button><button class="btn btn--i-cta btn--small">small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-cta btn--x-large"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-cta btn--large"</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-cta"</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-cta btn--small"</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Secondary</p><div class="section__items u-mg-bottom--medium"><button class="btn btn--secondary btn--x-large u-mg-right--small">x-large</button><button class="btn btn--secondary btn--large u-mg-right--small">large</button><button class="btn btn--secondary u-mg-right--small">medium</button><button class="btn btn--secondary btn--small">small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--secondary btn--x-large"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--secondary btn--large"</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--secondary"</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--secondary btn--small"</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Inverse Secondary</p><div class="section__items u-mg-bottom--medium"><button class="btn btn--i-secondary btn--x-large u-mg-right--small">x-large</button><button class="btn btn--i-secondary btn--large u-mg-right--small">large</button><button class="btn btn--i-secondary u-mg-right--small">medium</button><button class="btn btn--i-secondary btn--small">small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-secondary btn--x-large"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-secondary btn--large"</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-secondary"</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--i-secondary btn--small"</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Disabled</p><div class="section__items u-mg-bottom--medium"><button class="btn btn--cta btn--x-large u-mg-right--small" disabled>x-large</button><button class="btn btn--cta btn--large u-mg-right--small" disabled>large</button><button class="btn btn--cta u-mg-right--small" disabled>medium</button><button class="btn btn--cta btn--small" disabled>small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta btn--x-large"</span> <span class="hljs-attr">disabled</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta btn--large"</span> <span class="hljs-attr">disabled</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta"</span> <span class="hljs-attr">disabled</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--cta btn--small"</span> <span class="hljs-attr">disabled</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Common with Icon</p><p><i>Note: We do not provide icon out of the box, so you can use whatever icons you like</i></p><div class="section__items u-mg-bottom--medium"><button class="btn btn--x-large u-mg-right--small"><i class="i-android-attach"></i> x-large</button><button class="btn btn--large u-mg-right--small"><i class="i-android-attach"></i> large</button><button class="btn u-mg-right--small"><i class="i-android-attach"></i> medium</button><button class="btn btn--small"><i class="i-android-attach"></i> small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--large"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--small"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Any Button with Icon</p><div class="section__items u-mg-bottom--medium"><button class="btn btn--cta btn--x-large u-mg-right--small"><i class="i-android-attach"></i> x-large</button><button class="btn btn--cta btn--large u-mg-right--small" disabled><i class="i-android-attach"></i> large</button><button class="btn btn--i-cta u-mg-right--small"><i class="i-android-attach"></i> medium</button><button class="btn btn--small"><i class="i-android-attach"></i> small</button></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--large"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>medium<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--small"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"i-android-attach"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>small<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Block - Use Grid</p><div class="section__items u-mg-bottom--medium"><div class="row"><div class="gr-3"><button class="btn btn--cta btn--block btn--x-large"><i class="i-android-attach"></i> x-large</button></div><div class="gr-3"><button class="btn btn--cta btn--block btn--large" disabled><i class="i-android-attach"></i> large</button></div><div class="gr-3"><button class="btn btn--i-cta btn--block"><i class="i-android-attach"></i> medium</button></div><div class="gr-3"><button class="btn btn--small btn--block"><i class="i-android-attach"></i> small</button></div></div></div><code class="html hljs"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>>
<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"gr-3"</span>>
<button <span class="hljs-built_in">class</span>=<span class="hljs-string">"btn btn--cta btn--block btn--x-large"</span>>x-large</button>
</<span class="hljs-keyword">div</span>>
</<span class="hljs-keyword">div</span>></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Dropdown</p><div class="section__items u-mg-bottom--medium" data-module="actions"><div class="btn-dropdown u-mg-right--small" data-type="dropdown"><button class="btn btn--cta">common dropdown <i class="i-android-arrow-dropdown"></i></button><div class="dropdown"><div class="dropdown__item"><h4>Item dropdown 1</h4><div class="dropdown__item-content">Lorem ipsum dolor sit amet, bla blab blab bla bla</div></div><div class="dropdown__item">h4 Item dropdown 2
.dropdown__item-content Lorem ipsum dolor sit amet, bla blab blab bla bla</div><div class="dropdown__item">h4 Item dropdown 3
.dropdown__item-content Lorem ipsum dolor sit amet, bla blab blab bla bla</div></div></div><div class="btn-dropdown u-mg-right--small" data-type="dropdown"><button class="btn btn--cta">dropdown right <i class="i-android-arrow-dropdown"></i></button><ul class="dropdown dropdown--right"><li class="dropdown__item">Item dropdown 1</li><li class="dropdown__item">Item dropdown 2</li><li class="dropdown__item">Item dropdown 3</li></ul></div><div class="btn-dropdown u-mg-right--small" data-type="dropdown"><button class="btn btn--cta">dropdown top <i class="i-android-arrow-dropdown"></i></button><ul class="dropdown dropdown--top"><li class="dropdown__item">Item dropdown 1</li><li class="dropdown__item">Item dropdown 2</li><li class="dropdown__item">Item dropdown 3</li></ul></div><div class="btn-dropdown" data-type="dropdown"><button class="btn btn--cta">dropdown top right <i class="i-android-arrow-dropdown"></i></button><ul class="dropdown dropdown--top dropdown--right"><li class="dropdown__item">Item dropdown 1</li><li class="dropdown__item">Item dropdown 2</li><li class="dropdown__item">Item dropdown 3</li></ul></div></div><code class="html hljs"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"btn-dropdown"</span>>
<button <span class="hljs-built_in">class</span>=<span class="hljs-string">"btn btn--cta"</span>>Dropdown <i <span class="hljs-built_in">class</span>=<span class="hljs-string">"i-android-arrow-dropdown"</span>></i></button>
<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"dropdown"</span>>
<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"dropdown__item"</span>>
<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"dropdown__item-content"</span>>Content <span class="hljs-keyword">of</span> dropdown</<span class="hljs-keyword">div</span>>
</<span class="hljs-keyword">div</span>>
<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"dropdown__item"</span>>
<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"dropdown__item-content"</span>>Content <span class="hljs-keyword">of</span> dropdown</<span class="hljs-keyword">div</span>>
</<span class="hljs-keyword">div</span>>
</<span class="hljs-keyword">div</span>>
</<span class="hljs-keyword">div</span>></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button Group</p><p><i>Note: buttons should be on same size</i></p><div class="section__items u-mg-bottom--medium"><div class="btn-group"><button class="btn btn--x-large"><i class="i-android-attach"></i> x-large</button><button class="btn btn--x-large" disabled>x-large</button><button class="btn btn--x-large">x-large</button></div></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span> <span class="hljs-attr">disabled</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></div><div class="section__content u-mg-bottom--x-large"><p class="u-text--large">Button with Anchor Tag</p><div class="section__items u-mg-bottom--medium"><div class="btn-group"><a class="btn btn--x-large" href="#">x-large</a><a class="btn btn--x-large" href="#" disabled>x-large</a><a class="btn btn--x-large" href="#">x-large</a></div></div><code class="html hljs"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">disabled</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn--x-large"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>x-large<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></div></section><section class="section" id="field"><header class="section__header"><h2 class="u-text--large u-mg-bottom--medium">Fields</h2></header><div class="section__content"><p>1. Normal text field</p><div class="section__items row"><div class="field gr-4"><label class="field__label">Text field</label><input class="field__input field__input--x-large" placeholder="Type here"></div><div class="field gr-4"><label class="field__label">Text field</label><input class="field__input field__input--large" placeholder="Type here"></div><div class="field gr-4"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div></div></div><div class="section__content"><p>2. Error text field</p><div class="section__items row"><div class="field gr-4 is-error"><label class="field__label">Text field</label><input class="field__input field__input--x-large" placeholder="Type here"></div><div class="field gr-4 is-error"><label class="field__label">Text field</label><input class="field__input field__input--large" placeholder="Type here"></div><div class="field gr-4 is-error"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div></div></div><div class="section__content"><p>3. Error text field with message</p><div class="section__items row"><div class="field is-error gr-4"><label class="field__label">Text field</label><input class="field__input field__input--x-large" placeholder="Type here"><p class="field__error-message">Error message</p></div><div class="field is-error gr-4"><label class="field__label">Text field</label><input class="field__input field__input--large" placeholder="Type here"><p class="field__error-message">Error message</p></div><div class="field is-error gr-4"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"><p class="field__error-message">Error message</p></div></div></div><div class="section__content"><p>4. Field Group</p><div class="section__items row"><div class="field gr-4"><label class="field__label">Text field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--x-large"><i class="i-social-yen"></i></span><input class="field__input field__input--x-large" placeholder="Type here"></div><p class="field__error-message">Error message</p></div><div class="field gr-4"><label class="field__label">Text field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--large"><i class="i-social-yen"></i></span><input class="field__input field__input--large" placeholder="Type here"><span class="field__input-addon field__input-addon--large">.00</span></div><p class="field__error-message">Error message</p></div><div class="field gr-4"><label class="field__label">Text field</label><div class="field__input-group"><input class="field__input" placeholder="Type here"><span class="field__input-addon">.00</span></div><p class="field__error-message">Error message</p></div></div></div><div class="section__content"><p>5. Field Group with Error Message</p><div class="section__items row"><div class="field gr-4 is-error"><label class="field__label">Text field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--x-large"><i class="i-social-yen"></i></span><input class="field__input field__input--x-large" placeholder="Type here"></div><p class="field__error-message">Error message</p></div><div class="field gr-4 is-error"><label class="field__label">Text field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--large"><i class="i-social-yen"></i></span><input class="field__input field__input--large" placeholder="Type here"><span class="field__input-addon field__input-addon--large">.00</span></div><p class="field__error-message">Error message</p></div><div class="field gr-4 is-error"><label class="field__label">Text field</label><div class="field__input-group"><input class="field__input" placeholder="Type here"><span class="field__input-addon">.00</span></div><p class="field__error-message">Error message</p></div></div></div><div class="section__content"><p>6. Normal Select Field</p><div class="section__items row"><div class="field gr-4"><label class="field__label">Select field</label><select class="field__select field__select--x-large"><option>One option</option><option>Two option</option><option>Three option</option></select></div><div class="field gr-4"><label class="field__label">Select field</label><select class="field__select field__select--large"><option>One option</option><option>Two option</option><option>Three option</option></select></div><div class="field gr-4"><label class="field__label">Select field</label><select class="field__select"><option>One option</option><option>Two option</option><option>Three option</option></select></div></div></div><div class="section__content"><p>7. Error select field</p><div class="section__items row"><div class="field gr-4 is-error"><label class="field__label">Select field</label><select class="field__select field__select--x-large"><option>One option</option><option>Two option</option><option>Three option</option></select></div><div class="field gr-4 is-error"><label class="field__label">Select field</label><select class="field__select field__select--large"><option>One option</option><option>Two option</option><option>Three option</option></select></div><div class="field gr-4 is-error"><label class="field__label">Select field</label><select class="field__select"><option>One option</option><option>Two option</option><option>Three option</option></select></div></div></div><div class="section__content"><p>8. Error select field with message</p><div class="section__items row"><div class="field gr-4 is-error"><label class="field__label">Select field</label><select class="field__select field__select--x-large"><option>One option</option><option>Two option</option><option>Three option</option></select><p class="field__error-message">Error message</p></div><div class="field gr-4 is-error"><label class="field__label">Select field</label><select class="field__select field__select--large"><option>One option</option><option>Two option</option><option>Three option</option></select><p class="field__error-message">Error message</p></div><div class="field gr-4 is-error"><label class="field__label">Select field</label><select class="field__select"><option>One option</option><option>Two option</option><option>Three option</option></select><p class="field__error-message">Error message</p></div></div></div><div class="section__content"><p>9. Field Group with Select as Field</p><div class="section__items row"><div class="field gr-4"><label class="field__label">Select field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--x-large"><i class="i-social-yen"></i></span><select class="field__select field__select--x-large"><option>1000</option><option>2000</option><option>3000</option></select></div></div><div class="field gr-4"><label class="field__label">Select field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--large"><i class="i-social-yen"></i></span><select class="field__select field__select--large"><option>1000</option><option>2000</option><option>3000</option></select><span class="field__input-addon field__input-addon--large">.00</span></div></div><div class="field gr-4"><label class="field__label">Select field</label><div class="field__input-group"><select class="field__select"><option>1000</option><option>2000</option><option>3000</option></select><span class="field__input-addon">.00</span></div></div></div></div><div class="section__content"><p>10. Field Group with Select as Field and Error Message</p><div class="section__items row"><div class="field gr-4 is-error"><label class="field__label">Select field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--x-large"><i class="i-social-yen"></i></span><select class="field__select field__select--x-large"><option>1000</option><option>2000</option><option>3000</option></select></div><p class="field__error-message">Error message</p></div><div class="field gr-4 is-error"><label class="field__label">Select field</label><div class="field__input-group"><span class="field__input-addon field__input-addon--large"><i class="i-social-yen"></i></span><select class="field__select field__select--large"><option>1000</option><option>2000</option><option>3000</option></select><span class="field__input-addon field__input-addon--large">.00</span></div><p class="field__error-message">Error message</p></div><div class="field gr-4 is-error"><label class="field__label">Select field</label><div class="field__input-group"><select class="field__select"><option>1000</option><option>2000</option><option>3000</option></select><span class="field__input-addon">.00</span></div><p class="field__error-message">Error message</p></div></div></div></section><section class="section" id="box"><header class="section__header"><h2 class="u-text--large u-mg-bottom--medium">Boxes</h2></header><div class="section__content"><p>1. Common box without header</p><div class="box u-mg-bottom--medium"><div class="box__content"><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div><div class="field gr-6"><label class="field__label">Text field</label><select class="field__select"><option>1000</option><option>2000</option><option>3000</option></select></div></div><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div></div><span class="box__separator"></span><p>We will use your email when performing our daily operations and sending email on your behalf. If you want command line operations to use your private email you must set your email here.</p><div><button class="btn btn--cta btn--medium">set my email</button></div></div></div></div><div class="section__content"><p>2. Common box with header</p><div class="box u-mg-bottom--medium"><div class="box__header"><h3>Title for box</h3></div><div class="box__content"><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div><div class="field gr-6"><label class="field__label">Text field</label><select class="field__select"><option>1000</option><option>2000</option><option>3000</option></select></div></div><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div></div><span class="box__separator"></span><p>We will use your email when performing our daily operations and sending email on your behalf. If you want command line operations to use your private email you must set your email here.</p><div><button class="btn btn--cta btn--medium">set my email</button></div></div></div></div><div class="section__content"><p>3. Danger Box</p><div class="box box--danger"><div class="box__header"><h3>Title for box</h3></div><div class="box__content"><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div><div class="field gr-6"><label class="field__label">Text field</label><select class="field__select"><option>1000</option><option>2000</option><option>3000</option></select></div></div><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div></div><span class="box__separator"></span><p>We will use your email when performing our daily operations and sending email on your behalf. If you want command line operations to use your private email you must set your email here.</p><div><button class="btn btn--cta btn--medium">set my email</button></div></div></div></div></section><section class="section" id="callout" data-module="notification"><header class="section__header"><h2 class="u-text--large u-mg-bottom--medium">Callout</h2><p>Callout is a colorful box that can be used as, not limited to note on a post or flash notification</p></header><div class="section__content u-mg-bottom--medium"><p>1. Basic Callout</p><div class="section__items u-mg-bottom--medium"><div class="row"><div class="gr-4"><div class="callout callout--block">This is basic callout with boring color</div></div><div class="gr-4"><div class="callout callout--block callout--large">Large basic callout</div></div><div class="gr-4"><div class="callout callout--block callout--x-large">Extra Large basic callout</div></div></div></div><p>2. Green Callout</p><div class="section__items u-mg-bottom--medium"><div class="row"><div class="gr-4"><div class="callout callout--block callout--green">Now this is starting to be interesting</div></div><div class="gr-4"><div class="callout callout--block callout--green callout--large">Large Green Callout</div></div><div class="gr-4"><div class="callout callout--block callout--green callout--x-large">Extra Large basic callout</div></div></div></div><p>3. Red Callout</p><div class="section__items u-mg-bottom--medium"><div class="row"><div class="gr-4"><div class="callout callout--block callout--red">Yeay, another color variant!</div></div><div class="gr-4"><div class="callout callout--block callout--red callout--large">Yeay, another color variant!</div></div><div class="gr-4"><div class="callout callout--block callout--red callout--x-large">Yeay, another color variant!</div></div></div></div><p>4. Yellow Callout</p><div class="section__items u-mg-bottom--medium"><div class="row"><div class="gr-4"><div class="callout callout--block callout--yellow">You have pretty much gotten the idea, right?</div></div><div class="gr-4"><div class="callout callout--block callout--yellow callout--large">You have pretty much gotten the idea, right?</div></div><div class="gr-4"><div class="callout callout--block callout--yellow callout--x-large">You have pretty much gotten the idea, right?</div></div></div></div><p>5. Callout with Icon - Using Flag Component</p><div class="section__items u-mg-bottom--medium"><div class="row"><div class="gr-4"><div class="callout callout--block callout--yellow"><div class="flag"><div class="flag__head"><i class="i-android-bulb"></i></div><div class="flag__body u-pd-left--small">You have pretty much gotten the idea, right?</div></div></div></div><div class="gr-4"><div class="callout callout--block callout--yellow callout--large"><div class="flag"><div class="flag__head"><i class="i-android-bulb"></i></div><div class="flag__body u-pd-left--small">You have pretty much gotten the idea, right?</div></div></div></div><div class="gr-4"><div class="callout callout--block callout--yellow callout--x-large"><div class="flag flag--top"><div class="flag__head"><i class="i-android-bulb u-text--x-large"></i></div><div class="flag__body u-pd-left--medium">Facer impetus no sed, ne pro zril bonorum. An meliore intellegat philosophia per, et etiam assum reformidans vim. Harum numquam pri ei, vix in feugiat insolens vulputate. Modus omnium forensibus et pri, te mei natum molestiae.</div></div></div></div></div></div><p>6. Success notification</p><button class="btn btn--common" data-type="trigger" data-target="success-notif">Click to Show Notification</button><div class="section__items"><div class="callout callout--green callout--notification" id="success-notif"><div class="flag"><div class="flag__body">This is just notif</div><div class="flag__head u-align-right"><i class="i-close"></i></div></div></div></div></div><div class="section__content u-mg-bottom--medium"><p>7. Error notification</p><button class="btn btn--common" data-type="trigger" data-target="error-notif">Click to Show Notification</button><div class="section__items"><div class="callout callout--red callout--notification callout--error" id="error-notif"><div class="flag"><div class="flag__body">This is just notif</div><div class="flag__head u-align-right"><i class="i-close"></i></div></div></div></div></div></section><section class="section" id="modal"><header class="section__header"><h2 class="u-text--large u-mg-bottom--medium">Modal</h2></header><div class="section__content u-mg-bottom--medium"><p>1. Normal modal</p><div class="section__items" data-module="open-modal"><button class="btn btn--common" data-type="open-modal">Click to Open Modal</button><div class="js-modal-template" style="display: none;"><div class="modal__content js-modal-content"><div class="box"><div class="box__header"><h3>Title for box</h3><div class="box__header-actions"><i class="i-close u-mg--none" data-type="close-modal"></i></div></div><div class="box__content"><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div><div class="field gr-6"><label class="field__label">Text field</label><select class="field__select"><option>1000</option><option>2000</option><option>3000</option></select></div></div><div class="row"><div class="field gr-6"><label class="field__label">Text field</label><input class="field__input" placeholder="Type here"></div></div><span class="box__separator"></span><p>We will use your email when performing our daily operations and sending email on your behalf. If you want command line operations to use your private email you must set your email here.</p><div><button class="btn btn--cta btn--medium" data-type="close-modal">set my email</button></div></div></div></div></div></div></div></section><div class="modal is-hidden" data-module="modal"></div><section class="section" id="tab"><header class="section__header"><h2 class="u-text--large u-mg-bottom--medium">Tab</h2></header><div class="section__content"><p>1. Basic Tab</p><div class="section__items u-mg-bottom--medium"><div class="tab"><ul class="tab-nav"><li class="tab-nav__menu">Menu 1</li><li class="tab-nav__menu is-active">Menu 2</li><li class="tab-nav__menu">Menu 3</li></ul><section class="tab__panel is-active"><div class="flag flag--top"><div class="flag__head u-width--2-12"><img src="images/sample-image-1.jpeg"></div><div class="flag__body u-pd-left--medium u-pd-right--medium"><h3 class="u-mg-bottom--medium">Article title</h3><p class="u-mg-bottom--medium">In 1981, Langer and a group of graduate students designed the interior of a building to reflect the styles and conditions of the year 1959. Scattered about were a black-and-white TV, old furniture, and magazines and books from the 1950s.</p><p class="u-mg--none">This structure would be home to a group of eight men, all over 70 years of age, for five days. When these men arrived at the building, they were told they should not merely discuss this past era while living there, but act is if they actually were their younger selves, 22 years earlier. “We have good reason to believe if you are successful at this, you will feel as you did in 1959,” Langer told them.</p></div></div></section></div></div></div></section><section class="section" id="card"><header class="section__header"><h2 class="u-text--large u-mg-bottom--medium">Cards</h2><p>We don't have card component, but we can build it by combining box component with image, grid etc.</p></header><div class="section__content"><div class="row"><div class="gr-4"><div class="box"><div class="box__content"><img class="u-mg-bottom--medium" src="images/sample-image-1.jpeg"><h3 class="u-mg-bottom--medium">This is card title</h3><p>Facer impetus no sed, ne pro zril bonorum. An meliore intellegat philosophia per, et etiam assum reformidans vim. Harum numquam pri ei, vix in feugiat insolens vulputate. Modus omnium forensibus et pri, te mei natum molestiae.</p><span class="box__separator"></span><p>Facer impetus no sed, ne pro zril bonorum. An meliore intellegat philosophia per, et etiam assum reformidans vim. Harum numquam pri ei, vix in feugiat insolens vulputate. Modus omnium forensibus et pri, te mei natum molestiae.</p><span class="box__separator"></span><div class="row"><div class="gr-6"><button class="btn btn--cta btn--medium btn--block">Buy</button></div><div class="gr-6"><button class="btn btn--common btn--medium btn--block">Add to cart</button></div></div></div></div></div><div class="gr-8"><div class="box"><div class="box__content"><div class="flag flag--top"><div class="flag__head u-width--2-12"><img src="images/sample-image-1.jpeg"></div><div class="flag__body u-pd-left--medium u-pd-right--medium"><h3 class="u-mg-bottom--medium">This is card title</h3><p class="u-mg--none">Facer impetus no sed, ne pro zril bonorum. An meliore intellegat philosophia per, et etiam assum reformidans vim. Harum numquam pri ei, vix in feugiat insolens vulputate.</p></div><div class="flag__head u-width--2-12"><button class="btn btn--cta btn--medium btn--block u-mg-bottom--medium">Buy</button><button class="btn btn--common btn--medium btn--block">Add to cart</button></div></div></div></div></div></div></div></section><p>Thanks to the developer that made these cool stuff, they are either become my guide on making this framework or included in this framework -
<a href="http://getbootstrap.com">Bootstrap Twitter</a>
<a href="http://gulpjs.com/">Gulp</a>
<a href="http://gridle.org">Gridle.scss</a>
<a href="https://github.com/driftyco/ionicons">Ionicons</a></p></div></div><div class="gr-2" style="position: relative;"><ul class="list"><li class="list__item"><a class="list__nav" href="#">Introduction</a></li><li class="list__section">Components</li><li class="list__item"><a class="list__nav" href="#badge">Badges</a></li><li class="list__item"><a class="list__nav" href="#button">Buttons</a></li><li class="list__item"><a class="list__nav" href="#field">Fields</a></li><li class="list__item"><a class="list__nav" href="#box">Box</a></li><li class="list__item"><a class="list__nav" href="#callout">Callout</a></li><li class="list__item"><a class="list__nav" href="#modal">Modal</a></li><li class="list__item"><a class="list__nav" href="#tab">Tab</a></li><li class="list__section">Mixing Out Components</li><li class="list__item"><a class="list__nav" href="#card">Card</a></li></ul></div></div><script src="app.min.js" type="text/javascript"></script></body></html>