Components

Buttons

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>

Sometime the button on mobile needs to be smaller. To do that we add a new class btn-reduce-on-xs. Check it on a mobile screen size.

<button class="btn btn-hg btn-primary btn-reduce-on-xs">
  Responsive Button
</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>

Finally, a nice way to use social buttons out of the box:

<button class="btn btn-default btn-social-pinterest">
  <span class="fui-pinterest"></span> 500
</button>
<button class="btn btn-social-linkedin">
  <span class="fui-linkedin"></span> 500
</button>
<button class="btn btn-social-stumbleupon">
  <span class="fui-stumbleupon"></span> 500
</button>
<button class="btn btn-social-googleplus">
  <span class="fui-googleplus"></span> 500
</button>
<button class="btn btn-social-facebook">
  <span class="fui-facebook"></span> 500
</button>
<button class="btn btn-social-twitter">
  <span class="fui-twitter"></span> 500
</button>

As usual you can assign different colors to your buttons:

<button class="btn">Button</button>
<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 class="btn btn-link">Link</button>

Button groups, toolbars, and disabled state also work as expected.

Checkboxes and radios

Using flat style checkboxes and radios requires a JS plugin which creates all the custom markup for us. Let's take a look:

The JS:

$(':checkbox').radiocheck();

Methods:

.radiocheck('toggle')
toggles the checkbox state from checked to unchecked and back

.radiocheck('check')
sets the checkbox state to checked

.radiocheck('uncheck')
sets the checkbox state to unchecked

.radiocheck('disable')
sets the checkbox state to disabled

.radiocheck('enable')
unsets the disabled checkbox state

.radiocheck('indeterminate')
sets the checkbox state to indeterminate

.radiocheck('determinate')
unsets the indeterminate checkbox state

.radiocheck('destroy')
destroying the checkbox cover

$(':checkbox').radiocheck('check');

Events:

.on('change.radiocheck')
Fired when the checkbox state changes between checked and unchecked.

.on('destroyed.radiocheck')
Fired when radiocheck destroys itself.

$(':checkbox').on('change.radiocheck', function() {
  // Do something
});

Dropdown

The same Bootstrap dropdown is used as part of the select, btn-group, nav-tabs and eventually other components to present information as a menu.

<!-- Default skin  -->
<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Large button
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Inverted skin  -->
<div class="btn-group">
  <button class="btn btn-inverse dropdown-toggle" type="button" data-toggle="dropdown">
    Large button
  </button>
  <ul class="dropdown-menu dropdown-menu-inverse" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Input

The restyled Bootstrap input.

<input type="text" placeholder="..." class="form-control" />

Add .flat as an additional class to completely remove the borders:

<input type="text" placeholder="..." class="form-control flat" />

You can have a few different 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 has-feedback">
  <input type="text" value="" placeholder="With icon" class="form-control" />
  <span class="form-control-feedback fui-check"></span>
</div>

You can have the input with append/prepend options:

<!-- Prepend -->
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Prepend" />
</div>

<!-- Append -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Append" />
  <span class="input-group-text">@</span>
</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:

Navbar

The restyled Bootstrap navbar.

<nav class="navbar navbar-default navbar-expand-lg" role="navigation">
  <a class="navbar-brand" href="#">Flat UI</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse-01"></button>
  <div class="collapse navbar-collapse" id="navbar-collapse-01">
    <ul class="nav navbar-nav mr-auto">
      <li class="active"><a href="#fakelink">Products</a></li>
      <li><a href="#fakelink">Features</a></li>
    </ul>
    <form class="navbar-form form-inline my-2 my-lg-0" 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 navbar-expand-lg" role="navigation">
<!-- Navbar content -->
</nav>

Embossed navbar:

<nav class="navbar navbar-inverse navbar-embossed navbar-expand-lg" role="navigation">
<!-- Navbar content -->
</nav>

Large navbar:

<nav class="navbar navbar-default navbar-lg navbar-expand-lg" role="navigation">
<!-- Navbar content -->
</nav>

Inline forms:

<form role="search" class="navbar-form form-inline">
  <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:

<div class="collapse navbar-collapse">
  <p class="navbar-text">Signed in as Mark Otto</p>
</div><!-- /.navbar-collapse -->

Non-nav links:

<div class="collapse navbar-collapse justify-content-end">
  <p class="navbar-text navbar-right">Signed in as <a class="navbar-link" href="#">Mark Otto</a></p>
</div><!-- /.navbar-collapse -->

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>

Pager

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>

Pagination

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.

1
2
3
4
5
6
7
8
9
10
- 10–20
- 20–30
- 40–50

<div class="pagination">
  <ul>
    <li class="previous">
      <a href="#" class="fui-arrow-left"></a>
    </li>

    <!-- Make dropdown appear above pagination -->
    <li class="pagination-dropdown dropup">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"></a>
      <!-- Dropdown menu -->
      <ul class="dropdown-menu">
        <li>
          <a href="#">10-20</a>
        </li>
      </ul>
    </li>

    <li class="next">
      <a href="#" class="fui-arrow-right"></a>
    </li>
  </ul>
</div>

The minimal look:

1
2
3
4
5
6
7
8
9
10
- 10–20
- 20–30
- 40–50

<div class="pagination pagination-minimal">
</div>

The text look:

← Previous
1
2
3
4
5
6
7
8
9
10
Newer →

<ul class="pagination-plain">
  <li class="previous">
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">1</a>
  </li>
  <li class="next">
    <a href="#">Newer</a>
  </li>
</ul>

The various color schemes:

OLDER

NEWER

OLDER

NEWER

OLDER

NEWER

OLDER

NEWER

OLDER

NEWER

<div class="pagination pagination-success">
  <a href="#" class="btn btn-success previous">Previous</a>

  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>

  <a href="#" class="btn btn-success next">Next</a>
</div>

Progress

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>

Select

We have made a custom select due to the inability of styling the system one. It is based on the Select2 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 normally do, without any difference:

<select class="form-control select select-primary select-block mbl">
  <optgroup label="Profile">
    <option value="0">My Profile</option>
    <option value="1">My Friends</option>
  </optgroup>
  <optgroup label="System">
    <option value="2">Messages</option>
    <option value="3">My Settings</option>
    <option value="4">Logout</option>
  </optgroup>
</select>

<select multiple="multiple" class="form-control multiselect multiselect-info">
  <option value="0">1</option>
  <option value="1" selected>2</option>
  <option value="2" selected>3</option>
  <option value="3" selected>4</option>
  <option value="4">5</option>
</select>

Then transform all the system selects into custom ones with JS:

$("select").select2({dropdownCssClass: 'dropdown-inverse'});

// dropdownCssClass: 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.

Slider

The restyled jQuery UI slider with added slider segments.

The markup:

<div id="slider"></div>

The 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);
}

Tags input

Used for managing multiple tags with the ability to add a new one and to remove or validate an existing one. It is available in 2 color schemes: grey (default) and primary.

This component is based on Bootstrap Tags Input.

The markup:

<!-- Default tags input -->
<input name="tagsinput" class="tagsinput" data-role="tagsinput" value="Clean, Fresh, Modern, Unique" />

<!-- Primary tags input -->
<div class="tagsinput-primary">
<input name="tagsinput" class="tagsinput" value="School, Teacher, Colleague" />
</div>

Use data attribute data-role="tagsinput" on input to initialize the plugin.

<input name="tagsinput" class="tagsinput" data-role="tagsinput" value="Clean, Fresh, Modern, Unique" />

You can also do this using JavaScript:

$(".tagsinput").tagsinput();

For more technical details read the official plugin documentation.

Tooltip

The restyled Bootstrap tooltip.

Here an example

<p data-toggle="tooltip" title="Tooltip copy"></p>

Typeahead

The restyled Twitter Typeahead.

Example:

To launch Typeahead you need to include the following scripts:

typeahead.jquery.js — UI view
bloodhound.js — suggestion engine

You may include these files separeately, or you can include the only typeahead.bundle.js(which contains both bloodhound.js and typeahead.jquery.js)

The markup:

<div class="form-group">
  <input class="form-control" type="text" id="typeahead-demo-01" />
</div>

The JS:

var states = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.word); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 4,
  local: [
    { word: "Alabama" },
    { word: "Alaska" },
    { word: "Arizona" },
    { word: "Arkansas" },
    { word: "California" },
    { word: "Colorado" }
  ]
});

states.initialize();

$('#typeahead-demo-01').typeahead(null, {
  name: 'states',
  displayKey: 'word',
  source: states.ttAdapter()
});

Useful Resources: Examples, Typeahead docs, Bloodhound docs.

Video player

The restyled Video.js HTML5 video player.

Example:

The markup:

<video class="video-js" controls preload="auto" poster="assets/images/video/poster.jpg" data-setup="{}">
  <source src="http://iurevych.github.com/Flat-UI-videos/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://iurevych.github.com/Flat-UI-videos/big_buck_bunny.webm" type="video/webm">
</video>

To have a working video player you need to include the JS file video-js.

Include a CDN version in your page

<script src="//vjs.zencdn.net/6.6.3/video.js"></script>

Useful Resources: Video.js docs

Buttons

Checkboxes and radios

The JS:

Methods:

Events:

Dropdown

Input

Navbar

Pager

Pagination

Progress

Select

Slider

Switch

Tags input

Tooltip

Typeahead

Video player