Live Demo Link: https://aesthetic-ui-dev.netlify.app
Aesthetic UI is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Built entirely using HTML, CSS and JS, it aims at providing tools to ship code faster
To start using the components in your project, you can add the below <link> inside your <head> section of your page. Make sure to keep this as your first CSS import, if you would be using your own custom CSS classes.
<link rel="stylesheet" href="https://aesthetic-ui-dev.netlify.app/styles/main.css"/>Aesthetic UI comprises of the following components. Note that new components/features are always being updated so make sure to keep an eye out for anything new.
Alerts can be used to show a message to the user. You can check out the various types of alerts here
- Info Alert
- Success Alert
- Warning Alert
- Error Alert
Avatars give each user their own identity on the ever growing number of social platforms.
You can check out the avatars in Aesthetic UI here
Badges are being used to display a notification count or status information.
You can check out the various types of badges here
Types:
- Badge on avatar
- Badge on icons
Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
You can check out the various types of buttons here
Types:
- solid button
- outline button
- button with icon
- link button
- Floating Action Buttons
Card are used to show user related data collectively, like product details.
You can check out the various types of cards here
Types:
- Cards with Badges
- Cards with dismiss
- Cards with overlay
- Text only cards
- Vertical cards
- Horizontal cards
- Cards with shadow
Images are the heart and soul of a website.
Without them, websites would become one large collection of text.
You can check out the various types of images here
Types:
- Responsive image
- Round image
- Square image
Inputs allow website users to enter or share their information, across many usecases.
You can check out the various types of input here
Types:
- Textbox
- Textbox with Validation
List are very useful components for handling structure and/or order of text on website.
You can check out the various types of list here
Types:
- Simple list
- Bullet
- Square
- Number
- Roman
- Alphabet
- Emoji
- Scrollable list
- Stacked list
Navigation helps users of a website to easily access sections of a webpage or access completely different websites.
You can check out the ready to go navigation here
Types:
- Simple navigation
Ratings provide insight about various aspects of your website,
allowing your users to share their opinions about any item or service.
You can check out the simple rating here
Types:
- Simple rating
Reusable text Utilities to use in your application
You can use them to style your text, and also position them based on requirement.
You can check out the various text utilities here
Types:
- Heading
- Small Text
- Gray Text
- Centered Text
Client: HTML, CSS, JavaScript
Clone the project
https://github.com/pnchinmay/aesthetic-ui.gitGo to the project directory
cd aesthetic-uiStart the server
npx http-server -p 8080Open http://localhost:8080 to view it in your browser.
If you have any feedback, please open an issue here or reach out to me at pnchinmay9@gmail.com
