{"id":22476947,"url":"https://github.com/bluegrassdigital/blue-select","last_synced_at":"2025-03-27T17:43:37.104Z","repository":{"id":82050552,"uuid":"83294195","full_name":"bluegrassdigital/blue-select","owner":"bluegrassdigital","description":"A simple, class-based, styled/custom html select implementation","archived":false,"fork":false,"pushed_at":"2019-02-18T14:41:24.000Z","size":84,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-09T16:37:16.375Z","etag":null,"topics":["class","custom-select","javascript","select"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bluegrassdigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-27T09:48:18.000Z","updated_at":"2023-04-11T15:20:02.000Z","dependencies_parsed_at":"2023-03-07T11:30:33.747Z","dependency_job_id":null,"html_url":"https://github.com/bluegrassdigital/blue-select","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluegrassdigital%2Fblue-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluegrassdigital%2Fblue-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluegrassdigital%2Fblue-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluegrassdigital%2Fblue-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluegrassdigital","download_url":"https://codeload.github.com/bluegrassdigital/blue-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245897100,"owners_count":20690412,"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":["class","custom-select","javascript","select"],"created_at":"2024-12-06T14:09:02.269Z","updated_at":"2025-03-27T17:43:37.094Z","avatar_url":"https://github.com/bluegrassdigital.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# blue-select\n\n\u003cp\u003eA small, flexible custom select widget class. Works seamlessly with \u003ca href=\"https://github.com/bluegrassdigital/blue-widgets\" target=\"_blank\"\u003eblue-widgets\u003c/a\u003e or standalone.\u003c/p\u003e\n\nCheck out the [examples](https://bluegrassdigital.github.io/blue-select/#/page/docs/examples.md)\n\n## Installation\n\nThis is a UMD module, so can be consumed any way you like\n\nInstall via npm `npm install blue-select --save`\n\nOr include `blue-select.js` from the `./dist` folder in your page\n\n### CommonJS\n```javascript\nvar BlueSelect = require('blue-select')\n\nvar el = document.querySelector('#foo')\n\nnew BlueSelect(el)\n```\n\n### ES2015 module\n```javascript\nimport BlueSelect from 'blue-select'\n\nconst el = document.querySelector('#foo')\n\nnew BlueSelect(el)\n```\n\n### Standalone\n\n```html\n\u003cdiv class=\"select\" id=\"Foo\"\u003e\n  \u003cselect name=\"SomeSelect\"\u003e\n    \u003coption value=\"\"\u003ePlease select\u003c/option\u003e\n    \u003coption value=\"1\"\u003eOption 1\u003c/option\u003e\n    \u003coption value=\"2\"\u003eOption 2\u003c/option\u003e\n    \u003coption value=\"3\"\u003eOption 3\u003c/option\u003e\n  \u003c/select\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"blue-select.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar el = document.querySelector('#foo')\n\nnew BlueSelect(el)\n\u003c/script\u003e\n```\n\n## Styling\n\nThe module implements BEM class naming for the fake value and arrow elements it creates. The 'block' class name is taken from the first class present on the container element on which you instantiated the class. So in the above case the classes would be: `.select`, `.select__value` and `.select__arrow`\n\nSome CSS will be required to hide the select and style the arrows and fake value, none is included in the script. This implementation is left to you.\n\nWhen the select is focused the container will have an `is-focused` state class\n\nThis is the base level of styling required:\n\n```CSS\n.custom-select {\n  position: relative;\n}\n.custom-select select {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  opacity: 0;\n  font-size: inherit;\n  z-index: 1;\n}\n\n```\n\n## Contributing to blue-select\n\n[Standard JS](http://standardjs.com/) applies\n\ncamelCase for function and variable names\n\nStandard [Github Flow](https://guides.github.com/introduction/flow/) - branch, submit pull requests\n\n### Getting set up\n\n- Pull the repo\n- run `npm install` or `yarn install`\n- run `npm run build` to compile the dist version\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluegrassdigital%2Fblue-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluegrassdigital%2Fblue-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluegrassdigital%2Fblue-select/lists"}