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)
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