After restyling the Bootstrap buttons, we have decided to add a new size: btn-hg which will be used for the main call to action buttons on the page:
<button class="btn btn-hg btn-primary"> Boss Button </button>
In addition, we have added btn-embossed to make buttons look more realistic, but we still prefer them flat.
<button class="btn btn-embossed btn-primary"> Embossed Button </button>
In some cases buttons need to become wider. Yes, we have taken care of that as well:
<button class="btn btn-default btn-wide"> Cancel </button>
Another new thing is btn-tip. Use it when you need to highlight a part of the button text:
<button class="btn btn-primary"> Save <span class="btn-tip">$300</span> </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, toolbars, and disabled state also work as expected.
Using flat style checkboxes requires a JS plugin which creates all the custom markup for us. Let's take a look:
<label class="checkbox" for="checkbox1"> <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox"> Checkbox </label>
$(':checkbox').checkbox();
.checkbox('toggle')
toggles the checkbox state from checked
to unchecked and back.
.checkbox('check')
sets the checkbox state to checked.
.checkbox('uncheck')
sets the checkbox state to unchecked.
$(':checkbox').checkbox('check');
.on('toggle')
Fired when the checkbox state changes between
checked and
unchecked.
.on('change')
Same as toggle.
$(':checkbox').on('toggle', function() {
// Do something
});
Styling radio buttons also requires using a JS plugin. We have tried making things easy so you won't have to spend a huge amount of time playing around with custom components.
<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>
$(':radio').radio();
.radio('check')
sets the radio button state to checked.
.radio('uncheck')
sets the radio state to unchecked.
$(':radio').radio('check');
.on('toggle')
Fired when the radio button state changes between
checked and
unchecked.
.on('change')
Same as toggle with just one difference — the event is fired for each radio button that gets a state change.
$(':radio').on('toggle', function() {
// Do something
});
The same Bootstrap dropdown is used as a part of the select, btn-group, nav-tabs and eventually other components to present information as a menu.
Notice dropdown-arrow, which is needed when you want to add a small triangle that visually connects the clickable element with the dropdown menu.
<!-- Default look -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
</u>
</div>
<!-- Inverse look -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
<span class="dropdown-arrow dropdown-arrow-inverse"></span>
<ul class="dropdown-menu dropdown-inverse">
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
</u>
</div>
To highlight the information we added 2 additional states for the dropdown-menu items: selected and highlighted:
<ul class="dropdown-menu">
<li class="selected">
<a href="#">Item</a>
</li>
<li class="highlighted">
<a href="#">Item</a>
</li>
</ul>
The restyled Bootstrap input. Add flat as an additional class to completely remove the borders:
<!-- Default input --> <input type="text" placeholder="Enter something" class="form-control" /> <!-- Without borders --> <input type="text" placeholder="Enter something" class="form-control flat" />
And few sizes:
<input type="text" class="form-control input-hg" placeholder="Huge" /> <input type="text" class="form-control input-lg" placeholder="Large" /> <input type="text" class="form-control" placeholder="Default" /> <input type="text" class="form-control input-sm" placeholder="Small" />
You can have an icon inside:
<div class="form-group"> <input type="text" class="form-control" placeholder="With icon" /> <span class="input-icon fui-check-inverted"></span> </div>
You can have the input with append/prepend options:
<!-- Prepend -->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Prepend" />
</div>
</div>
<!-- Append -->
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Append" />
<span class="input-group-addon">@</span>
</div>
</div>
The different color styles and the disabled state work as expected:
The search form doesn't have any background color set to append/prepend:
The restyled Bootstrap navbar.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#">Flat UI</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav">
<li class="active"><a href="#fakelink">Products</a></li>
<li><a href="#fakelink">Features</a></li>
</ul>
<form class="navbar-form navbar-right" action="#" role="search">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn"><span class="fui-search"></span></button>
</span>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</nav><!-- /navbar -->
Inverted navbar:
<nav class="navbar navbar-inverse" role="navigation"> <!-- Navbar content --> </nav>
Embossed navbar:
<nav class="navbar navbar-inverse navbar-embossed" role="navigation"> <!-- Navbar content --> </nav>
Large navbar:
<nav class="navbar navbar-default navbar-lg" role="navigation"> <!-- Navbar content --> </nav>
Inline forms:
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
Buttons:
<!-- Default Navbar Button --> <button class="btn btn-default navbar-btn" type="button">Sign in</button> <!-- Small Navbar Button --> <button class="btn btn-default navbar-btn btn-sm" type="button">Sign in</button> <!-- Extra Small Navbar Button --> <button class="btn btn-default navbar-btn btn-xs" type="button">Sign in</button>
Text:
<p class="navbar-text">Signed in as Mark Otto</p>
Non-nav links:
<p class="navbar-text navbar-right">Signed in as <a class="navbar-link" href="#">Mark Otto</a></p>
New and Unread indicators:
<!-- ... -->
<ul class="nav navbar-nav">
<li>
<a href="#">
Menu item
<!-- Indicator with number -->
<span class="navbar-new">2</span>
</a>
</li>
</ul>
<!-- ... -->
<!-- ... -->
<ul class="nav navbar-nav">
<li>
<a href="#">
Menu item
<!-- Indicator without number -->
<span class="navbar-unread"></span>
</a>
</li>
</ul>
<!-- ... -->
Fixed to top:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- Navbar content --> </nav>
Fixed to bottom:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <!-- Navbar content --> </nav>
Static top:
<nav class="navbar navbar-default navbar-static-top" role="navigation"> <!-- Navbar content --> </nav>
Short pagination where links have a button look. Used for navigating to the next/prev item.
<ul class="pager">
<li class="previous">
<a href="#">
<span>
<i class="fui-arrow-left"></i>
All messages
</span>
</a>
</li>
<li class="next">
<a href="#">
<i class="fui-arrow-right"></i>
</a>
</li>
</ul>
The restyled Bootstrap pagination. We have added a dropdown navigation, a minimalistic look and a text-only look. We have also added a few color schemes with an alternative layout.
<div class="pagination">
<ul>
<li class="previous">
<a href="#" class="fui-arrow-left"></a>
</li>
<li class="active"><a href="#fakelink">1</a></li>
...
<li><a href="#fakelink">10</a></li>
<li class="next">
<a href="#" class="fui-arrow-right"></a>
</li>
</ul>
</div>
The restyled Bootstrap progress.
<div class="progress"> <div class="progress-bar" style="width: 40%;"></div> <div class="progress-bar progress-bar-warning" style="width: 10%;"></div> <div class="progress-bar progress-bar-danger" style="width: 10%;"></div> <div class="progress-bar progress-bar-success" style="width: 10%;"></div> <div class="progress-bar progress-bar-info" style="width: 10%;"></div> </div>
We have made a custom select due to the inability of styling the system one. It is based on the Selectpicker plug-in with the source slightly modified to meet Bootstrap naming convention.
The component inherits its entire style from the button so you can use all its colors and sizes without any problems. We have also supported the multiple select state as well as the block mode where it takes all the available space.
Grids are supported here as well. For more technical details read the original documentation.
You can write the markup as you would usually do, without any difference:
<select> <option value="0">My Profile</option> <option value="1">My Friends</option> </select> <select multiple="multiple"> <option value="0">My Profile</option> <option value="1" selected>My Friends</option> <option value="2" selected>My Books</option> <option value="3">My CDs</option> </select>
Then transform all the system selects into custom ones with JS:
$("select").selectpicker({style: 'btn-hg btn-primary', menuStyle: 'dropdown-inverse'});
// style: select toggle class name (which is .btn)
// menuStyle: dropdown class name
// You can always select by any other attribute, not just tag name.
// Also you can leave selectpicker arguments blank to apply defaults.
You can use a custom switch instead of a checkbox. It can have 2 styles: circle (default) and square. Drag functionality is also supported.
For more technical details read the original documentation.
<!-- Default switch --> <input type="checkbox" checked data-toggle="switch" /> <!-- Square switch --> <div class="switch switch-square"> <input type="checkbox" checked data-toggle="switch" /> </div> <!-- Switch with customized icons --> <div class="switch switch-square" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fui-cross'></i>"> <input type="checkbox" /> </div>
Used for managing multiple tags with the ability of adding a new one and removing or validating an existing one. It is available in 2 color schemes: grey(default) and primary.
This component is based on the Tags Input Plugin. For more technical details read the official plug-in documentation.
The markup:
<input name="tagsinput" class="tagsinput" value="Clean,Fresh,Modern,Unique" />
JS:
$(".tagsinput").tagsInput();
The restyled jQuery UI slider with added slider segments.
The markup:
<div id="slider" class="ui-slider"></div>
JS:
var $slider = $("#slider");
if ($slider.length > 0) {
$slider.slider({
min: 1,
max: 5,
value: 3,
orientation: "horizontal",
range: "min"
}).addSliderSegments($slider.slider("option").max);
}
How does addSliderSegments() work?
This is an extended jQuery method placed in the application.js file. It calculates how many segments to append to the slider by looking at a slider("option").max which shows a maximum slider value.
// Add segments to a slider
$.fn.addSliderSegments = function (amount, orientation) {
return this.each(function () {
if (orientation == "vertical") {
var output = ''
, i;
for (i = 1; i <= amount - 2; i++) {
output += '<div class="ui-slider-segment" style="top:' + 100 / (amount - 1) * i + '%;"></div>';
};
$(this).prepend(output);
} else {
var segmentGap = 100 / (amount - 1) + "%"
, segment = '<div class="ui-slider-segment" style="margin-left: ' + segmentGap + ';"></div>';
$(this).prepend(segment.repeat(amount - 2));
}
});
};
Vertical slider:
The markup:
<div id="vertical-slider" style="height: 200px;"></div>
The JS:
var $verticalSlider = $("#vertical-slider");
if ($verticalSlider.length) {
$verticalSlider.slider({
min: 1,
max: 5,
value: 3,
orientation: "vertical",
range: "min"
}).addSliderSegments($verticalSlider.slider("option").max, "vertical");
}
Custom slider values:
The markup:
<div id="slider3"> <span class="ui-slider-value first"></span> <span class="ui-slider-value last"></span> </div>
The JS:
var $slider3 = $("#slider3")
, slider3ValueMultiplier = 100
, slider3Options;
if ($slider3.length > 0) {
$slider3.slider({
min: 1,
max: 5,
values: [3, 4],
orientation: "horizontal",
range: true,
slide: function(event, ui) {
$slider3.find(".ui-slider-value:first")
.text("$" + ui.values[0] * slider3ValueMultiplier)
.end()
.find(".ui-slider-value:last")
.text("$" + ui.values[1] * slider3ValueMultiplier);
}
});
slider3Options = $slider3.slider("option");
$slider3.addSliderSegments(slider3Options.max)
.find(".ui-slider-value:first")
.text("$" + slider3Options.values[0] * slider3ValueMultiplier)
.end()
.find(".ui-slider-value:last")
.text("$" + slider3Options.values[1] * slider3ValueMultiplier);
}