{"id":18316928,"url":"https://github.com/keenlycode/adapter","last_synced_at":"2025-04-05T21:32:11.592Z","repository":{"id":63342472,"uuid":"565332973","full_name":"keenlycode/adapter","owner":"keenlycode","description":"Empowering Next-Generation UI Style with ES6 and Web Components ","archived":false,"fork":false,"pushed_at":"2025-02-18T16:33:40.000Z","size":2179,"stargazers_count":6,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T11:16:34.802Z","etag":null,"topics":["css","javascript","web-component"],"latest_commit_sha":null,"homepage":"https://keenlycode.github.io/adapter/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keenlycode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-11-13T03:40:23.000Z","updated_at":"2025-02-18T14:54:35.000Z","dependencies_parsed_at":"2023-12-02T20:41:16.949Z","dependency_job_id":"57fae683-9f2f-4786-9317-f27a96a098d1","html_url":"https://github.com/keenlycode/adapter","commit_stats":null,"previous_names":["keenlycode/adapter","keenly-coding/adapter","nitipit/adapter"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenlycode%2Fadapter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenlycode%2Fadapter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenlycode%2Fadapter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenlycode%2Fadapter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keenlycode","download_url":"https://codeload.github.com/keenlycode/adapter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166169,"owners_count":20894654,"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":["css","javascript","web-component"],"created_at":"2024-11-05T18:04:17.330Z","updated_at":"2025-04-05T21:32:11.586Z","avatar_url":"https://github.com/keenlycode.png","language":"TypeScript","readme":"\u003ch1 style=\"text-align: center\"\u003e✨ Adapter 🎉\u003c/h1\u003e\n\n\u003e \u003ch2 style=\"margin-top: 0; padding: 1rem;\"\u003e\n\u003e Empowering Next-Generation UI Style with ES6 and Web Components\n\u003e \u003c/h2\u003e\n\n\u003cul style=\"font-size: 1.25rem;\"\u003e\n   \u003cli\u003eBuilt with ❤️\u003c/li\u003e\n   \u003cli\u003eJust \u003cstrong\u003e3 kB\u003c/strong\u003e (minified + gzip)\u003c/li\u003e\n\u003c/ul\u003e\n\n## Sample Usage\n```js\nimport { Adapter } from `https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm`;\n\nconst cardStyle = `\n   display: block;\n   min-height: 5rem;\n   width: 100%;\n   color: red;\n`;\n\nclass Card extends Adapter {\n   /** Style is isolated in defined tag name. */\n   static css = cardStyle;\n};\n\n/** Don't worry about tag's name conflicted, choose your own. */\nCard.define('el-card');\n\n/**\n * More style can be added later, class can also be used.\n * This will render CSS as `el-card.text-blue { color: blue }`\n */\nCard.addStyle(`\n   \u0026.text-blue { color: blue }\n`);\n\n/** Replace component styles with the base style `cardStyle`,\n * This is just one from many way to do it.\n */\nCard.css = cardStyle;\n\n/** Dynamically create stylable element \u003cel-card\u003e\n * which inherit all styles from `Card`\n */\nconst card = new Card();\n\n/** \u003cel-card\u003e object has the same API as `Card`\n * but style will be specific for this element only.\n */\ncard.css = `display: flex;`;\ncard.addStyle(`color: black;`);\ndocument.body.append(card);\n```\n\n## Software Development 💻\n\n### Project Board\nhttps://github.com/orgs/keenlycode/projects/2\n\n### Prerequisites\n- NodeJS : https://nodejs.org/en/\n- Git : https://git-scm.com/\n\n### Prerequisites for document creation.\n- Python \u003e= 3.10 : https://www.python.org/\n\n### 🛠️ Setup\n1. Clone repository from github\n```shell\n$ git clone https://github.com/keenlycode/adapter.git\n$ cd adapter\n```\n\n2. Install node dependencies\n```shell\n$ npm install\n```\n\n### 🗃️ Build Library\n```shell\n# Build\n$ npm run dist\n```\n\n### 🔍 Run Test\n```shell\n$ npm run test\n```\n\n### Document Creation (Python 🐍)\n```shell\n$ python -m venv venv\n$ source venv/bin/activate\n$ pip install -r require.pip\n$ npm run docs\n```\n\n## Special Thanks\n2024-01-09\n- [Joe Pea](https://github.com/trusktr): for a lot of suggestions\n  at the very beginning about Mixin, Style Rendering and Shadow DOM.\n  Knowing him by chance when I found interesting project : [Lume.io](https://lume.io) 👍️\n  \n\u003cdiv style=\"min-height: 20vh;\"\u003e\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenlycode%2Fadapter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeenlycode%2Fadapter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenlycode%2Fadapter/lists"}