https://github.com/hsnice16/poshui-documentation
Posh UI is a continuously developing Component Library, built using HTML5 and CSS3 only.
https://github.com/hsnice16/poshui-documentation
component-library css3 css3-flexbox css3-grid html5
Last synced: 11 months ago
JSON representation
Posh UI is a continuously developing Component Library, built using HTML5 and CSS3 only.
- Host: GitHub
- URL: https://github.com/hsnice16/poshui-documentation
- Owner: hsnice16
- License: mit
- Created: 2022-01-28T17:58:37.000Z (over 4 years ago)
- Default Branch: development
- Last Pushed: 2022-06-01T14:15:35.000Z (about 4 years ago)
- Last Synced: 2024-05-02T06:11:37.287Z (about 2 years ago)
- Topics: component-library, css3, css3-flexbox, css3-grid, html5
- Language: HTML
- Homepage: https://poshui.netlify.app
- Size: 15.6 MB
- Stars: 6
- Watchers: 2
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Posh UI
Now design your project faster and better with Posh UI
[](https://app.netlify.com/sites/poshui/deploys)
---
## Quick Start
To start using the components in your project, Copy-paste the stylesheet `` into your `` before all other stylesheets to load our CSS.
```html
```
Many of Posh UI components, like Modal, Toast, and others, require the use of JavaScript to function. For proper functioning of those, Copy-paste the following `` near the end of your pages, right before the closing `</body>` tag, to enable them.
```html
<script
src="https://poshui-components.netlify.app/js/main.js">
```
### Posh UI contains the following components
- [Alert](#alert)
- [Avatar](#avatar)
- [Badge](#badge)
- [Button](#button)
- [Card](#card)
- [CSS Grid](#css-grid)
- [Image](#image)
- [Input](#input)
- [List](#list)
- [Modal](#modal)
- [Navigation](#navigation)
- [Rating](#rating)
- [Slider](#slider)
- [Toast](#toast)
- [Tooltip](#tooltip)
- [Typography](#typography)
---
### Alert
Alerts can be used to show a message to the user.
You will find the following types of _Alert_ on https://poshui.netlify.app/pages/components/alert.html
- Danger Alert
- Info Alert
- Primary Alert
- Secondary Alert
- Success Alert
- Warning Alert
---
### Avatar
Avatars can be used for user profile picture.
You will find the following types of _Avatar_ on https://poshui.netlify.app/pages/components/avatar.html
- Same Sized Avatars
- Different Sized Avatars
---
### Badge
Badge can be used to show either status of the user (online, or offline) or you can use it show notification count.
You will find the following types of _Badge_ on https://poshui.netlify.app/pages/components/badge.html
- Badge on Icons
- Badge on Avatars
---
### Button
Buttons can be used to make your web page interactive to your user. You can use them to take user action.
You will find the following types of _Button_ on https://poshui.netlify.app/pages/components/button.html
- Filled Primary Buttons
- Outlined Primary Buttons
- Link Button
- Icon Button
- Floating Button
---
### Card
Cards can be proved very useful. You can use them to display content on an e-commerce app, or on a video library app. You can also use them to show user feedback in the form of text-only card on your site.
You will find the following types of _Card_ on https://poshui.netlify.app/pages/components/card.html
- Horizontal Text Card
- Vertical Item Card
- Text Overlay Card
- Dismiss Card with Shadow
---
### CSS Grid
CSS Grid can be used to structure elements in rows and columns.
You will find the following types of _Grid_ on https://poshui.netlify.app/pages/layout/css-grid.html
- Two Columns Grid
- Two Rows Grid
- Three Columns Grid
- Three Columns Grid
---
### Image
Image can be used to display large picture on the website.
You will find the following types of _Image_ on https://poshui.netlify.app/pages/components/image.html
- Round Image
- Square Image
- Responsive Image
---
### Input
Input can be used to take input from your user. It can make your site more interactive.
You will find the following types of _Input_ on https://poshui.netlify.app/pages/components/input.html
- Text Area
- Form Input
- Error Form Input
---
### List
List can be used to show a list of items.
You will find the following types of _List_ on https://poshui.netlify.app/pages/components/list.html
- Numbered List
- Reversed List
- Lower Roman List
- Lower Alpha List
- Disc List
- Circle List
- Square List
- Category Checkbox List
- Price Radio List
- Notification Stacked List
---
### Modal
Modal can be used for creating dialog boxes, to communicate with user.
You will find the following types of _Modal_ on https://poshui.netlify.app/pages/components/modal.html
- Modal Component
- Modal Demo
---
### Navigation
Navigation can be used to give the user facility to navigate between
different pages.
You will find the following types of _Navigation_ on https://poshui.netlify.app/pages/components/navigation.html
- Desktop Variation One
---
### Rating
Rating can be used to show ratings on the product, or it can also be
used for taking ratings from the user.
You will find the following types of _Rating_ on https://poshui.netlify.app/pages/components/rating.html
- Filled Rating
- Live Rating
---
### Slider
Slider can be used to take user input based on some range.
You will find the following type of _Slider_ on https://poshui.netlify.app/pages/components/slider.html
- Input Slider
---
### Toast
Toast can be used to show notifications to the user.
You will find the following types of _Toast_ on https://poshui.netlify.app/pages/components/toast.html
- Notification Toast
- Notification Toast Demo
- Stacked Notification Toast Demo
---
### Tooltip
Tooltip can be used to show user some information, when user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.
You will find the following types of _Tooltip_ on https://poshui.netlify.app/pages/components/tooltip.html
- Left Tooltip
- Right Tooltip
---
### Typography
Use Typography to format text content on your web site.
You will find the following types of _Typography_ on https://poshui.netlify.app/pages/getting-started/typography.html
- Display
- Headings
- Alignment
- Inline text elements
---
## 👨💻 Connect with me
---
---
Have a look at the implementation of [Posh UI Components](https://github.com/hsnice16/PoshUI-Components).