{"id":15099255,"url":"https://github.com/buelbuel/dim-template","last_synced_at":"2026-01-06T22:44:24.400Z","repository":{"id":248824162,"uuid":"829819009","full_name":"buelbuel/dim-template","owner":"buelbuel","description":"Web component boilerplate","archived":false,"fork":false,"pushed_at":"2024-07-26T06:12:05.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T17:45:32.200Z","etag":null,"topics":["boilerplate","javascript","no-dependencies","template","web-components","web-standards"],"latest_commit_sha":null,"homepage":"https://www.jsdelivr.com/package/gh/buelbuel/dim","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/buelbuel.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":"2024-07-17T04:07:59.000Z","updated_at":"2024-07-26T06:12:08.000Z","dependencies_parsed_at":"2024-07-26T07:30:11.096Z","dependency_job_id":"13cf0ba3-de86-4beb-b474-90ae7824bdbb","html_url":"https://github.com/buelbuel/dim-template","commit_stats":null,"previous_names":["buelbuel/dim-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buelbuel","download_url":"https://codeload.github.com/buelbuel/dim-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245855134,"owners_count":20683466,"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":["boilerplate","javascript","no-dependencies","template","web-components","web-standards"],"created_at":"2024-09-25T17:08:48.046Z","updated_at":"2026-01-06T22:44:24.353Z","avatar_url":"https://github.com/buelbuel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![](https://data.jsdelivr.com/v1/package/gh/buelbuel/dim/badge?style=rounded)](https://www.jsdelivr.com/package/gh/buelbuel/dim)\n![GitHub License](https://img.shields.io/github/license/buelbuel/dim)\n\nThis is a highly opinionated web component boilerplate using [dim](https://github.com/buelbuel/dim), designed as a sane alternative to the node madness of todays web. It focuses on simplicity and adherence to web standards only, offering some of the quality-of-life features found in lit, but with zero dependencies.\n\n## Why?\n\ndim provides a lightweight alternative to complex web component libraries, focusing on:\n\n-   Simplicity: No build step, no dependencies\n-   Standards: Leveraging web standards and custom elements\n-   Flexibility: Easy to extend and customize\n-   Performance: Minimal overhead and efficient updates\n\n## Features\n\n-   Web standards only\n-   Zero dependencies\n-   Local development through devcontainer with nginx (no additional servers or dependencies)\n-   Simple router\n-   Abstracted HTML and Shadow Element components for less boilerplate\n-   Easy layouts\n-   Deploying is as simple as `git pull` and `sudo nginx`\n\n## Example\n\n```javascript\nconst { BaseElement, html, styleMap } = dim\n\nclass LayoutAltPage extends BaseElement {\n\tconstructor() {\n\t\tsuper()\n\t\tthis.setAttribute('title', 'Alternative Layout')\n\t\tthis.setAttribute('description', 'Alternative layout of the application.')\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.setSidebarContent()\n\t}\n\n\tsetSidebarContent() {\n\t\tconst styles = {\n\t\t\t'text-align': 'center',\n\t\t\tcolor: 'var(--color-gray-100)',\n\t\t}\n\t\tconst sidebarContent = html` \u003cp style=\"${styleMap(styles)}\"\u003eSidebar Content 💧\u003c/p\u003e `\n\t\twindow.dispatchEvent(\n\t\t\tnew CustomEvent('set-sidebar-content', {\n\t\t\t\tdetail: { content: sidebarContent },\n\t\t\t})\n\t\t)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t\u003csection class=\"layout-b-page container\"\u003e\n\t\t\t\t\u003ch1\u003eAlternative Layout.\u003c/h1\u003e\n\t\t\t\t\u003cp\u003eDefine different layouts in index.html using \u0026lt;template\u0026gt;.\u003c/p\u003e\n\t\t\t\u003c/section\u003e\n\t\t`\n\t}\n}\n\nexport default LayoutAltPage.define('layout-alt-page')\n```\n\n## Getting Started\n\n1. Clone the repository\n2. Open the project in VS Code with the Remote - Containers extension\n3. The devcontainer will automatically set up the environment\n4. Access the application at `http://localhost:8080`\n\n## Key Concepts\n\n### Router\n\ndim includes a simple router that allows for easy navigation and layout switching SPA-style. Define your routes in `src/routes.js`.\n\n### Components\n\nCreate reusable components by extending either `BaseElement` or `ShadowElement`:\n\n```javascript\nimport { BaseElement, html } = dim\n\nclass MyComponent extends BaseElement {\n\trender() {\n\t\treturn html\u003cdiv\u003eMy Component\u003c/div\u003e\n\t}\n}\n\ncustomElements.define('my-component', MyComponent)\n```\n\n### Layouts\n\nDefine different layouts in `index.html` using `\u003ctemplate\u003e` tags and specify the layout in your routes.\n\n### Styling\n\nUse the `styleMap` utility for inline styles or include CSS in your component's render method.\n\n### Internationalization\n\n```js\nconst { i18n } = dim\n\ni18n.addTranslations('en', {\n\thello: {\n\t\tworld: 'World',\n\t}\n})\n\nconst { t } = dim\n\n\u003cp\u003e${t('hello.world')}\u003c/p\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuelbuel%2Fdim-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuelbuel%2Fdim-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuelbuel%2Fdim-template/lists"}