Create Floating Form Labels with FloatLabel.js or JVFloat.js

Floating labels are cool. People tend to have pretty strong opinions about floating labels, but overall, I like the idea, and have liked most implementations I’ve seen. The first one I saw was on CodePen. There’s a good article @mds on how the design pattern got started. There’s a lot of other cool thoughts on floating labels, specifically how they enhance (or undermine) the end user’s experience.

Where It Started

The Floating Labels pattern was based on a concept by Matt D. Smith. You can read more about the history of the floating label pattern at this blog post.
Original from Matt D. Smith
A search for “floating labels” on CodePen return about 200 results. You could probably take code from any of those pens and use it to implement a possibly slimmer floating label pattern for yourself. But, how can you choose which is the best way to do floating labels?

I Like Plugins

Personally, I like to roll with jQuery plugins for this sort of thing. The smaller the plugin, the better.
jvfloat
I’ve used JVFloat and really like it. Super easy to implement and the styling is extremely minimal by default, which is a good thing. The default looks decent with pretty much any UI but can easily be modified via CSS.

FloatLabel.js is similar to JVFloat. The CSS that comes with FloatLabel.js is also extremely minimal and can be easily customized to fit your UI. I am going to be using FLoatLabel.js in future projects, like kegplan.io.

Responsive Ready?

FloatLabel.js appears to have better responsive support. In JVFloat, the floated labels and their respective input fields are really scrunched together, in the default CSS at least.
FloatLabel.jsI haven’t witnessed this problem with FloatLabel.js. Check out the FloatLabel.js demo to see how it responds when you resize your browser window. Now have a look at the JVFloat demo, and again, resize your browser window to see how it responds. JVFloat.js doesn’t look as good as FloatLabel.js, it’s that simple.

So, if you’re looking for a good floating labels plugin I’d suggest FloatLabel.js, as it’s more responsive-friendly than JVFloat. Both are great jQuery plugins, though. And one bonus is that JVFloat is also a Zepto plugin.

Installation, finally!

Both are extremely easy to implement on your site. Just include the js and css like you usually would. But here’s more detail.

JVFloat.js

  1. Upload CSS and JS files.
  2. Add <link rel=”stylesheet” href=”css/jvfloat.css”> to your <head> section.
  3. Add <script src=”js/jvfloat.min.js”></script> right before the closing </body> tag. Be sure you’ve loaded jQuery (or Zepto) first.
  4. Initialize JVFloat somewhere in your javascript (or on page directly in script tags) $(‘.float’).jvFloat();
  5. Add class=”float” to text input fields you wish to have floating labels.

FloatLabel.js

FloatingLabels.js is probably quite similar. Since I’ve never used it, I won’t give you step-by-step directions since I have no experience with it (yet). Instead, refer to the README file at the FLoatLabel.js GitHub repo. It has installation instructions, I just haven’t tested them quite yet.

I really suggest you read this post from Brad Frost before voting. He gives some very good, specific examples of pros and cons of floating labels.

In general, do you think floating labels are a good idea?

View Results

Loading ... Loading ...

Comments are open below or you can discuss on Hacker News.

Update December 30, 2013: Also, check out Label Better, by Pete R. It looks really nice and easy to setup and integrate. You can find a demo over here.

GitHub Repository of Front-end Frameworks

I’m partial to Bootstrap, but have recently strayed away from it because I found myself relying too heavily on the default styles. Next I tried Zurb Foundation which I really liked. I used it to build the VPSstat.us blog and main site.

There’s a crap ton of front-end frameworks. Some are barebones, like Skeleton, and others are full featured, like Bootstrap and Foundation.

To help make sense of it all, usabli.ca put together a GitHub repository dedicated to indexing all (or most) of the frontend frameworks. It’s definitely worth checking out, especially if you’re in the market for a new framework or just want to see what options are out there.

Lately I’ve been using Purecss. I think it’s a nice middle ground, providing just enough to get me going quickly on most projects. Purecss can also make use of some Bootstrap elements and scripts, like modals. I’ve been using Purecss with kegplan.io. It forces me to come up with design elements not part of the framework itself, but only where needed.

Your preferred frontend framework?

View Results

Loading ... Loading ...

Update Dec 12, 2013: A few comments were left noting some frameworks that are missing. I added Layers CSS and also fixed the link to Twitter Bootstrap. I’ve also created a branch to add the Inuit.css framework, but there’s currently a pull request pending to add Inuit CSS, however it seems to have stalled. So we’ll see if I can send a pull request in the next day or so for Inuit CSS.

I’ve also submitted pull requests for StackLayout, bootmetro, and hopefully Inuit CSS. I have a personal interest in this repository, so I’ll likely keep contributing to it.

Thanks to Razvan for the Inuit suggestion, and Naeem for the Layers suggestion!

If there’s any other frameworks missing, which I’m sure there are, please mention them here and I’ll get them added to the repository. Or, you can even add to the repository yourself by sending a pull request. Here’s how I typically create a branch for a pull request.

  1. Clone the repo (git clone [email protected]:usablica/front-end-frameworks.git)
  2. Create your feature branch (git checkout -b add-specific-framework)
  3. Make your additions to README.md
  4. Commit your additions to your new branch (git commit -am ‘Add some framework’)
  5. Push to the branch (git push origin add-specific-framework)
  6. Create new Pull Request by going to the original repo. There should be a green “Compare and pull request” button that’s not typically there, click it! Enter your comments and wait for the repo owner to merge your branch or suggest some changes.

Introducing Kegplan.io

I recently made a post over at the VPSstat.us blog just letting folks know what’s going on and why there’s bee such a delay in getting our product out there for everyone to use. Rather than go into that again, just checkout the post at the VPSstat.us Blog.

The gist of it is, a friend and I have been working on a new startup idea. Kegplan.io, a SaaS business that helps liquor stores to better manage their kegs, with many additional features in the pipeline. Ace (the friend), who runs I-35 Spirits in Ankeny, IA, was the inspiration for the idea. Managing kegs, such as pick up dates, return dates, weather or not the customer needs a tapper, etc, can be a real time drain. Most liquor store owners have much, much better things they could be doing.

We’re almost ready to release a private beta and invite some local liquor stores to try it out. “Local” being in Iowa, Central Iowa preferably, but that doesn’t mean we won’t leave Iowa if we can get a few potential customers lined up out of state.

There’s a very, very basic homepage up now at http://kegplan.io. Please forgive me for it’s ugliness, most of my time so far has been spent developing the software that’s installed on customer sites. I’ll be hitting kegplan.io pretty hard in the next few weeks, including incorporating Pure CSS to make development a bit faster, and also provide full responsiveness.

Below is an overview of how to integrate kegplan.io into your website:

  1. Signup for a kegplan.io account
  2. Choose a plan (beta will be totally free, no cc details required)
  3. Choose the keg beers that your store has available from our admin interface, or send us a spreadsheet and we’ll import it just for you
  4. Install our script on the page on your site you’d like to have the keg request form
  5. That’s it! Direct customers to the page you installed the script on and they’ll be able to submit keg requests. Requests are sent to your email and also stored in a database so you can have all sorts of neat reports and graphs.

Since this is a service that can immediately have a positive impact on businesses, and a friends business specifically, I’m focusing on getting kegplan.io launched before putting more work into VPSstat.us. Kegplan is a relatively simple piece of software so getting it production ready shouldn’t take more than a couple of weeks.

All the scripts that are installed on customer websites are hosted on Heroku for maximum availability. The customer control panel is hosted on a pretty beefy VPS from DigitalOcean. We may eventually switch to using DigitalOcean’s private networking with a few different VPS’s in different locations, but I have a feeling Heroku will be plenty sufficient.

Shortly before the private beta release, we’ll be integrating kegplan.io into i35spirits.com. Once it’s been thoroughly tested on i35spirits.com, we’ll drop the private beta. If you’re interested in more info or if you want to get in the private beta right away, email me (Tyler) at tyler at kegplan dot io.

If you’ve got any suggestions on the best, most secure way to deliver scripts for installation on third-party websites, I’d love to hear your thoughts. Right now I’m including a script on customer sites that’s delivered via HTTPS, and basically prints the form on the customer website. And I’m using jQuery and AJAX to send the results back to an SSL enabled domain for storage in a database and to send the necessary notification emails.

Anyway, keep checking kegplan.io for updates. There’ll be a official kegplan.io blog eventually, but right now all announcements will be made here at longren.org, and maybe at the I-35 Spirits website.

Would love to hear any comments. If you know anyone who runs a liquor store or other establishment that sells kegs, please tell them about us! We’re new at this too, so we’ll be helping beta users through every step of the on-boarding process.

Please bear with us as we finish out the customer-facing http://kegplan.io website. I don’t have a lot of time to work on it, other than nights and some weekends, but there’s not a whole lot to do.