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>

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.

Checkboxes

Using flat style checkboxes 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
});

Radio buttons

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

The JS:

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

Methods:

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

.radiocheck('check')
sets the radio button state to checked

.radiocheck('uncheck')
sets the radio button state to unchecked

.radiocheck('disable')
sets the radio button state to disabled

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

.radiocheck('indeterminate')
sets the radio button state to indeterminate

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

.radiocheck('destroy')
destroying the radio button cover

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

Events:

.on('change.radiocheck')
Fired when the radio button state changes.

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

$(':radio').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 <span class="caret"></span>
  </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 <span class="caret"></span>
  </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-addon">@</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-addon">@</span>
</div>

The different color styles and the disabled state work as expected:

<!-- Error state -->
<div class="form-group has-error">
  <input class="form-control" type="text" placeholder="Error" />
</div>

<!-- Warning state -->
<div class="form-group has-warning">
  <input class="form-control" type="text" placeholder="Error" />
</div>

<!-- Success state -->
<div class="form-group has-success">
  <input class="form-control" type="text" placeholder="Error" />
</div>

<!-- Disabled state -->
<div class="form-group">
  <input class="form-control" type="text" placeholder="Disabled" disabled />
</div>

The search form doesn't have any background color set to append/prepend:

<div class="input-group input-group-hg input-group-rounded">
  <span class="input-group-btn">
    <button type="submit" class="btn"><span class="fui-search"></span></button>
  </span>
  <input type="text" class="form-control" placeholder="Search" id="search-query-2">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search" id="search-query-3">
  <span class="input-group-btn">
    <button type="submit" class="btn"><span class="fui-search"></span></button>
  </span>
</div>

You'll need to add some Javascript code in order to append icons (on left position) like search icon above

// Focus state for append/prepend inputs
$('.input-group').on('focus', '.form-control', function () {
  $(this).closest('.input-group, .form-group').addClass('focus');
}).on('blur', '.form-control', function () {
  $(this).closest('.input-group, .form-group').removeClass('focus');
});

Navbar

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>

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>
  <ul class="pagination">
    <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">
        <i class="fui-triangle-up"></i>
      </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.

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" data-role="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

Restyled Bootstrap tooltip.

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

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

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" preload="auto" poster="assets/img/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.js and SWF file video-js.swf. You can do it in 2 ways:

Include a CDN version in your page(swf file will be downloaded automaticaly from CDN):

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

Include a self hosted version of flat-ui.js and seth path to SWF file:

<script src="//example.com/path/to/flat-ui.js"></script>
<script>
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>

The file video-js.swf can be found in ../dist/js/vendor/ folder

Useful Resources: Video.js docs

Buttons

Checkboxes

The JS:

Methods:

Events:

Radio buttons

The JS:

Methods:

Events:

Dropdown

Input

Navbar

Pager

Pagination

Progress

Select

Switch

Tags input

Tooltip

Slider

Typeahead

Video player