Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rohanmathur91/css-component-library
Polaroid a CSS component library for faster development. It follows utility-first approach for styling components.
https://github.com/rohanmathur91/css-component-library
component-library css3 design-system html javascript
Last synced: 3 months ago
JSON representation
Polaroid a CSS component library for faster development. It follows utility-first approach for styling components.
- Host: GitHub
- URL: https://github.com/rohanmathur91/css-component-library
- Owner: rohanmathur91
- Created: 2022-01-26T06:01:50.000Z (almost 3 years ago)
- Default Branch: development
- Last Pushed: 2023-01-08T11:45:26.000Z (almost 2 years ago)
- Last Synced: 2023-03-06T21:01:49.278Z (almost 2 years ago)
- Topics: component-library, css3, design-system, html, javascript
- Language: CSS
- Homepage: https://polaroid7.netlify.app
- Size: 644 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Polaroid
CSS component library for faster development.
## Installation:
### Import the below link in your head section of the HTML file.
```bash
```
### Another way is to import the link in your CSS file.
```css
@import "https://polaroid7.netlify.app/polaroid.css"
```
## To run locally 🚀:
```sh
git clone https://github.com/rohanmathur91/css-component-library.git
```
```sh
cd into css-component-library
```
```
Open the index.html file in the browser
```
## Tech stack:
- HTML
- CSS
- JavaScript
## Features:
- Alert: Alerts are used for showing small messages to users. Alerts has different variations such as `success`, `information`, `error`, and `warning`.
- Avatar: Can be used as a placeholder for profile images.
- Badge: Badge is used for notifications and for user status and for many other use-cases such as on cards.
- Button: Buttons are used for user actions. There are primary, secondary, and outlined buttons.
- Card: Cards are used for showing products on e-commerce or for user's posts on social media.
- Grid: Grids are used for layouting the elements in a row and column manner.
- Image: Responsive images can be use for profile picture and as a background.
- Input: Input and textarea fields for taking input from user.
- Lists: List for use for listing elements example contact list.
- Modal: Modal is use for getting confirmation or showing some information to user.
- Navigation: Navigation bar is used by users to navigate to specific part or page of your web application.
- Rating: Rating component provide insight regarding other's opinions and experiences.
- Slider: Slider are used for having different ranges example price range.
- Toast: Toast are used for small notifications.Toast comes with different variations such as `success`, `information`, `error`, and `warning`.
- Typography: Text utilities for your projects.
