Ayu
CSS bootstrap for web UI, powered by Gridle and follow BEM styleguide.
Why another scaffold dear developer? Because i need my very own scaffold.
Badge
Basic Badge
<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>Buttons
Basic Button
<button class="btn btn--x-large">x-large</button>
<button class="btn btn--large">large</button>
<button class="btn">medium</button>
<button class="btn btn--small">small</button>Button CTA
<button class="btn btn--cta btn--x-large">x-large</button>
<button class="btn btn--cta btn--large">large</button>
<button class="btn btn--cta">medium</button>
<button class="btn btn--cta btn--small">small</button>Button Inverse CTA
<button class="btn btn--i-cta btn--x-large">x-large</button>
<button class="btn btn--i-cta btn--large">large</button>
<button class="btn btn--i-cta">medium</button>
<button class="btn btn--i-cta btn--small">small</button>Button Secondary
<button class="btn btn--secondary btn--x-large">x-large</button>
<button class="btn btn--secondary btn--large">large</button>
<button class="btn btn--secondary">medium</button>
<button class="btn btn--secondary btn--small">small</button>Button Inverse Secondary
<button class="btn btn--i-secondary btn--x-large">x-large</button>
<button class="btn btn--i-secondary btn--large">large</button>
<button class="btn btn--i-secondary">medium</button>
<button class="btn btn--i-secondary btn--small">small</button>Button Disabled
<button class="btn btn--cta btn--x-large" disabled>x-large</button>
<button class="btn btn--cta btn--large" disabled>large</button>
<button class="btn btn--cta" disabled>medium</button>
<button class="btn btn--cta btn--small" disabled>small</button>Button Common with Icon
Note: We do not provide icon out of the box, so you can use whatever icons you like
<button class="btn btn--x-large"><i class="i-android-attach"></i>x-large</button>
<button class="btn btn--large"><i class="i-android-attach"></i>large</button>
<button class="btn"><i class="i-android-attach"></i>medium</button>
<button class="btn btn--small"><i class="i-android-attach"></i>small</button>Any Button with Icon
<button class="btn btn--x-large"><i class="i-android-attach"></i>x-large</button>
<button class="btn btn--large"><i class="i-android-attach"></i>large</button>
<button class="btn"><i class="i-android-attach"></i>medium</button>
<button class="btn btn--small"><i class="i-android-attach"></i>small</button>Button Block - Use Grid
<div class="row">
<div class="gr-3">
<button class="btn btn--cta btn--block btn--x-large">x-large</button>
</div>
</div>Button Dropdown
Item dropdown 1
- Item dropdown 1
- Item dropdown 2
- Item dropdown 3
- Item dropdown 1
- Item dropdown 2
- Item dropdown 3
- Item dropdown 1
- Item dropdown 2
- Item dropdown 3
<div class="btn-dropdown">
<button class="btn btn--cta">Dropdown <i class="i-android-arrow-dropdown"></i></button>
<div class="dropdown">
<div class="dropdown__item">
<div class="dropdown__item-content">Content of dropdown</div>
</div>
<div class="dropdown__item">
<div class="dropdown__item-content">Content of dropdown</div>
</div>
</div>
</div>Button Group
Note: buttons should be on same size
<div class="btn-group">
<button class="btn btn--x-large">x-large</button>
<button class="btn btn--x-large" disabled>x-large</button>
<button class="btn btn--x-large">x-large</button>
</div>Fields
1. Normal text field
2. Error text field
3. Error text field with message
4. Field Group
5. Field Group with Error Message
6. Normal Select Field
7. Error select field
8. Error select field with message
9. Field Group with Select as Field
10. Field Group with Select as Field and Error Message
Boxes
1. Common box without header
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.
2. Common box with header
Title for box
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.
3. Danger Box
Title for box
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.
Callout
Callout is a colorful box that can be used as, not limited to note on a post or flash notification
1. Basic Callout
2. Green Callout
3. Red Callout
4. Yellow Callout
5. Callout with Icon - Using Flag Component
6. Success notification
7. Error notification
Modal
1. Normal modal
Tab
1. Basic Tab
Article title
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.
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.
Cards
We don't have card component, but we can build it by combining box component with image, grid etc.
This is card title
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.
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.
This is card title
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.
Thanks to the developer that made these cool stuff, they are either become my guide on making this framework or included in this framework - Bootstrap Twitter Gulp Gridle.scss Ionicons