{"id":13661097,"url":"https://github.com/richardvenneman/floatl","last_synced_at":"2025-04-05T22:07:18.883Z","repository":{"id":48273992,"uuid":"41684750","full_name":"richardvenneman/floatl","owner":"richardvenneman","description":":cloud: A pragmatic implementation of the Float Label Pattern for the web","archived":false,"fork":false,"pushed_at":"2021-08-03T19:04:53.000Z","size":673,"stargazers_count":199,"open_issues_count":26,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T20:07:57.275Z","etag":null,"topics":["floating-labels","form","javascript","placeholder","typescript","ux"],"latest_commit_sha":null,"homepage":"https://richardvenneman.github.io/floatl/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/richardvenneman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-31T15:47:11.000Z","updated_at":"2024-05-23T23:32:11.000Z","dependencies_parsed_at":"2022-08-31T00:01:36.655Z","dependency_job_id":null,"html_url":"https://github.com/richardvenneman/floatl","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richardvenneman%2Ffloatl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richardvenneman%2Ffloatl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richardvenneman%2Ffloatl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richardvenneman%2Ffloatl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richardvenneman","download_url":"https://codeload.github.com/richardvenneman/floatl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406089,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["floating-labels","form","javascript","placeholder","typescript","ux"],"created_at":"2024-08-02T05:01:29.729Z","updated_at":"2025-04-05T22:07:18.855Z","avatar_url":"https://github.com/richardvenneman.png","language":"TypeScript","readme":"# ☁️ Floatl\n\nA pragmatic implementation of the [Float Label Pattern](https://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction) for the web.\n\n[![NPM](https://img.shields.io/npm/v/floatl.svg)](https://www.npmjs.com/package/floatl)\n[![Build Status](https://semaphoreci.com/api/v1/richardvenneman/floatl/branches/master/badge.svg)](https://semaphoreci.com/richardvenneman/floatl)\n[![Maintainability](https://api.codeclimate.com/v1/badges/c68d489f62e4a80f0ae2/maintainability)](https://codeclimate.com/github/richardvenneman/floatl/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/c68d489f62e4a80f0ae2/test_coverage)](https://codeclimate.com/github/richardvenneman/floatl/test_coverage)\n\n![Floatl](https://i.imgur.com/fjDfAcE.gif)\n\nTry it for yourself: https://richardvenneman.github.io/floatl/\n\n## Features\n\n🤙 Supports textfields and textareas\n\n🏝 Dependency-free and maintained\n\n⚡️ Small size, \u003c 1Kb gzipped\n\n\u003cdetails\u003e\n \u003csummary\u003e🤣 Oldie browser support\u003c/summary\u003e\n \u003ca href=\"https://saucelabs.com/u/richardvenneman\"\u003e\n  \u003cimg src=\"https://saucelabs.com/browser-matrix/richardvenneman.svg\" alt=\"Sauce Test Status\"/\u003e\n \u003c/a\u003e\n\n _* Supports IE8 \u0026 IE9 as well, but I couldn't get them to run on SauceLabs_ 😰\n\u003c/details\u003e\n\n## Installation\n\nFloatl is built primarily for module bundlers such as [Browserify](http://browserify.org) and [webpack](http://webpack.github.io).\nAs such it is distributed via [NPM](https://www.npmjs.com/package/floatl).\n\n```bash\nyarn add floatl # or npm i -S floatl\n```\n\n_An UMD build is available from the [GitHub releases page](https://github.com/richardvenneman/floatl/releases) if you're not using a module bundler. This version adds `Floatl` to the global namespace._\n\n### Styling\n\nAdd the required styling to your app. Please refer to the [GitHub wiki page on styling](https://github.com/richardvenneman/floatl/wiki/Styling) for more information.\n\n## Usage\n\n*NOTE: Check the [GitHub wiki page](https://github.com/richardvenneman/floatl/wiki) for instructions on how to use with React, AngularJS and Stimulus.*\n\nMarkup your `label` and `input` (or `textarea`) with the floatl classes and wrap them in an element with the `floatl` class:\n\n```html\n\u003cdiv class=\"floatl\"\u003e\n  \u003clabel for=\"first_name\" class=\"floatl__label\"\u003eFirst name\u003c/label\u003e\n  \u003cinput name=\"first_name\" class=\"floatl__input\" placeholder=\"First name\" type=\"text\" /\u003e\n\u003c/div\u003e\n```\n\nInstantiate Floatl by passing in the wrapping DOM element:\n\n```javascript\nimport Floatl from \"floatl\";\n\nvar element = document.getElementById(\"my-floatl-element\");\nnew Floatl(element);\n```\n\n### Destroying instances\n\nIf you keep a reference to your Floatl instance, it's easy to remove all of the event handlers by calling the `destroy` instance method:\n\n```javascript\nvar myFloatl = new Floatl(element);\nmyFloatl.destroy()\n```\n\n## Placeholder polyfilling\n\nWhile 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](https://github.com/kristerkari/placekeeper) or [Placeholders.js](https://github.com/jamesallardice/Placeholders.js).\n\n## Motivations\n\nThere are several libraries available that implement the Float Label Pattern, most notably [floatlabels.js](https://github.com/clubdesign/floatlabels.js) and [FloatLabel.js](https://github.com/m10l/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](https://www.cityspotters.com) I'm keeping this library up to date.\n\n## Contributing\n\nEveryone is encouraged to help improve this project. Here are a few ways you can help:\n\n* Report bugs\n* Fix bugs and submit pull requests\n* Write, clarify, or fix documentation\n* Suggest or add new features\n* Write missing tests\n* Improve the TypeScript implementation\n\n## Development \u0026 testing\n\nThis project uses [Jasmine](http://jasmine.github.io) with the [Karma Test Runner](http://karma-runner.github.io/).\n\n* Install dependencies with `yarn install`\n* Run the test suite with: `yarn test` (or `yarn run tdd` for Test Driven Development)\n\n## License\n\nThis library is released under the [MIT License](http://www.opensource.org/licenses/MIT).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichardvenneman%2Ffloatl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichardvenneman%2Ffloatl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichardvenneman%2Ffloatl/lists"}