Skip to content

Commit ef24e2b

Browse files
lokesh-coderlokesh-coder
committed
2 parents b372df8 + bacc5af commit ef24e2b

File tree

2 files changed

+179
-13
lines changed

2 files changed

+179
-13
lines changed

‎README.md

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# Pretty checkbox
2+
3+
No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. **Only CSS**!
4+
5+
Check it out the [Demo](https://lokesh-coder.github.io/pretty-checkbox/) for complete documentation.
6+
7+
### Get started
8+
9+
Install the library from `bower` or `npm` package manager
10+
11+
```sh
12+
> bower install pretty-checkbox
13+
```
14+
```sh
15+
> npm install pretty-checkbox
16+
```
17+
Add `pretty.min.css` in your html
18+
19+
```html
20+
<link rel="stylesheet" href="../PATH/pretty-checkbox/src/pretty.min.css"/>
21+
```
22+
23+
or you can also import `pretty.scss` in your main scss file.
24+
```scss
25+
@import '../PATH/pretty-checkbox/src/pretty.scss';
26+
```
27+
`PATH` is where the library is downloaded.
28+
29+
Checkbox markup,
30+
```html
31+
<div class="pretty">
32+
<input type="checkbox"/>
33+
<label><i class="mdi mdi-check"></i> Buy vegetables</label>
34+
</div>
35+
```
36+
37+
### checkbox Features
38+
39+
##### Inline checkbox
40+
```html
41+
<div class="pretty inline">
42+
<input type="checkbox"/>
43+
<label><i class="mdi mdi-close"></i> Buy vegetable</label>
44+
</div>
45+
```
46+
##### Rounded Checkbox
47+
```html
48+
<div class="pretty inline circle">
49+
<input type="checkbox"/>
50+
<label><i class="mdi mdi-check"></i> Monday</label>
51+
</div>
52+
```
53+
54+
##### Solid Checkbox color
55+
```html
56+
<div class="pretty inline primary">
57+
<input type="checkbox"/>
58+
<label><i class="mdi mdi-check"></i> Primary</label>
59+
</div>
60+
```
61+
Color variants: `primary` , `success` , `warning` , `info` , `danger`
62+
##### Outline Checkbox color
63+
```html
64+
<div class="pretty inline outline-primary">
65+
<input type="checkbox"/>
66+
<label><i class="mdi mdi-check"></i> Outline primary</label>
67+
</div>
68+
```
69+
Color variants: `outline-primary` , `outline-success` , `outline-warning` , `outline-info` , `outline-danger`
70+
##### Without border - plain checkbox
71+
```html
72+
<div class="pretty inline outline-success plain">
73+
<input type="checkbox"/>
74+
<label><i class="mdi mdi-check"></i> Oh, yes!</label>
75+
</div>
76+
```
77+
##### Animated checkbox
78+
```html
79+
<div class="pretty inline outline-danger smooth">
80+
<input type="checkbox">
81+
<label><i class="mdi mdi-close"></i> Smooth animation</label>
82+
</div>
83+
```
84+
##### Disabled checkbox
85+
```html
86+
<div class="pretty inline">
87+
<input type="checkbox" disabled>
88+
<label><i class="mdi mdi-check"></i> Disabled</label>
89+
</div>
90+
```
91+
##### Toggle checkbox
92+
```html
93+
<div class="pretty inline toggle">
94+
<input type="checkbox"/>
95+
<label><i class="mdi mdi-microphone"></i> ON</label>
96+
<label><i class="mdi mdi-microphone-off"></i> OFF</label>
97+
</div>
98+
```
99+
##### Toggle checkbox without border
100+
```html
101+
<div class="pretty inline plain toggle">
102+
<input type="checkbox"/>
103+
<label><i class="mdi mdi-wifi"></i> WIFI ON</label>
104+
<label><i class="mdi mdi-wifi-off"></i> WIFI OFF</label>
105+
</div>
106+
```
107+
##### Toggle checkbox with colors
108+
```html
109+
<div class="pretty inline plain toggle">
110+
<input type="checkbox"/>
111+
<label><i class="mdi mdi-play"></i> Play</label>
112+
<label><i class="mdi mdi-pause success"></i> Pause</label>
113+
</div>
114+
```
115+
##### Toggle checkbox with alternative colors
116+
```html
117+
<div class="pretty inline plain toggle">
118+
<input type="checkbox"/>
119+
<label><i class="mdi mdi-thumb-up success"></i> Liked</label>
120+
<label><i class="mdi mdi-thumb-down danger"></i> Disliked</label>
121+
</div>
122+
```
123+
### Radio button Features
124+
125+
##### Basic radio
126+
```html
127+
<div class="pretty inline circle">
128+
<input type="radio" name="radio1">
129+
<label><i class="mdi mdi-gender-male"></i> Male</label>
130+
</div>
131+
<div class="pretty inline circle">
132+
<input type="radio" name="radio1">
133+
<label><i class="mdi mdi-gender-female"></i> Female</label>
134+
</div>
135+
```
136+
All the features in the checkbox is supported for radio buttons. It includes
137+
`Boxed radio button` , `Solid Color radio` , `Outline Color radio` , `Radio button without border` , `Animated radio button` , `Disabled radio button` , `Toggle radio button`.
138+
139+
140+
##### Toggle radio button without labels
141+
```html
142+
<div class="pretty inline circle plain toggle">
143+
<input type="radio" name="radio9" checked>
144+
<label><i class="mdi mdi-microphone-off"></i></label>
145+
<label><i class="mdi mdi-microphone danger"></i></label>
146+
</div>
147+
<div class="pretty inline circle plain toggle">
148+
<input type="radio" name="radio9">
149+
<label><i class="mdi mdi-microphone-off"></i></label>
150+
<label><i class="mdi mdi-microphone danger"></i></label>
151+
</div>
152+
```
153+
154+
### Custom font library
155+
156+
This library supports wide variety of font icon libraries. Currently tested with `FontAwesome` , `Bootstrap Glyphicon` , `Material Design icons (mdi)` , `Material Design icons (zmdi)` , `Typicons` `Ionicons`.
157+
158+
### What else
159+
160+
- Scalable. can be used in any font sizes
161+
- Used in frameworks like bootstrap, foundation, sematic UI
162+
- Supported in all mordern browsers, including mobile devices
163+
- Customizable. see the demo for `sass` settings
164+
- MIT Licence
165+
166+
Thats all, folks!
167+
168+
Inspired from Okendoken's [awesome-bootstrap-checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) . contributions are welcome!

‎package.json

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
11
{
2-
"name": "PrettyCheckbox",
2+
"name": "pretty-checkbox",
33
"version": "1.0.0",
4-
"description": "Scalable css3 pretty checkbox and radio buttons",
5-
"main": "Gulpfile.js",
6-
"dependencies": {
7-
8-
},
4+
"description": "Scalable css3 pretty checkbox and radio buttons with custom font icon library",
5+
"main": "src/pretty.min.css",
6+
"dependencies": {},
97
"devDependencies": {
108
"gulp-rename": "^1.2.2",
11-
"gulp-sass": "^2.2.0",
9+
"gulp-sass": "^2.3.1",
1210
"bower": "^1.5.1",
1311
"browser-sync": "^2.8.2",
1412
"gulp": "^3.9.0",
15-
"gulp-compass": "^2.1.0",
16-
"gulp-sass": "^2.3.1",
1713
"node-sass": "^3.7.0"
1814
},
1915
"scripts": {},
2016
"repository": {
2117
"type": "git",
22-
"url": "https://github.com/lokesh-coder/pretty-checkbox"
18+
"url": "git+https://github.com/lokesh-coder/pretty-checkbox.git"
2319
},
2420
"keywords": [
25-
"one",
26-
"page",
27-
"app"
21+
"checkbox",
22+
"radio",
23+
"bootstrap",
24+
"css3",
25+
"animations"
2826
],
2927
"author": "lokesh",
3028
"license": "MIT",

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy