{"id":28540205,"url":"https://github.com/zellwk/adaptive-placeholders","last_synced_at":"2025-12-12T03:32:38.049Z","repository":{"id":17139846,"uuid":"19906366","full_name":"zellwk/adaptive-placeholders","owner":"zellwk","description":"Float label pattern built with pure SCSS","archived":false,"fork":false,"pushed_at":"2018-01-03T16:23:22.000Z","size":199,"stargazers_count":128,"open_issues_count":3,"forks_count":20,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-11-22T08:28:18.865Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/zellwk.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2014-05-18T08:38:04.000Z","updated_at":"2025-05-09T08:56:44.000Z","dependencies_parsed_at":"2022-09-10T19:30:51.156Z","dependency_job_id":null,"html_url":"https://github.com/zellwk/adaptive-placeholders","commit_stats":null,"previous_names":["zellwk/adaptiveplaceholders"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/zellwk/adaptive-placeholders","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Fadaptive-placeholders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Fadaptive-placeholders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Fadaptive-placeholders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Fadaptive-placeholders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zellwk","download_url":"https://codeload.github.com/zellwk/adaptive-placeholders/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Fadaptive-placeholders/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27675718,"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","status":"online","status_checked_at":"2025-12-12T02:00:06.775Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-06-09T19:08:42.948Z","updated_at":"2025-12-12T03:32:38.044Z","avatar_url":"https://github.com/zellwk.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Adaptive Placeholders\n====================\n\nAdaptive placeholders is a Sass mixin for an interactive form placeholder initially made by [Danny King](https://twitter.com/dannykingme). \n\nThis Sass mixin comes with additional settings to help you easily configure the placeholder to match your design. \n\nNote: I no longer maintain this repository. \n\n## Screenshot \n\nAdaptive Placeholder works with both text input fields and textarea. \n\n![Adaptive Placeholders Input Demo](screenshots/input.gif \"Adaptive Placeholders Input Demo\")\n![Adaptive Placeholders Textarea Demo](screenshots/textarea.gif \"Adaptive Placeholders Textarea Demo\")\n\n## Requirements \n\n- Sass v3.3 and above \n- You have Normalize.css in the project \n\n## Installation \n\nDownload the project either by downloading the zip, or using Bower\n\n    $ bower install adaptive-placeholders\n\n## Usage \n\nAdd Adaptive Placeholders into your project and import it into your main stylesheet with \n\n    @import \"pathToAdaptivePlaceholders/adaptive-placeholders\"; \n\nWrite your HTML in this way: \n\n    \u003cform action=\"#\"\u003e\n        \u003c!-- input must have an required attribute --\u003e\n        \u003cinput type=\"text\" name=\"input\" id=\"input\" required\u003e\n        \u003c!-- labels must have placeholder and alt attributes --\u003e\n        \u003clabel for=\"input\" placeholder=\"First Placeholder Label\" alt=\"Second Placeholder Label\"\u003e\u003c/label\u003e\n    \u003c/form\u003e\n\nThen call the mixin. \n\n    input {\n        @include adaptive-placeholder();\n    }\n\n## Customizing Adaptive Placeholder. \n\nAdaptive placeholder comes with a set of defaults ready to use. \n\n    $adaptive-placeholder: (\n      height: 3em,\n      margin: 1em,\n      border: 1px,\n      border-radius: 1.5em,\n      font-size: 1em,\n      border-color: #cccccc,\n      label-color: #999999,\n      active-color: #e87e22,\n      valid-color: #23a045,\n      placeholder-background-color: white,\n      textarea: false\n      );\n\nYou can create your own settings for adaptive-placeholder by creating a Sass map named $adaptive-placeholder. Any defaults not overwritten will be added to the Sass map. \n\n    // Defining new defaults\n    $adaptive-placeholder: (\n        height: 4em; \n    )\n\n    // Calling Adaptive placeholders\n    input {\n        @include adaptive-placeholder(); \n    }\n\nThe adaptive placeholders provides you with a optional argument to insert a sass map if you would like to keep the defaults intact, or would like to include a second style. \n\n    input {\n        @include adaptive-placeholder($optional-map); \n    }\n\n## Working with Textareas \n\nTextareas are styled differently from inputs items. To use adaptive placeholders with textareas, write your html the same way as you would use adaptive placeholders for input. \n\n    \u003cform action=\"\"\u003e\n        \u003ctextarea name=\"textarea\" id=\"textarea\" required\u003e\u003c/textarea\u003e\n        \u003clabel for=\"textarea\" placeholder=\"First Textarea Placeholder\" alt=\"Second Textarea Placeholder\"\u003e\u003c/label\u003e\n    \u003c/form\u003e\n\nCreate a new sass map for textareas and call it. Make sure textarea is set to true in the sass map. \n\n    $textarea-placeholder : (\n        height: 18em, \n        border-radius: 6px,\n        textarea: true, \n    )\n    // Call textarea placeholder \n    textarea {\n        @include adaptive-placeholder($textarea-placeholder); \n    }\n\nAlternatively, you can insert the sass map directly into the mixin. \n\n    // Call textarea placeholder \n    textarea {\n        @include adaptive-placeholder((height: 18em, border-radius: 6px, textarea:true)); \n    }\n\n## Browser Tests\n\nWorks on IE10+, Firefox 28+, Chrome 31+, Safari 7+, Opera 22+ \n\n## Changelog \n\n##### 1.1.4\n- Remove Normalize.scss import statement \n\n##### 1.1.0\n- Fix translateY bug with calc for IE 10. \n- Tested and proved to work with IE 10 \u0026 IE 11\n- Reworked bower file structure \n- Placed demo into `app` folder\n\n##### 1.0.1: \n\n- Added browser prefixes for all transitions and transformations used in Adaptive Placeholders\n\n## Credits \n\n@ Danny King for the concept and initial code. The original Less code can be found [here](http://codepen.io/dannykingme/pen/IvFuB)\n\n## License \n\nMIT License. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzellwk%2Fadaptive-placeholders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzellwk%2Fadaptive-placeholders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzellwk%2Fadaptive-placeholders/lists"}