Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sanmeet007/custom-elements
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.
https://github.com/sanmeet007/custom-elements
css-library css3 custom-elements ui-components
Last synced: about 5 hours ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/sanmeet007/custom-elements
- Owner: Sanmeet007
- License: gpl-3.0
- Created: 2023-01-28T06:35:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-05T20:25:51.000Z (7 days ago)
- Last Synced: 2025-01-05T21:20:59.402Z (7 days ago)
- Topics: css-library, css3, custom-elements, ui-components
- Language: JavaScript
- Homepage: https://sanmeet007.github.io/custom-elements/
- Size: 65.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# **Custom Elements - My Design**
**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.
---
## 🛠️ **Features**
- **Comprehensive Component Library**: Includes various components like `container`, `box`, `button`, `modal`, `popover`, `icon-button`, and more.
- **Shadow DOM Support**: Each component is self-contained with scoped styles and logic.
- **Customizable**: Easily modify styles and extend components to suit your needs.
- **Responsive**: Built to work seamlessly on all screen sizes.
- **Lightweight**: No external dependencies, just pure web components.
---
## 📦 **Components Overview**
Here’s a detailed list of components available in the **Custom Elements** library:
1. **``**
A layout wrapper to structure your content in a responsive manner.
- **Use Case**: To group and align UI elements neatly.
```html
Welcome to My Design
```
2. **``**
A flexible container for creating boxed layouts.
- **Use Case**: To wrap buttons, icons, or other UI elements.
```html
Click Me
```
3. **``**
Buttons with different variants like `outlined` and `contained`.
- **Use Case**: For actions like opening modals or triggering events.
```html
Submit
```
4. **``**
Compact buttons with icons for lightweight actions.
- **Use Case**: Toolbars, navigation, and quick actions.
```html
menu
```
5. **``**
A modal/dialog box for displaying additional content or actions.
- **Use Case**: Pop-ups, forms, or important alerts.
```html
Modal Title
This is a modal body.
```
6. **``**
A contextual popover for showing additional information.
- **Use Case**: Tooltips or small UI overlays.
```html
This is a popover content.
```
7. **``**
A horizontal line to separate content sections.
- **Use Case**: To improve content readability.
```html
```
8. **``**
A customizable icon component.
- **Use Case**: To display icons anywhere in the UI.
```html
home
```
9. **``**
A typography component for styled text.
- **Use Case**: Headers, paragraphs, or any text content.
```html
Hello World
```
10. **``**
A skeleton loader for improving perceived loading performance.
- **Use Case**: Placeholders during data fetching.
```html
```
11. **``**
A styled text field for inputting data.
- **Use Case**: Forms or search bars.
```html
```
---
## 📄 **Usage**
Here’s how to use **My Design** in your project:
1. Clone the repository:
```bash
git clone https://github.com/Sanmeet007/custom-elements.git
cd custom-elements
```
2. Include the Material Icons library and the custom elements script in your project, add the following code to the `` and `` sections of your HTML:
```html
```
3. Start using components in your HTML:
```html
My Design
Click me
```
---
## 🎨 **Styling**
Customize components by overriding CSS variables:
Example: Change the primary color of buttons:
```css
:root {
--md-button-primary-color: #ff5722;
}
```
---
## 🤝 **Contributing**
We welcome contributions! Feel free to:
- Fork the repository.
- Create new components or enhance existing ones.
- Submit a pull request or file an issue.
---
### 🌌 **Discover the simplicity of reusable web components with Custom Elements!**