Skip to content

Commit b1f2b9e

Browse files
lokesh-coderlokesh-coder
authored
Updated README
1 parent 2e50f32 commit b1f2b9e

File tree

1 file changed

+251
-0
lines changed

1 file changed

+251
-0
lines changed

‎README.md‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
# Pretty checkbox
2+
3+
No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. - **No Javascript**!
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
10+
11+
```sh
12+
$ bower install pretty-checkbox
13+
```
14+
Add `pretty.min.css` in your html
15+
```html
16+
<link rel="stylesheet" src="../bower_components/pretty-checkbox/src/pretty.min.css"/>
17+
```
18+
19+
or you can also import `pretty.scss` in your main scss file.
20+
```scss
21+
@import '../bower_components/pretty-checkbox/src/pretty.scss';
22+
```
23+
Checkbox markup,
24+
```html
25+
<div class="pretty">
26+
<input type="checkbox"/>
27+
<label><i class="mdi mdi-check"></i> Buy vegetables</label>
28+
</div>
29+
```
30+
31+
### checkbox Features
32+
33+
##### Inline checkboxe
34+
```html
35+
<div class="pretty inline">
36+
<input type="checkbox"/>
37+
<label><i class="mdi mdi-close"></i> Buy vegetable</label>
38+
</div>
39+
```
40+
##### Rounded Checkbox
41+
```html
42+
<div class="pretty inline circle">
43+
<input type="checkbox"/>
44+
<label><i class="mdi mdi-check"></i> Monday</label>
45+
</div>
46+
```
47+
##### Custom icons library
48+
```html
49+
<div class="pretty inline circle">
50+
<input type="checkbox"/>
51+
<label><i class="fa fa-check"></i> Fontawesome icon</label>
52+
</div>
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+
##### Outline Checkbox color
62+
```html
63+
<div class="pretty inline outline-primary">
64+
<input type="checkbox"/>
65+
<label><i class="mdi mdi-check"></i> Outline primary</label>
66+
</div>
67+
```
68+
##### Without border - plain checkbox
69+
```html
70+
<div class="pretty inline outline-success plain">
71+
<input type="checkbox"/>
72+
<label><i class="mdi mdi-check"></i> Oh, yes!</label>
73+
</div>
74+
```
75+
##### Animated checkbox
76+
```html
77+
<div class="pretty inline outline-danger smooth">
78+
<input type="checkbox">
79+
<label><i class="mdi mdi-close"></i> Smooth animation</label>
80+
</div>
81+
```
82+
##### Disabled checkbox
83+
```html
84+
<div class="pretty inline">
85+
<input type="checkbox" disabled>
86+
<label><i class="mdi mdi-check"></i> Disabled</label>
87+
</div>
88+
```
89+
##### Toggle checkbox
90+
```html
91+
<div class="pretty inline toggle">
92+
<input type="checkbox"/>
93+
<label><i class="mdi mdi-microphone"></i> ON</label>
94+
<label><i class="mdi mdi-microphone-off"></i> OFF</label>
95+
</div>
96+
```
97+
##### Toggle checkbox without border
98+
```html
99+
<div class="pretty inline plain toggle">
100+
<input type="checkbox"/>
101+
<label><i class="mdi mdi-wifi"></i> WIFI ON</label>
102+
<label><i class="mdi mdi-wifi-off"></i> WIFI OFF</label>
103+
</div>
104+
```
105+
##### Toggle checkbox with colors
106+
```html
107+
<div class="pretty inline plain toggle">
108+
<input type="checkbox"/>
109+
<label><i class="mdi mdi-play"></i> Play</label>
110+
<label><i class="mdi mdi-pause success"></i> Pause</label>
111+
</div>
112+
```
113+
##### Toggle checkbox with alternative colors
114+
```html
115+
<div class="pretty inline plain toggle">
116+
<input type="checkbox"/>
117+
<label><i class="mdi mdi-thumb-up success"></i> Liked</label>
118+
<label><i class="mdi mdi-thumb-down danger"></i> Disliked</label>
119+
</div>
120+
```
121+
### Radio button Features
122+
123+
##### Basic radio
124+
```html
125+
<div class="pretty inline circle">
126+
<input type="radio" name="radio1">
127+
<label><i class="mdi mdi-gender-male"></i> Male</label>
128+
</div>
129+
<div class="pretty inline circle">
130+
<input type="radio" name="radio1">
131+
<label><i class="mdi mdi-gender-female"></i> Female</label>
132+
</div>
133+
```
134+
##### Boxed radio
135+
```html
136+
<div class="pretty inline">
137+
<input type="radio" name="radio2">
138+
<label><i class="mdi mdi-check"></i> Check</label>
139+
</div>
140+
141+
```
142+
##### Solid Color radio
143+
```html
144+
<div class="pretty inline circle primary">
145+
<input type="radio" name="radio3">
146+
<label><i class="mdi mdi-check"></i> Primary</label>
147+
</div>
148+
149+
```
150+
##### Outline Color radio
151+
```html
152+
<div class="pretty inline circle outline-primary">
153+
<input type="radio" name="radio4">
154+
<label><i class="mdi mdi-check"></i> $10</label>
155+
</div>
156+
```
157+
##### Radio button without border
158+
```html
159+
<div class="pretty inline circle plain outline-primary">
160+
<input type="radio" name="radio5">
161+
<label><i class="mdi mdi-human"></i> Single</label>
162+
</div>
163+
```
164+
##### Animated radio button
165+
```html
166+
<div class="pretty inline circle smooth outline-primary">
167+
<input type="radio" name="radio44">
168+
<label><i class="mdi mdi-emoticon-cool"></i> Cool</label>
169+
</div>
170+
```
171+
##### Disabled radio button
172+
```html
173+
<div class="pretty inline circle">
174+
<input type="radio" name="radio6" disabled>
175+
<label><i class="mdi mdi-gender-male"></i> Today</label>
176+
</div>
177+
```
178+
##### Toggle radio button
179+
```html
180+
<div class="pretty inline circle plain toggle">
181+
<input type="radio" name="radio8">
182+
<label><i class="mdi mdi-bluetooth-off"></i> Bluetooth</label>
183+
<label><i class="mdi mdi-bluetooth success"></i> Bluetooth</label>
184+
</div>
185+
<div class="pretty inline circle plain toggle">
186+
<input type="radio" name="radio8">
187+
<label><i class="mdi mdi-wifi-off"></i> Wifi</label>
188+
<label><i class="mdi mdi-wifi info"></i> Wifi</label>
189+
</div>
190+
```
191+
##### Toggle radio button without labels
192+
```html
193+
<div class="pretty inline circle plain toggle">
194+
<input type="radio" name="radio9" checked>
195+
<label><i class="mdi mdi-microphone-off"></i></label>
196+
<label><i class="mdi mdi-microphone danger"></i></label>
197+
</div>
198+
<div class="pretty inline circle plain toggle">
199+
<input type="radio" name="radio9">
200+
<label><i class="mdi mdi-microphone-off"></i></label>
201+
<label><i class="mdi mdi-microphone danger"></i></label>
202+
</div>
203+
```
204+
205+
### Custom font library
206+
##### Font awesome
207+
```html
208+
<div class="pretty inline success smooth">
209+
<input type="checkbox">
210+
<label><i class="fa fa-check"></i> fa-check</label>
211+
</div>
212+
```
213+
##### Glyphicon
214+
```html
215+
<div class="pretty inline success smooth">
216+
<input type="checkbox">
217+
<label><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</label>
218+
</div>
219+
```
220+
##### Material Design icons (mdi)
221+
```html
222+
<div class="pretty inline success smooth">
223+
<input type="checkbox">
224+
<label><i class="mdi mdi-check"></i> mdi-check</label>
225+
</div>
226+
```
227+
##### Material Design icons (zmdi)
228+
```html
229+
<div class="pretty inline success smooth">
230+
<input type="checkbox">
231+
<label><i class="zmdi zmdi-check"></i> zmdi-check</label>
232+
</div>
233+
```
234+
##### Typicons
235+
```html
236+
<div class="pretty inline success smooth">
237+
<input type="checkbox">
238+
<label><i class="typcn typcn-tick"></i>typcn-tick</label>
239+
</div>
240+
```
241+
##### Ionicons
242+
```html
243+
<div class="pretty inline success smooth">
244+
<input type="checkbox">
245+
<label><i class="ion-checkmark-round"></i> ion-checkmark-round</label>
246+
</div>
247+
```
248+
249+
Thats all, folks!
250+
251+
Inspired from Okendoken's [awesome-bootstrap-checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) . contributions are welcome!

0 commit comments

Comments
 (0)