NeoZ-UI-CL

NeoZ UI is a Component Library using HTML and CSS, with pre-defined classes for usage in your projects.

Landing Page / Home Page Link:

https://neoz-ui.netlify.app/

Landing Page Looks Like:

Installation Page Link:

https://neoz-ui.netlify.app/pages/installation.html

Installation Page Looks Like:

Steps for Installation:

Copy the below links in the head tag of your HTML file:

-- Stylesheet link --

< link rel="stylesheet" href="https://neoz-ui.netlify.app/styles/main.css" >

-- Font Awesome Icons --

< link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css" >

Documentation Page Link:

https://neoz-ui.netlify.app/pages/documentation.html

Documentation Page Looks Like:

This Component Library consists of 12 Components:

1. Typography / Text Utilities (https://neoz-ui.netlify.app/pages/typography.html): Typography is the basic and one of the important components of any Website or Project. It can make a difference in terms of look and user experience perspective.
2. Alert (https://neoz-ui.netlify.app/pages/alert.html): We can provide contextual feedback messages for typical user actions with the use of available and flexible alert messages.
3. Avatar (https://neoz-ui.netlify.app/pages/avatar.html): Avatars are used for profile pictures, usually found in circular shapes. Avatars are commonly used with gravatar, profile pages, person list.
4. Badge (https://neoz-ui.netlify.app/pages/badge.html): Badges are used to display the notification count or status information. It may be positioned top-right or bottom-right of the icon / avatar. We can use badges on icons, buttons and texts as well.
5. Button (https://neoz-ui.netlify.app/pages/button.html): Buttons are used to trigger in-page functionality (like collapsing content), linking to new pages or sections within the current page.
6. Card (https://neoz-ui.netlify.app/pages/card.html): Cards are flexible and extensible content containers. They include options for headers and footers, images, a wide variety of content, different background colors, and powerful display options. They can be used to give any information for the user, for eg. in Products page of an ecommerce website.
7. Grid Simplified (https://neoz-ui.netlify.app/pages/grid.html): The Grids offer a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
8. Image (https://neoz-ui.netlify.app/pages/image.html): Images are a great way of expressing something more than words, and can be used in many ways for our purpose. Like, using in our websites, for avatars,etc.
9. Input (https://neoz-ui.netlify.app/pages/input.html): Inputs are used for user interaction with the website. We can interact with User using Inputs and also get the necessary information from the user, and act upon it accordingly.
10. Navigation(Simple) (https://neoz-ui.netlify.app/pages/navigation.html): Navigation is used to navigate across various pages of the website. There are different types of navigation, like simple navigation, sub-menus, Hamburger/Drawer, etc.
11. Rating (https://neoz-ui.netlify.app/pages/rating.html): Ratings provide as a feedback from the user regarding their opinions and experiences, and can allow the user to submit a rating of their own, for eg. in an ecommerce website.
12. Slider (https://neoz-ui.netlify.app/pages/slider.html) : Sliders are used in different ways, like for ratings in E-commerce websites, and also to show Price range varying from minimum to maximum, etc.

Thanks for reading. Please give feedback / suggestions regarding my Component Library.