Components
All components in Atomic require the class atomic
to be added to the HTML Element you want to apply the awesomeness to.
Dropdown
Dropdowns are not usually easy to get right. With Atomic, you just put an old fashioned list within a container with class="atomic dropdown"
add an attribute for the placeholder text with data-placeholder="Example"
and let Atomic do its magic. You'll get a fully featured dropdown filled with eye candy.
See the example below:
- Pizza
- Hamburgers
- Mac & Cheese
<div class="atomic dropdown" data-placeholder="Choose Your Favorite">
<ul>
<li>Pizza</li>
<li>Hamburgers</li>
<li>Mac & Cheese</li>
</ul>
</div>
Setting the controller's width is entirely optional, as the dropdown will resize to any content you add to it. If you set the width manually, the content will wrap as needed.
Text Inputs
Atomic Text Inputs with Validation for Incomplete fields or invalid emails
Toggle Switches
Atomic Switches
Checkbox
Atomic Checkboxes
Radio Buttons
Atomic Radio Buttons