Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor(:recycle:)
- Cleaning up README
- Cleaning up package.json
  • Loading branch information
atomicpages committed Aug 17, 2020
commit 03847932c00f44026dc191082a99aa6e7c12df35
1 change: 0 additions & 1 deletion Gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ const sourcemaps = require('gulp-sourcemaps');
const headerComment = require('gulp-header-comment');
const gulpStylelint = require('gulp-stylelint');
const cleanCSS = require('gulp-clean-css');
const gulpSequence = require('gulp-sequence');
const del = require('del');

const reload = browserSync.reload;
Expand Down
64 changes: 24 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<img src="preview.gif" alt="Pretty checkbox preview"/>
</div>

### Features
## Features

- Basic
- **Shapes** - _Square_, _Curve_, _Round_
Expand All @@ -53,22 +53,20 @@
- Print friendly
- and more... ( _I am kidding, that's all!_ )

### Installation
## Installation

- **From CLI**
### **From CLI**

Install using `npm` or `yarn`:

```sh
> npm install @djthoms/pretty-checkbox // or
> yarn add @djthoms/pretty-checkbox
npm install @djthoms/pretty-checkbox # or
yarn add @djthoms/pretty-checkbox
```

Add `pretty-checkbox.min.css` in your html:

<br>

- **From CDN** ( [`unpkg`](https://www.jsdelivr.com/package/npm/pretty-checkbox) )
### From CDN

```html
<link
Expand All @@ -77,21 +75,17 @@ Add `pretty-checkbox.min.css` in your html:
/>
```

<br>

- **Manual download** ( [`Github`](https://github.com/atomicpages/pretty-checkbox/archive/master.zip) )
### Manual download

Download the source from Github.
Download the source from [`Github`](https://github.com/atomicpages/pretty-checkbox/archive/master.zip).

```html
<link rel="stylesheet" href="<PATH>/pretty-checkbox/dist/pretty-checkbox.min.css" />
```

`<PATH>` is where the library is downloaded.

<br>

**SCSS**
### SCSS

You can also import `pretty-checkbox.scss` in your main scss file.

Expand All @@ -101,7 +95,7 @@ You can also import `pretty-checkbox.scss` in your main scss file.

Please refer the document for SCSS settings.

### Usage
## Usage

Pretty checkbox comes with many styles,

Expand All @@ -115,7 +109,7 @@ Pretty checkbox comes with many styles,

And three shapes `p-round` `p-curve` `p-square` (default)

#### Basic checkbox
### Basic checkbox

```html
<div class="pretty p-default">
Expand All @@ -139,9 +133,7 @@ You can combine them.
</div>
```

<div align="center"><strong >---</strong></div>

#### Switch checkbox
### Switch checkbox

Switch has three variants `p-outline` `p-fill` `p-slim`

Expand All @@ -154,9 +146,7 @@ Switch has three variants `p-outline` `p-fill` `p-slim`
</div>
```

<div align="center"><strong >---</strong></div>

#### Custom Font icons
### Custom Font icons

```html
<div class="pretty p-icon">
Expand Down Expand Up @@ -185,9 +175,7 @@ Switch has three variants `p-outline` `p-fill` `p-slim`
more details</a></sub></i>
</div>

<div align="center"><strong >---</strong></div>

#### SVG
### SVG

Supports SVG file in <img/> tag, markup (`<svg> ... </svg>`) and sprites

Expand All @@ -211,9 +199,7 @@ Supports SVG file in <img/> tag, markup (`<svg> ... </svg>`) and sprites
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#svg">more details</a></sub></i>
</div>

<div align="center"><strong >---</strong></div>

#### Image
### Image

Supports any type of valid image format.

Expand All @@ -237,9 +223,7 @@ Supports any type of valid image format.
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#image">more details</a></sub></i>
</div>

<div align="center"><strong >---</strong></div>

#### Colors
### Colors

There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger`

Expand All @@ -264,19 +248,19 @@ And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#colors">more details</a></sub></i>
</div>

### More
## More

There are more features like **_Radio buttons_** , **_Toggle_** , **_States_** , **_Animations_** , **_Border less_** , **_Lock_** , **_Scale_**, **_SCSS Settings_**.

Please refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them.

### Browser support
## Browser support

Works in all modern browsers.

`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9`

### Font Icon libraries
## Font Icon libraries

- [Font awesome](http://fontawesome.io/icons/)
- [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons)
Expand All @@ -287,28 +271,28 @@ Works in all modern browsers.
- [Material icon ( Google )](https://material.io/icons)
- Others not tested, but will work ( 99% ).

### SVG
## SVG

- [UIKit](https://getuikit.com/docs/icon)
- [Feathers](https://feathericons.com/)
- Others

### Libraries
## Libraries

- VueJs - [pretty-checkbox-vue](https://github.com/hamed-ehtesham/pretty-checkbox-vue)
- Angular - [ngx-pretty-checkbox](https://github.com/miladfm/ngx-pretty-checkbox)
- React - [pretty-checkbox-react](https://github.com/atomicpages/pretty-checkbox-react)

### Inspiration
## Inspiration

- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea
- [Animista](http://animista.net) - Animations

### Contributions
## Contributions

Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!

### License
## License

This project is licensed under the MIT License

Expand Down
18 changes: 7 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@
"lint": "gulp lint:scss",
"fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix",
"format": "gulp css:format",
"build": "gulp build",
"ci": "npm run build && git add dist -f && git commit -m \"build(release): auto build [ci skip]\"",
"release": "corp-semantic-release",
"log": "conventional-github-releaser -p angular -r 0"
"build": "gulp build"
},
"publishConfig": {
"access": "public"
Expand All @@ -19,16 +16,13 @@
"devDependencies": {
"@djthoms/prettier-config": "^2.0.0",
"browser-sync": "^2.8.2",
"conventional-github-releaser": "^3.1.5",
"corp-semantic-release": "^7.0.0",
"del": "^5.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-header-comment": "^0.8.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sequence": "^1.0.0",
"gulp-sourcemaps": "^2.6.1",
"gulp-stylelint": "^13.0.0",
"prettier": "^2.0.5",
Expand All @@ -37,7 +31,6 @@
"stylelint": "^13.6.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-scss": "^3.18.0"
},
"browserslist": [
Expand All @@ -46,8 +39,8 @@
],
"repository": {
"type": "git",
"url": "git+https://github.com/lokesh-coder/pretty-checkbox.git",
"link": "https://github.com/lokesh-coder/pretty-checkbox"
"url": "git+https://github.com/atomicpages/pretty-checkbox.git",
"link": "https://github.com/atomicpages/pretty-checkbox"
},
"keywords": [
"checkbox",
Expand All @@ -66,9 +59,12 @@
"colors"
],
"author": "Lokesh Rajendran",
"maintainers": [
"Dennis Thompson"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/lokesh-coder/pretty-checkbox/issues"
"url": "https://github.com/atomicpages/pretty-checkbox/issues"
},
"homepage": "https://lokesh-coder.github.io/pretty-checkbox",
"prettier": "@djthoms/prettier-config"
Expand Down