Welcome to Feedy UI 👋

✨Live Website - Feedy UI

FeedyUI is a lightweight, reliable and fast component library build with HTML, CSS and Javascript.

Getting Started

In order to start using the component library, you simply need to include the library's CSS file in your local html file as follows:

<link rel="stylesheet" href="https://feedyui.netlify.app/library/lib.css" />

Or if you want to simply use the library inside a CSS file the following can also be done,

@import url("https://feedyui.netlify.app/library/lib.css");

Components

Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

In FeedyUI, we offer two types of alert:
- Filled Alerts
- Outline Alerts
Avatar

Avatars should focus on a subject, using a simple background. They can represent a user or a brand (with a logo or branded graphic).

In FeedyUI, we offer avatar;s in two format:
- Letter based Avatar
- Picture avatar
Badge

Badge generates a small badge to the top-right of its child(ren).

For Badges in FeedyUI, the catergoires are:
- Badge On Icon
- Badge On Avatar
Button

Buttons allow users to take actions, and make choices, with a single tap.

For Buttons in FeedyUI, we get four major varaiants:
- Solid Button
- Outline Button
- Floating Action Button
- Icon Button
Card

Cards contain content and actions about a single subject.Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

In FeedyUI, Cards have been divided into two primary category:
- Horizontally Stacked Card
- Vertically Stacked card
Image

Images are most integral part of websites these days. Responsive images help user get more visual detail irrespective of device.

Since 90% of the web are images, we just can ignore the responsive images we prodvide in FeedyUI:
- Responsive Circular Image
- Responsive Squared Image
- Image with overlay
Input

Input is one the primary source of user experience where we offer different types of option to take input from use such as text, checkbox, radio button.

FeedyUI provides a range of input for user interaction, such as:
- Outline Input Box
- No Outline Input Box
- Input Box With Label
- Checkbox
- Radio Button
- Counter
List

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

FeedyUI simply provides two amazing type of list representaion:
- Icon List
- Action List
Tabs

Nav Bar provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.

Navigation always plays a key role in all the website and thus we have:
- Default Responsive Navbar
- Centered Responsive Navbar
- Spaced Out Responsive Navbar
- Three Part Responsive Navbar
Rating

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
Snackbar

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications.

Systems

Colors

We have an interesting range of colors at your disposal.
- primary-color: #fc8019;
- primary-color-light: #f79c52c5;
- secondary-color: #fc7f197c;
- text-light-color: #ebeef7;
- text-dark-color: #0b0c13;
- bg-light-color: #f7eee9;
- bg-dark-color: #35302c;
- light-color: #e6955454;
- success-color: #00800080;
- danger-color: #ff000080;
- white-color: #ffff;
- black-color: #0000;
Grid

Grids are one of the best ways to create responsive layouts for your website.

FeedyUI offers two frequenlty used grid layout system:
- Two Item Grid
  - Equal Grid
  - 30:70 Grid
- Three Item Grid
  - Euqal Grid
  - 15:70:15 Grid
Typography

Typography Use typography to present your design and content as clearly and efficiently as possible.

Author

👤 Humza Hasan

Show your support

Give a ⭐️ if this project helped you!

humzahasan/FeedyUI