Breadcrumb
We restyled default Bootstrap breadcrumb and added one more — crisp textish look without any graphics.
<ul class="breadcrumb">
<li>
<a href="#">Link</a>
</li>
</ul>
<div class="breadcrumb-text">
<h4 class="caption">
Shop
</h4>
<p>
<a href="#">Home</a>
<a href="#">Directory</a>
<a href="#">Article</a>
</p>
</div>
Arrows are added through Less as a Flat UI Icons font glyph. You're free to change the delimiter inside breadcrumbs.less:
> li {
position: relative;
text-shadow: none;
&:after {
color: @lightgray;
/* vvv Here. All codes are in the icon-font.less */
content: "\e002";
display: inline-block;
font-family: 'Flat-UI-Icons';
font-size: @base-font-size * .7;
margin: -4px 9px 0 13px;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
}
}
Button
After restyling Bootstrap buttons we decided to add btn-hg size that will be used for main call to actions on a page:
<button class="btn btn-hg btn-primary"> Boss Button </button>
In addition to that we added btn-embossed to make button look more clickable. But still we prefer using them flat.
<button class="btn btn-embossed btn-primary"> Embossed Button </button>
In some cases buttons should become wider. Yes, we did that as well:
<button class="btn btn-default btn-wide"> Cancel </button>
One more new thing: btn-tip. Use it when need to highlight a part of the button text:
<button class="btn btn-primary"> Save <span class="btn-tip">$300</span> </button>
Finally you can use social buttons out of box:
<button class="btn btn-social-pinterest"> <i class="fui-pinterest"></i> 500 </button>
As usual you can set different colors:
<button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-inverse">Inverse</button>
Button groups, toolbar, disabled state also work as expected.
Carousel
Restyled Bootstrap carousel without any new functionality.
Thumbnail label
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.
Thumbnail label
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.
Thumbnail label
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Checkbox
Using flat style checkbox requires JS plugin that creates all custom markup for us. Let's take a look:
Usage via data attributes:
<label class="checkbox" for="checkbox1"> <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox"> Checkbox </label>
Usage via JS:
$(':checkbox').checkbox();
Methods
.checkbox('toggle')
toggles checkbox state from checked
to unchecked and back.
.checkbox('check')
sets checkbox state to checked.
.checkbox('uncheck')
sets checkbox state to unchecked.
$(':checkbox').checkbox('check');
Events
.on('toggle')
Fired when checkbox state changed between
check ↔
uncheck.
.on('change')
Same as toggle.
$(':checkbox').on('toggle', function() {
// Do something
});
Radio
Firm radio also requires using JS plugin. We try making things easy so you won't have to spend huge amount of time playing around with custom components.
Usage via data attributes:
<label class="radio"> <input type="radio" name="group1" value="1" data-toggle="radio"> Radio is off </label> <label class="radio"> <input type="radio" name="group1" value="2" data-toggle="radio" checked> Radio is on </label>
Usage via JS:
$(':radio').radio();
Methods
.radio('check')
sets radio state to checked.
.radio('uncheck')
sets radio state to unchecked.
$(':radio').radio('check');
Events
.on('toggle')
Fired when radio state changed between
check ↔
uncheck.
.on('change')
Same as toggle with just one difference — event sends for each radio which state was changed.
$(':radio').on('toggle', function() {
// Do something
});
Dialog
Dialog is an alternative to alert. It makes more sense to use dialogs when you want to inline a text, buttons and form elements into a one single row.
If you need to extend its functionality please do write your custom code to less/modules/dialog.less and new changes will apear on each code recompile (through CodeKit or whatever tool you're using).
It is highly recommended to let dialog fill the whole page width so it catches more attention.