# Checkbox&radio

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]


![enter image description here](http://tuds.ninja/checkbox-radio/dist/images/about-checkbox-radio.png)


## Quick start
* Clone the repo: `git clone git@github.com:crazychicken/checkbox-radio.git`
* Install with npm: `npm install --save-dev crazychicken/checkbox-radio`
* Install with npm: `npm install --save-dev checkbox-radio`
* Or download the [latest release](https://github.com/crazychicken/checkbox-radio/archive/master.zip)

## Demo
http://tuds.ninja/checkbox-radio/dist/

## How to use

* First, include CSS files into your HTML head:
```html
<link type="text/css" rel="stylesheet" href="./dist/css/checkbox_radio_img_sprite.css">
```

* Set HTML Checkbox
```html
<label class="checkbox">
    <input type="checkbox">
    <i class="icon-checkbox"></i>
    Default
</label>
<br>
<label class="checkbox">
    <input type="checkbox" checked>
    <i class="icon-checkbox"></i>
    Checked
</label>
```

* Set HTML Radio
```html
<label class="radio">
    <input type="radio" name="group-radio">
    <i class="icon-radio"></i>
    Default
</label>
<br>
<label class="radio">
    <input type="radio" name="group-radio" checked>
    <i class="icon-radio"></i>
    Checked
</label>
```

## Tree
```
dist/
  └── css/
  |   ├── checkbox_radio.css
  |   └── checkbox_radio_bootstrap.css
  |   └── checkbox_radio_font.css
  |   └── checkbox_radio_img_sprite.css
  └── fonts/
  └── images/
sass/
  ├── checkbox_radio.css
  └── checkbox_radio_bootstrap.css
  └── checkbox_radio_font.css
  └── checkbox_radio_img_sprite.css
```

## Options style

* checkbox_radio.css
* checkbox_radio_bootstrap.css
* checkbox_radio_font.css
* checkbox_radio_img_sprite.css

## Template full feature list

* Semantically Correct / Valid HTML Code
* HTML5, CSS3
* Full project and seed project (build with: Gulp, Sass)
* Cross browser compatible ( Internet Explorer 8+, Firefox, Safari, Opera, Chrome etc. )
* W3C Valid source code, properly formatted and commented
* Animations CSS3

## Creators

#### Tuds
* Website:  http://tuds.ninja/
* Github:   https://github.com/crazychicken/checkbox-radio
* Facebook: https://www.facebook.com/tudscss/
* Youtube:  https://www.youtube.com/channel/UCDACe-7BFGDucQoxTDfPotw
* Twitter:   https://twitter.com/mtu_truong

[downloads-image]: https://img.shields.io/npm/dm/checkbox-radio.svg
[npm-url]: https://www.npmjs.com/package/checkbox-radio
[npm-image]: https://img.shields.io/npm/v/checkbox-radio.svg

## Copyright and license

Code and documentation copyright 2016, MIT license.