Skip to content

open source framework that provides ready-to-use frontend components

Notifications You must be signed in to change notification settings

pnchinmay/aesthetic-ui

Repository files navigation

aesthetic-ui logo

Build your website faster with Aesthetic UI

Codacy Badge GitHub closed pull requests GitHub closed issues
Netlify Status GitHub last commit (branch) Forks GitHub Repo stars


Live Documentation Site

Live Demo Link: https://aesthetic-ui-dev.netlify.app


Quick Start

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"/>

Components

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.


Overview of each component

Alert

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

Avatar

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


Badge

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

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

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

Image

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

Input

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

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

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

Rating

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

Text Utilities

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

Tech Stack

Client: HTML, CSS, JavaScript


Getting Started

Clone the project

  https://github.com/pnchinmay/aesthetic-ui.git

Go to the project directory

  cd aesthetic-ui

Start the server

  npx http-server -p 8080

Open http://localhost:8080 to view it in your browser.


Feedback

If you have any feedback, please open an issue here or reach out to me at pnchinmay9@gmail.com


Authors


🚀 About Me

I'm a Software Engineer with proficiency in full stack development

🔗 Links

twitter linkedin portfolio

About

open source framework that provides ready-to-use frontend components

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •