{"id":13839207,"url":"https://github.com/yoshuawuyts/base-elements","last_synced_at":"2025-09-14T08:32:28.586Z","repository":{"id":48036631,"uuid":"70557066","full_name":"yoshuawuyts/base-elements","owner":"yoshuawuyts","description":"A selection of configurable native DOM UI elements","archived":false,"fork":false,"pushed_at":"2017-05-24T11:47:40.000Z","size":444,"stargazers_count":41,"open_issues_count":6,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-03T12:24:15.740Z","etag":null,"topics":["base","component","element","reusable"],"latest_commit_sha":null,"homepage":"https://base.choo.io","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/yoshuawuyts.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}},"created_at":"2016-10-11T04:47:50.000Z","updated_at":"2019-10-27T22:34:54.000Z","dependencies_parsed_at":"2022-08-12T17:11:18.541Z","dependency_job_id":null,"html_url":"https://github.com/yoshuawuyts/base-elements","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshuawuyts%2Fbase-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshuawuyts%2Fbase-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshuawuyts%2Fbase-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshuawuyts%2Fbase-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoshuawuyts","download_url":"https://codeload.github.com/yoshuawuyts/base-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232747406,"owners_count":18570494,"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":["base","component","element","reusable"],"created_at":"2024-08-04T16:00:54.902Z","updated_at":"2025-01-08T01:48:09.548Z","avatar_url":"https://github.com/yoshuawuyts.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"# base-elements [![stability][0]][1]\n[![npm version][2]][3] [![build status][4]][5]\n[![downloads][8]][9] [![js-standard-style][10]][11]\n\nA selection of configurable native DOM UI elements. Inspired by\n[rebass](https://rebass-beta.now.sh) and\n[tachyons](https://github.com/mrmrs/tachyons).\n\n## Usage\n```js\nvar Avatar = require('base-elements/avatar')\nvar css = require('sheetify')\nvar html = require('bel')\n\ncss('tachyons')\n\nvar tree = html`\u003cmain\u003e${Avatar()}\u003c/main\u003e`\ndocument.body.appendChild(tree)\n```\n\n## API\n### avatar(src, opts?)\nCreate a circular avatar image.\n`src` is a URL. `opts` can contain:\n- __size:__ (default: `3`) set the size of the element. Enums: `{1, 2, 3, 4,\n  5}`\n- __radius:__ (default: `100`) set the radius of the element. Enums:\n  `{0, 1, 2, 3, 4, 100}`\n- __class:__ (default: `''`) set additional classes on the element\n\n## progress(value, opts?)\nCreate a progress bar.\n`value` is a number between 0 and 1. `opts` can contain:\n- __reverse:__ (default: `'false'`) reverses the progress bar direction\n- __class:__ (default: `''`) set additional classes on the element\n\n## tooltip(text, opts, child)\nCreate a tooltip on a child element from a string. `opts` can contain:\n- __position:__ (default: `'up'`) set the position of the tooltip. Enums:\n  `{ 'up', 'down', 'left', 'right' }`\n- __class:__ (default: `''`) set additional classes on the element\n\n## modal(opts)\nCreate a new modal element. `opts` is similar to the those passed into\n[nanocomponent][nc]. Some properties are slightly different:\n- __render:__ (required). Creates the inner content for the modal element;\n  floated in the center of the page.\n- __onexit:__ called when the element scrolls out of view, or the `esc` key is\n  pressed. Useful to trigger unmounts with\n- __class:__ add extra classes on the element\n\n## See Also\n- [bel](https://github.com/shama/bel)\n- [tachyons](https://github.com/mrmrs/tachyons)\n- [rebass](https://rebass-beta.now.sh)\n- [awesome-choo](https://github.com/yerkopalma/awesome-choo)\n- [awesome-yo-yo](https://github.com/sethvincent/awesome-yo-yo)\n\n## Installation\n```sh\n$ npm install base-elements\n```\n\n## License\n[MIT](https://tldrlegal.com/license/mit-license)\n\n[0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\n[1]: https://nodejs.org/api/documentation.html#documentation_stability_index\n[2]: https://img.shields.io/npm/v/base-elements.svg?style=flat-square\n[3]: https://npmjs.org/package/base-elements\n[4]: https://img.shields.io/travis/yoshuawuyts/base-elements/master.svg?style=flat-square\n[5]: https://travis-ci.org/yoshuawuyts/base-elements\n[8]: http://img.shields.io/npm/dm/base-elements.svg?style=flat-square\n[9]: https://npmjs.org/package/base-elements\n[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[11]: https://github.com/feross/standard\n[nc]: https://github.com/yoshuawuyts/nanocomponent/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoshuawuyts%2Fbase-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoshuawuyts%2Fbase-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoshuawuyts%2Fbase-elements/lists"}