Components · Flat UI Free

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 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>

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.

Checkbox

Using flat style checkbox requires JS plugin that creates all custom markup for us. Let's take a look:

Checkbox Checkbox Checkbox Checkbox

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.

Radio is off Radio is on Radio is off Radio is on

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

Dropdown

Same Bootstrap dropdown 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 clickable element with a 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>

For highlighting 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>

Input

Restyled Bootstrap input. Added flat style(to remove borders completely):

<!-- 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" />

With icon inside:

<div class="form-group">
  <input type="text" class="form-control" placeholder="With icon" />
  <span class="input-icon fui-check-inverted"></span>
</div>

Different color styles and disabled state work as expected:

Navbar

Restyled Bootstrap navbar. Added sub-menus.

<div class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse-01"></button>
  </div>    
  <div class="navbar-collapse collapse navbar-collapse-01">
    <ul class="nav navbar-nav navbar-right">
      <!-- Menu items go here -->
      <li>
        <ul>
          <!-- Sub Menu items go here -->
        </ul>
      </li>
    </ul>     
  </div>      
</div>

Inverse style:

<div class="navbar navbar-inverse">
<!-- navbar content -->
</div>

Unread and New 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>
<!-- ... -->

Pager

Short pagination where links have a button look. Used for navigating to a 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

Bootstrap pagination restyling. Added additional dropdown navigation, minimalistic look and text-only look. Also few color schemes with 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>

Progress

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

Custom select due to inability of styling a system one. It is based on Selectpicker plug-in with a slightly modified source to meet Bootstrap naming convention.

Component inherits entire styling from button so you can use all its colors and sizes without any problems. Also we supported multiple select state as well as block mode where it takes all available space.

Grids are supported as well. For more technical details read original documentation.

You can write markup as you 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>

And then transform all system selects into a 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.

Switch

Custom switch can be used instead of checkbox. It has 2 styles: circle(default) and square. Drag is supported.

For more technical details read 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>

Tags input

Used for entering multiple tags with ability to remove/add new and validating already existing ones. Available 2 color schemes: grey(default) and primary.

Based on Tags Input Plugin. For more technical details read official plug-in documentation.

Markup:

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

JS:

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

Tooltip

Restyled Bootstrap tooltip.

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

Slider

Restyled jQuery UI slider. Added slider segments.

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 addSliderSegments() work?

This is an extended jQuery method placed in the application.js. It calculates how many segments to append by looking at a slider("option").max which shows a maximum slider value.

// Add segments to a slider
$.fn.addSliderSegments = function (amount) {
  return this.each(function () {
    var segmentGap = 100 / (amount - 1) + "%"
      , segment = "<div class='ui-slider-segment' style='margin-left: " + segmentGap + ";'></div>";
    $(this).prepend(segment.repeat(amount - 2));
  });
};