Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lokesh-coder/pretty-checkbox
A pure CSS library to beautify checkbox and radio buttons.
https://github.com/lokesh-coder/pretty-checkbox
animation bootstrap checkbox css html icons radio-buttons react scss
Last synced: 26 days ago
JSON representation
A pure CSS library to beautify checkbox and radio buttons.
- Host: GitHub
- URL: https://github.com/lokesh-coder/pretty-checkbox
- Owner: lokesh-coder
- License: mit
- Created: 2016-07-14T07:52:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-10-14T16:34:51.000Z (about 4 years ago)
- Last Synced: 2024-09-28T14:42:43.711Z (about 1 month ago)
- Topics: animation, bootstrap, checkbox, css, html, icons, radio-buttons, react, scss
- Language: CSS
- Homepage: https://lokesh-coder.github.io/pretty-checkbox/
- Size: 2.64 MB
- Stars: 1,804
- Watchers: 32
- Forks: 150
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - pretty-checkbox - coder | 1805 | (CSS)
- Awesome-CSS-Resources - pretty-checkbox:
- awesome-css-only - Pretty-checkbox - A pure CSS library to beautify checkbox and radio buttons. (Uncategorized / Uncategorized)
README
pretty-checkbox.css
A pure CSS library to beautify checkbox and radio buttons.
### Features
* Basic
- **Shapes** - *Square*, *Curve*, *Round*
- **Variants** - *Default*, *Fill*, *Thick*
- **Colors** - *Primary*, *Success*, *Info*, *Warning*, *Danger*
- **Color types** - *Solid*, *Outline*
- **Animations** - *Smooth*, *Tada*, *Jelly*, *Pulse*, *Rotate*
* Switch - iOS style - *Outline*, *Fill*, *Slim*
* Responsive
* No JavaScript
* Custom Font Icons
* SVG Icons
* Image support
* Toggle between icons / SVG's / images
* Lock
* State - *Focus*, *Hover*, *Indeterminate*
* Supports frameworks - *Bootstrap*, *Foundation*, *Sematic UI*, *Bulma*, ...
* SCSS customization
* Supports all modern browsers, including mobile devices
* Print friendly
* and more... ( *I am kidding, that's all!* )
### Installation
- **From CLI**
Install the library from [`npm`](https://www.npmjs.com/package/pretty-checkbox) or [`yarn`](https://yarnpkg.com/en/package/pretty-checkbox) package manager
```sh
> npm install pretty-checkbox // or
> yarn add pretty-checkbox
```
Add `pretty-checkbox.min.css` in your html
- **From CDN** ( [`jsDelivr`](https://www.jsdelivr.com/package/npm/pretty-checkbox) )
```html
```
- **Manual download** ( [`Github`](https://github.com/lokesh-coder/pretty-checkbox/archive/master.zip) )
Download the source from Github.
```html
```
`` is where the library is downloaded.
**SCSS**
You can also import `pretty-checkbox.scss` in your main scss file.
```scss
@import '~pretty-checkbox/src/pretty-checkbox.scss';
```
Please refer the document for SCSS settings.
### Usage
Pretty checkbox comes with many styles,
| Class name | Description |
| :---------- | :----------------------- |
| `p-default` | Basic style |
| `p-switch` | iOS like toggle style |
| `p-icon` | Custom font icons |
| `p-svg` | Custom SVG files, markup |
| `p-image` | Tiny images |
And three shapes `p-round` `p-curve` `p-square` (default)
#### Basic checkbox
```html
Check me
```
Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default)
You can combine them.
```html
Fill
```
---
#### Switch checkbox
Switch has three variants `p-outline` `p-fill` `p-slim`
```html
On
```
---
#### Custom Font icons
```html
```
Note: class `icon` should be added along with icon class names
Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.
---
#### SVG
Supports SVG file in ![]()
tag, markup (` ... `) and sprites
```html
Check me
```
Note: class `svg` to be added in img tag or svg tag.
---
#### Image
Supports any type of valid image format.
```html
Block
```
Note: class `image` to be added in img tag.
---
#### Colors
There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger`
And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o`
```html
Warning
```
Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.
### More
There are more features like ***Radio buttons*** , ***Toggle*** , ***States*** , ***Animations*** , ***Border less*** , ***Lock*** , ***Scale***, ***SCSS Settings***.
Please refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them.
### Browser support
Works in all modern browsers.
`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9`
### Font Icon libraries
* [Font awesome](http://fontawesome.io/icons/)
* [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons)
* [Material icon ( MDI )](https://materialdesignicons.com/)
* [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html)
* [Ion icons](http://ionicons.com/)
* [Typicons](http://www.typicons.com/)
* [Material icon ( Google )](https://material.io/icons)
* Others not tested, but will work ( 99% ).
### SVG
* [UIKit](https://getuikit.com/docs/icon)
* [Feathers](https://feathericons.com/)
* Others
### Libraries
- VueJs - [pretty-checkbox-vue](https://github.com/hamed-ehtesham/pretty-checkbox-vue)
- Angular - [ngx-pretty-checkbox](https://github.com/miladfm/ngx-pretty-checkbox)
### Inspiration
- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea
- [Animista](http://animista.net) - Animations
### Contributions
Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!
### License
This project is licensed under the MIT License
❤