Bento CSS is a scss based mini CSS framework. It is meant to pair well with Bootstrap's grid system and will be soon integrated as part of scss partial files.
To use the framework use the css file located stylesheets/style.css
.
<button class="btn">Default Button</button>
<button class="btn-outline">Outlined Button</button>
<button class="btn--green">Green Button</button>
<button class="btn--red">Red Button</button>
<button class="btn--yellow">Yellow Button</button>
<div class="input-group col-lg-6 col-sm-6">
<label class="label">Label</label>
<input class="input" type="text" placeholder="Example">
</div>
<div class="input-group col-lg-6 col-sm-6">
<label class="label">Label</label>
<select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<span class="select-arrow"></span>
</div>
<div class="input-group col-lg-12 col-sm-12">
<input class="checkbox" type="checkbox" id="first" name="first">
<label class="label" for="first">Option 1</label>
<input type="checkbox" class="checkbox" id="second" name="second">
<label class="label" for="second">Option 2</label>
</div>
<div class="input-group col-lg-12 col-sm-12">
<input class="radio" type="radio" name="group" id="third">
<label for="third" class="label">Option 1</label>
<input class="radio" type="radio" name="group" id="fourth">
<label for="fourth" class="label">Option 2</label>
</div>
<div class="clearfix">
... FLoating elements
</div>
Margin top is great for spacing between components vertically.
<div class="m-top--1">
... 1 representing 1rem (goes up to 5)
</div>
Padding top is better used only in rare occasions i.e. Pushing content down hidden by a fixed navigation bar.
<div class="pad-top--1">
... 1 representing 1rem (goes up to 5)
</div>
<p class="align-left">Text</p>
<p class="align-right">Text</p>
<p class="align-center">Text</p>
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="center"> ... </div>
- Navigation Bar and Dropdown
- Status Feedback
- Tooltips
- Empty State Call to action
- Modals