Leonardo UI
Flexible
Use as is with the provided vanilla JS, with a framework implementation or with your own custom implementation.
Unobtrusive
Leonardo UI will not set any global stylings but will use your page defaults. This minimizes the risk of conflicting styles when used together with other frameworks.
Developer focus
The developer is always in full control over what's going on. Utilization of BEM classes makes components self-contained and easy-to-use.
Example of a button
<button class="lui-button">Default</button>
Example of a switch
<div class="lui-switch">
<label class="lui-switch__label">
<input type="checkbox" class="lui-switch__checkbox"/>
<span class="lui-switch__wrap">
<span class="lui-switch__inner"></span>
<span class="lui-switch__switch"></span>
</span>
</label>
</div>