Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romabulani/muffinui
Muffin UI - One Stop Solution for all the components and layouts in your website.
https://github.com/romabulani/muffinui
css3 html html-css-javascript javascript
Last synced: 4 days ago
JSON representation
Muffin UI - One Stop Solution for all the components and layouts in your website.
- Host: GitHub
- URL: https://github.com/romabulani/muffinui
- Owner: romabulani
- License: mit
- Created: 2022-01-28T09:16:31.000Z (almost 3 years ago)
- Default Branch: dev
- Last Pushed: 2022-02-22T10:21:07.000Z (over 2 years ago)
- Last Synced: 2023-03-09T07:41:52.462Z (over 1 year ago)
- Topics: css3, html, html-css-javascript, javascript
- Language: HTML
- Homepage: https://muffinui.netlify.app/
- Size: 4.28 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# [](https://muffinui.netlify.app/) Muffin UI
[](https://open.vscode.dev/romabulani/MuffinUI)
[](https://opensource.org/licenses/MIT)
## Description
Welcome Aboard Fellow Developer, Muffin UI is the user-friendly component library. It helps you to design your responsive website quickly just by importing it in your project.
## Instructions
To use the Muffin UI in your project, copy the below code and add it in the head section of your HTML file.
```
```
## Components
1. [Alerts](#alerts)
2. [Avatars](#avatars)
3. [Badges](#badges)
4. [Buttons](#buttons)
5. [Cards](#cards)
6. [Chips](#chips)
7. [Image](#image)
8. [Input](#input)
9. [Lists](#lists)
10. [Modal](#modal)
11. [Navigation](#navigation)
12. [Rating](#rating)
13. [Simplified Grid](#simplified-grid)
14. [Slider](#slider)
15. [Tabs](#tabs)
16. [Toast](#toast)
17. [Utilities](#utilities)
### Alerts
Alerts give a short, important message in a way that attracts the user's attention without interrupting the user's task. Check out about Alerts [here](https://muffinui.netlify.app/components/alert/alert).
Different Types of Alerts in Muffin UI :
- Default Alerts
- Filled Alerts
- Dismissable Alerts
### Avatars
Avatars are used widely across the website for profiles, blogs and many more. You can find the detailed documentation for avatars [here](https://muffinui.netlify.app/components/avatar/avatar).
Below Avatars are covered by Muffin UI in 4 different sizes extra-small, small, medium and large.
- Image Avatars
- Letter Avatars
- Square Avatars
### Badges
Badges can be combined with Avatars, they are useful for status of user like busy, offline and away. They can also be used on icons for notifications. More detailed information on badges can be found [here](https://muffinui.netlify.app/components/badge/badge).
Badges featured by Muffin UI :
- Badges for Image Avatars
- Round Avatar Badges
- Square AVatar Badges
- Badges for Icons
### Buttons
Buttons are useful in performing various actions on a single click. The Documentation for buttons can be found [here](https://muffinui.netlify.app/components/button/button).
Types of Buttons in Muffin UI :
- Default Buttons
- Outline Buttons
- Link Buttons
- Buttons with Icons
- Floating Action Buttons
### Cards
Cards contain content and actions about a single subject. Cards are surfaces that display content and actions on a single topic. The documentation for cards can be found [here](https://muffinui.netlify.app/components/card/card).
Cards covered in Muffin UI :
- Basic Cards
- Dismissable Cards
- Vertical Cards
- Horizontal Cards
There are more sub categories in the cards.
### Chips
Chips are compact elements that represent an input, attribute, or action. Check out the documentation [here](https://muffinui.netlify.app/components/chips/chips).
Chips featured by Muffin UI :
- Default Chips
- Chips with Icons
- Dynamic Chips
### Image
Images are integral part of the website, useful for profile, logos and carousels. More information of images can be found [here](https://muffinui.netlify.app/components/image/image).
Types of Images in Muffin UI :
- Responsive
- Round
### Input
Inputs are used to take data from the users, mostly by forms. Check out [here](https://muffinui.netlify.app/components/input/input) for more information.
### Lists
Lists are a continuous group of text or images. [Here](https://muffinui.netlify.app/components/lists/lists) is the documentation for lists.
Types of Lists featured in Muffin UI :
- Ordered
- Unordered
- Stacked
There are more sub categories in the lists.
### Modal
Modals are used to show interactive dialogs and notifications to your website users. Further information on CSS classes can be found [here](https://muffinui.netlify.app/components/modal/modal).
Modals in Muffin UI :
- Default
- List
- Scrollable
### Navigation
Navigation are helpful for switching between different pages. Check out Navigation Documentation [here](https://muffinui.netlify.app/components/navigation/navigation).
Navigations featured in Muffin UI :
- Simple Navigation
- Navigation with Icons
### Rating
Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own. Check out more information [here](https://muffinui.netlify.app/components/rating/rating).
### Simplified Grid
Grids adapt to screen size and orientation, ensuring consistency across layouts. For more information, check out the [documentation](https://muffinui.netlify.app/components/grid/grid).
Types of Grid Formats in Muffin UI :
- Grid 50-50
- Grid 30-70
- 3 Column Grid
### Slider
Sliders allow users to make selections from a range of values. Check out [documentation](https://muffinui.netlify.app/components/slider/slider).
### Tabs
Tabs are useful when we have to navigate to different sections on the same page. Check out [here](https://muffinui.netlify.app/components/tabs/tabs).
Tabs featured in Muffin UI :
- Fixed Tabs
- Tabs with Left Icon
- Tabs with Top Icon
### Toast
Toasts provide brief notifications. Check out the [documentation](https://muffinui.netlify.app/components/toast/toast).
### Utilities
Utilities are helpful in maintaining the consistency all the pages while building the website. For more information, visit the [documentation](https://muffinui.netlify.app/components/utilities/utilities).
## Techstack
- HTML
- CSS
- Javascript
## Best Practices
- WebP format of images is used in the Muffin UI which ensure fast loading and less render blocking.
- For CSS, alphabetical ordering of the properties is followed which helps in easy debugging.
- Use of reponsive units and media queries to make it Mobile Responsive.
- The properties like aria-label and rel are added in anchor tags which increase the accessibility.
## Future Enhancements
- Dark Mode
## Glimpse of Muffin UI
https://user-images.githubusercontent.com/42478246/154838778-35907646-a562-46a7-a073-35d23c94faa8.mp4
## Connect with me!
[](https://twitter.com/romabulani)
[](https://www.linkedin.com/in/romabulani/)
[](https://romabulani.hashnode.dev/)