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");

• 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.

• 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.

👤 Humza Hasan

• Website: https://dev.to/thehumzahasan
• Twitter: @_mr_debugger_
• Github: @humzahasan

Give a ⭐️ if this project helped you!