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)