{"id":24149097,"url":"https://github.com/sanmeet007/custom-elements","last_synced_at":"2026-02-14T16:03:22.051Z","repository":{"id":65847398,"uuid":"594315705","full_name":"Sanmeet007/custom-elements","owner":"Sanmeet007","description":"Custom Elements is a powerful library that enables rapid web development by allowing you to create reusable, encapsulated components with minimal HTML, CSS, and JavaScript. It simplifies the process of building scalable, maintainable web applications.","archived":false,"fork":false,"pushed_at":"2025-01-05T20:25:51.000Z","size":67,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-19T18:57:46.769Z","etag":null,"topics":["css-library","css3","custom-elements","ui-components"],"latest_commit_sha":null,"homepage":"https://sanmeet007.github.io/custom-elements/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sanmeet007.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-28T06:35:05.000Z","updated_at":"2025-01-05T20:25:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"fcb8db5e-1d8c-4d0f-811e-d2b94a5c6294","html_url":"https://github.com/Sanmeet007/custom-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sanmeet007/custom-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanmeet007%2Fcustom-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanmeet007%2Fcustom-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanmeet007%2Fcustom-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanmeet007%2Fcustom-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sanmeet007","download_url":"https://codeload.github.com/Sanmeet007/custom-elements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanmeet007%2Fcustom-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29448962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T15:52:44.973Z","status":"ssl_error","status_checked_at":"2026-02-14T15:52:11.208Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css-library","css3","custom-elements","ui-components"],"created_at":"2025-01-12T08:35:31.441Z","updated_at":"2026-02-14T16:03:22.013Z","avatar_url":"https://github.com/Sanmeet007.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Custom Elements - My Design**  \n\n**Custom Elements** is an open-source library that provides lightweight, reusable, and modular UI components built with Shadow DOM for encapsulation. With **My Design (md)**, you can effortlessly create stunning and modern web applications.  \n\n---\n\n## 🛠️ **Features**  \n\n- **Comprehensive Component Library**: Includes various components like `container`, `box`, `button`, `modal`, `popover`, `icon-button`, and more.  \n- **Shadow DOM Support**: Each component is self-contained with scoped styles and logic.  \n- **Customizable**: Easily modify styles and extend components to suit your needs.  \n- **Responsive**: Built to work seamlessly on all screen sizes.  \n- **Lightweight**: No external dependencies, just pure web components.  \n\n---\n\n## 📦 **Components Overview**  \n\nHere’s a detailed list of components available in the **Custom Elements** library:  \n\n1. **`\u003cmd-container\u003e`**  \n   A layout wrapper to structure your content in a responsive manner.  \n   - **Use Case**: To group and align UI elements neatly.\n\n   ```html\n   \u003cmd-container\u003e\n     \u003cmd-typography variant=\"h1\"\u003eWelcome to My Design\u003c/md-typography\u003e\n   \u003c/md-container\u003e\n   ```\n\n2. **`\u003cmd-box\u003e`**  \n   A flexible container for creating boxed layouts.  \n   - **Use Case**: To wrap buttons, icons, or other UI elements.  \n\n   ```html\n   \u003cmd-box\u003e\n     \u003cmd-button\u003eClick Me\u003c/md-button\u003e\n   \u003c/md-box\u003e\n   ```\n\n3. **`\u003cmd-button\u003e`**  \n   Buttons with different variants like `outlined` and `contained`.  \n   - **Use Case**: For actions like opening modals or triggering events.  \n\n   ```html\n   \u003cmd-button variant=\"contained\"\u003eSubmit\u003c/md-button\u003e\n   ```\n\n4. **`\u003cmd-icon-button\u003e`**  \n   Compact buttons with icons for lightweight actions.  \n   - **Use Case**: Toolbars, navigation, and quick actions.  \n\n   ```html\n   \u003cmd-icon-button target=\"#my-popover\"\u003e\n     \u003cmd-icon\u003emenu\u003c/md-icon\u003e\n   \u003c/md-icon-button\u003e\n   ```\n\n5. **`\u003cmd-modal\u003e`**  \n   A modal/dialog box for displaying additional content or actions.  \n   - **Use Case**: Pop-ups, forms, or important alerts.  \n\n   ```html\n   \u003cmd-modal id=\"my-modal\"\u003e\n     \u003cmd-typography variant=\"h2\"\u003eModal Title\u003c/md-typography\u003e\n     \u003cmd-typography\u003eThis is a modal body.\u003c/md-typography\u003e\n   \u003c/md-modal\u003e\n   ```\n\n6. **`\u003cmd-popover\u003e`**  \n   A contextual popover for showing additional information.  \n   - **Use Case**: Tooltips or small UI overlays.  \n\n   ```html\n   \u003cmd-popover id=\"my-popover\"\u003e\n     \u003cmd-typography\u003eThis is a popover content.\u003c/md-typography\u003e\n   \u003c/md-popover\u003e\n   ```\n\n7. **`\u003cmd-divider\u003e`**  \n   A horizontal line to separate content sections.  \n   - **Use Case**: To improve content readability.  \n\n   ```html\n   \u003cmd-divider\u003e\u003c/md-divider\u003e\n   ```\n\n8. **`\u003cmd-icon\u003e`**  \n   A customizable icon component.  \n   - **Use Case**: To display icons anywhere in the UI.  \n\n   ```html\n   \u003cmd-icon\u003ehome\u003c/md-icon\u003e\n   ```\n\n9. **`\u003cmd-typography\u003e`**  \n   A typography component for styled text.  \n   - **Use Case**: Headers, paragraphs, or any text content.  \n\n   ```html\n   \u003cmd-typography variant=\"h1\"\u003eHello World\u003c/md-typography\u003e\n   ```\n\n10. **`\u003cmd-skeleton\u003e`**  \n    A skeleton loader for improving perceived loading performance.  \n    - **Use Case**: Placeholders during data fetching.  \n\n    ```html\n    \u003cmd-skeleton\u003e\u003c/md-skeleton\u003e\n    ```\n\n11. **`\u003cmd-textfield\u003e`**  \n    A styled text field for inputting data.  \n    - **Use Case**: Forms or search bars.  \n\n    ```html\n    \u003cmd-textfield placeholder=\"Enter your name\"\u003e\u003c/md-textfield\u003e\n    ```\n\n---\n\n## 📄 **Usage**  \n\nHere’s how to use **My Design** in your project:  \n\n1. Clone the repository:  \n   ```bash\n   git clone https://github.com/Sanmeet007/custom-elements.git\n   cd custom-elements\n   ```\n\n2. Include the Material Icons library and the custom elements script in your project, add the following code to the `\u003chead\u003e` and `\u003cbody\u003e` sections of your HTML:\n   ```html\n   \u003c!-- Add this in the \u003chead\u003e section to import Material Icons --\u003e\n   \u003clink href=\"https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp\" rel=\"stylesheet\"\u003e\n\n   \u003c!-- Add this before the closing \u003c/body\u003e tag to include the custom elements script --\u003e\n   \u003cscript type=\"module\" src=\"custom-elements.js\"\u003e\u003c/script\u003e\n   ```\n\n3. Start using components in your HTML:  \n\n   ```html\n   \u003cmd-container\u003e\n     \u003cmd-typography variant=\"h1\"\u003eMy Design\u003c/md-typography\u003e\n     \u003cmd-box\u003e\n       \u003cmd-button variant=\"contained\"\u003eClick me\u003c/md-button\u003e\n     \u003c/md-box\u003e\n   \u003c/md-container\u003e\n   ```\n\n---\n\n## 🎨 **Styling**  \n\nCustomize components by overriding CSS variables:  \n\nExample: Change the primary color of buttons:  \n```css\n:root {\n  --md-button-primary-color: #ff5722;\n}\n```  \n\n---\n\n## 🤝 **Contributing**  \n\nWe welcome contributions! Feel free to:  \n- Fork the repository.  \n- Create new components or enhance existing ones.  \n- Submit a pull request or file an issue.  \n\n---\n\n### 🌌 **Discover the simplicity of reusable web components with Custom Elements!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanmeet007%2Fcustom-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanmeet007%2Fcustom-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanmeet007%2Fcustom-elements/lists"}