Floatl

A library agnostic, pragmatic implementation of the Float Label Pattern.

Online example: https://richardvenneman.github.io/floatl/example

Features

• CommonJS compatible
• Library agnostic (no jQuery dependency)
• Small (just over 2 KB minified)
• Supports textfields and textareas
• Customizable plain CSS styling
• Browser support all the way down to IE8

Installation

Download the built versions of the JavaScript and CSS files and include them in your app.

You can also install Floatl via NPM or Bower:

npm install floatl --save

# or

bower install floatl --save

Usage

First make sure the script is loaded. If you use a module bundler such as Browserify or Webpack, you can simply require the floatl package, otherwise include the script on your webpage.

Markup your label and input or textarea with the floatl classes and wrap them in an element with the floatl class:

<div class="floatl">
  <label class="floatl__label">First name</label>
  <input class="floatl__input" placeholder="First name" type="text"></div>
</div>

Instantiate Floatl by passing in a DOM element:

var element = document.querySelectorAll('js-floatl')[0];

// Module approach
var floatl = require('float');
new floatl(element);

// Regular approach with the global Floatl function
new Floatl(element);

// When using jQuery, you can pass in the jQuery object
new Floatl($('.js-floatl'))

Usage with Ruby on Rails

You can use Floatl in your Rails project with rails-assets. When using rails-assets, include the built (non-module) version which is also distributed via Bower:

# application.js.coffee
#= require floatl/dist/js/floatl.js

// application.css.scss
//= require floatl/dist/css/floatl.scss

CSS styling

All styling (including transitions) is basically done by toggling CSS classes. Because of this it is easy to apply your own styling. Take a look at the default styling to get an idea of where to override attributes. Or check out this Gist with example styling – we currently apply this on our site.

Browser support

The CSS is Autoprefixed with the following string: "> 5%, ie >= 8".

While the JavaScript supports IE8+, Floatl aims to be good at Floating Labels and only that. The Floating Labels Pattern works best with placeholders and it is therefor recommended to install legacy browser placeholder support should you need it, for example Placekeeper or Placeholders.js.

Motivations

There are several libraries available that implement the Float Label Pattern, most notably floatlabels.js and FloatLabel.js. However, these libraries did not quite fulfill the requisites I had in mind (see features above) and I did not find any Bower compatible libraries when I started this project. Furthermore I like to use a well-maintained library. Since we're using this library in production at Cityspotters I'm keeping this library up to date.

TODO

• Support auto binding of elements with js-floatl className
• Refactor CoffeeScript source file to ES6

Contributing

Everyone is encouraged to help improve this project. Here are a few ways you can help:

• Report bugs
• Fix bugs and submit pull requests
• Write, clarify, or fix documentation
• Suggest or add new features
• Write missing tests

Development & testing

First install the dependencies with npm install. This project uses some Gulp tasks to build the CSS and JavaScript files. See the Gulpfile for more information.

This project uses Jasmine with the Karma Test Runner.

• Install dependencies with npm install
• Run Karma: ./node_modules/karma/bin/karma start*
• Add tests in test/floatlTest.coffee and implementation in lib/coffee/floatl.coffee

As mentioned in the Karma installation instructions you can also install karma-cli globally with npm install -g karma-cli. After installation you can run Karma simply by typing karma.

License

This library is released under the MIT License.