Fuel UX sample
by Steve Coffman
HTML
<script src="//www.fuelcdn.com/fuelux/3.3.0/js/fuelux.min.js"></script>
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.3.0/css/fuelux.min.css">
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux-mctheme/1.1.0/css/fuelux-mctheme.min.css">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="small text-muted text-uppercase">radio</div>
<div class="radio" data-initialize="radio">
<label class="radio-custom">
<input class="sr-only" name="filter-status" type="radio" value="all" checked />All</label>
</div>
<div class="radio" data-initialize="radio">
<label class="radio-custom">
<input class="sr-only" name="filter-status" type="radio" value="draft" />Draft</label>
</div>
<div class="radio" data-initialize="radio">
<label class="radio-custom">
<input class="sr-only" name="filter-status" type="radio" value="active" />Active</label>
</div>
<div class="radio" data-initialize="radio">
<label class="radio-custom">
<input class="sr-only" name="filter-status" type="radio" value="archived" />Archived</label>
</div>
<div class="small text-muted text-uppercase">checkbox</div>
<div class="checkbox" data-initialize="checkbox">
<label class="checkbox-custom">
<input class="sr-only" name="filter-category" type="checkbox" value="all" checked />All</label>
</div>
<div class="checkbox" data-initialize="checkbox">
<label class="checkbox-custom">
<input class="sr-only" name="filter-category" type="checkbox" value="category1" />Category1</label>
</div>
<div class="checkbox" data-initialize="checkbox">
<label class="checkbox-custom">
...
CSS
.container-fluid {
margin-top: 10px;
}
/*Feel free to add any of your custom CSS here*/