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.
- 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.
Here’s a detailed list of components available in the Custom Elements library:
-
<md-container>
A layout wrapper to structure your content in a responsive manner.- Use Case: To group and align UI elements neatly.
<md-container> <md-typography variant="h1">Welcome to My Design</md-typography> </md-container>
-
<md-box>
A flexible container for creating boxed layouts.- Use Case: To wrap buttons, icons, or other UI elements.
<md-box> <md-button>Click Me</md-button> </md-box>
-
<md-button>
Buttons with different variants likeoutlinedandcontained.- Use Case: For actions like opening modals or triggering events.
<md-button variant="contained">Submit</md-button>
-
<md-icon-button>
Compact buttons with icons for lightweight actions.- Use Case: Toolbars, navigation, and quick actions.
<md-icon-button target="#my-popover"> <md-icon>menu</md-icon> </md-icon-button>
-
<md-modal>
A modal/dialog box for displaying additional content or actions.- Use Case: Pop-ups, forms, or important alerts.
<md-modal id="my-modal"> <md-typography variant="h2">Modal Title</md-typography> <md-typography>This is a modal body.</md-typography> </md-modal>
-
<md-popover>
A contextual popover for showing additional information.- Use Case: Tooltips or small UI overlays.
<md-popover id="my-popover"> <md-typography>This is a popover content.</md-typography> </md-popover>
-
<md-divider>
A horizontal line to separate content sections.- Use Case: To improve content readability.
<md-divider></md-divider>
-
<md-icon>
A customizable icon component.- Use Case: To display icons anywhere in the UI.
<md-icon>home</md-icon>
-
<md-typography>
A typography component for styled text.- Use Case: Headers, paragraphs, or any text content.
<md-typography variant="h1">Hello World</md-typography>
-
<md-skeleton>
A skeleton loader for improving perceived loading performance.- Use Case: Placeholders during data fetching.
<md-skeleton></md-skeleton>
-
<md-textfield>
A styled text field for inputting data.- Use Case: Forms or search bars.
<md-textfield placeholder="Enter your name"></md-textfield>
Here’s how to use My Design in your project:
-
Clone the repository:
git clone https://github.com/Sanmeet007/custom-elements.git cd custom-elements -
Include the Material Icons library and the custom elements script in your project, add the following code to the
<head>and<body>sections of your HTML:<!-- Add this in the <head> section to import Material Icons --> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"> <!-- Add this before the closing </body> tag to include the custom elements script --> <script type="module" src="custom-elements.js"></script>
-
Start using components in your HTML:
<md-container> <md-typography variant="h1">My Design</md-typography> <md-box> <md-button variant="contained">Click me</md-button> </md-box> </md-container>
Customize components by overriding CSS variables:
Example: Change the primary color of buttons:
:root {
--md-button-primary-color: #ff5722;
}We welcome contributions! Feel free to:
- Fork the repository.
- Create new components or enhance existing ones.
- Submit a pull request or file an issue.