awesome-bootstrap-checkbox - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

package.json

 {
   "name": "awesome-bootstrap-checkbox",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.",
@@ -16,5 +16,6 @@ "main": "awesome-bootstrap-checkbox.css",
     "font-awesome",
-    "scss"
+    "scss",
+    "less"
   ],
-  "author": "[e-mail] (https://flatlogic.com)",
+  "author": "[e-mail] (http://flatlogic.com)",
   "license": "MIT",
@@ -29,8 +30,5 @@ "bugs": {
     "awesome-bootstrap-checkbox.scss",
+    "awesome-bootstrap-checkbox.less",
     "bower.json"
-  ],
-  "devDependencies": {
-    "bootstrap": "4.0.0",
-    "font-awesome": "5.0.8"
-  }
+  ]
 }

README.md

@@ -1,17 +0,32 @@
-Awesome Bootstrap Checkbox
-==========================
+# 🤘 Awesome Bootstrap Checkbox
+
 [![NPM version](https://img.shields.io/npm/v/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
 [![NPM downloads](https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
 [![Dependency Status](https://img.shields.io/david/dev/flatlogic/awesome-bootstrap-checkbox.svg?branch=master&style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
+[![Join the chat at https://gitter.im/flatlogic/awesome-bootstrap-checkbox](https://badges.gitter.im/flatlogic/awesome-bootstrap-checkbox.svg)](https://gitter.im/flatlogic/awesome-bootstrap-checkbox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
+[View Demo](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/) | [Download](https://github.com/flatlogic/awesome-bootstrap-checkbox.git) | [More templates](https://flatlogic.com/templates) | [Support forum](https://flatlogic.com/forum)
+
 [Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**
 
-Now with **[Bootstrap 4][]** support!
+For **[Bootstrap 4 version](https://getbootstrap.com/docs/4.6/getting-started/introduction/)** please checkout [bump-to-bootstrap4][] branch
 
-**[Demo][]**
+For **[Bootstrap 5 version](https://getbootstrap.com/)** please checkout [bump-to-bootstrap5](https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap5) branch
 
+Check out our React/Vue/Angular/Node.js boilerplates
+-----------
+[Flatlogic Templates](https://flatlogic.com/templates) - 💥Free and open-source application boilerplates built with Bootstrap 5, React, Vue, Angular, Node.js
+
 Use
 ------------
 
-First just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) configuration.
+To install latest version via NPM simply run:
+```shell
+$ npm install awesome-bootstrap-checkbox # for Bootstrap 4 version
+$ npm install awesome-bootstrap-checkbox@0.3.7 # for Bootstrap 3 version
+```
+
+There is a separate [README.md][] file for **[Bootstrap 4 version][]**.
+
+Then just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.
 Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
@@ -22,6 +37,5 @@
   ...
-  <div class="form-check">
-    <label class="form-check-label">
-      <input class="form-check-input" type="checkbox">
-      Check me out
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Check me out
     </label>
@@ -37,6 +51,6 @@ </div>
   ...
-  <div class="form-check abc-checkbox">
-    <input class="form-check-input" id="checkbox1" type="checkbox">
-    <label class="form-check-label" for="checkbox1">
-      Check me out
+  <div class="checkbox">
+    <input type="checkbox" id="checkbox1">
+    <label for="checkbox1">
+        Check me out
     </label>
@@ -49,2 +63,9 @@ </div>
 
+If you want to enable **Opera 12** and earlier support  just add class `styled` to `input` element:
+````html
+...
+<input type="checkbox" id="checkbox1" class="styled">
+...
+````
+
 Browser support
@@ -65,13 +86,13 @@ -----------
   ...
-  <div class="form-check abc-radio">
-    <input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked>
-    <label class="form-check-label" for="radio1">
-      One
-    </label>
+  <div class="radio">
+      <input type="radio" name="radio2" id="radio3" value="option1">
+      <label for="radio3">
+          One
+      </label>
   </div>
-  <div class="form-check abc-radio">
-    <input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2">
-    <label class="form-check-label" for="radio2">
-      Two
-    </label>
+  <div class="radio">
+      <input type="radio" name="radio2" id="radio4" value="option2" checked>
+      <label for="radio4">
+          Two
+      </label>
   </div>
@@ -85,5 +106,5 @@ ...
 
-You may use `abc-checkbox-primary`, `abc-checkbox-danger`, `abc-radio-info`, etc to style checkboxes and radios with brand bootstrap colors.
+You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors.
 
-`abc-checkbox-circle` is for rounded checkboxes.
+`checkbox-circle` is for rounded checkboxes.
 
@@ -93,5 +114,5 @@ Inputs without label text:
 ````html
-<div class="form-check abc-checkbox">
-  <input class="form-check-input" type="checkbox" id="singleCheckbox" value="option1" aria-label="Single checkbox One">
-  <label class="form-check-label" for="singleCheckbox"></label>
+<div class="checkbox">
+  <input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
+  <label></label>
 </div>
@@ -103,10 +124,9 @@ ````
 
-As per example in the `demo` folder, to use Awesome Bootstrap Checkbox you'll have to `@import` the following library parts:
+As per example in the `demo` folder, to use Font Awesome you'll have to `@import` the following library parts:
 
 ````scss
-@import "../node_modules/bootstrap/scss/functions";
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/mixins";
+@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
+@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
 
-@import "../node_modules/Font-Awesome/scss/variables";
+@import "../bower_components/Font-Awesome/scss/variables";
 
@@ -118,2 +138,16 @@ @import "../awesome-bootstrap-checkbox";
 
+Using [Less][]
+----------
+
+Just like the Sass setup, you'll have to `@import` the following library parts:
+
+````less
+@import "../bower_components/bootstrap/less/variables";
+@import "../bower_components/bootstrap/less/mixins";
+
+@import "../awesome-bootstrap-checkbox";
+
+@import "../bower_components/Font-Awesome/less/variables";
+````
+
 Custom icon font
@@ -127,3 +161,3 @@ ------------
 
-.abc-checkbox label:after {
+.checkbox label:after {
     padding-left: 4px;
@@ -135,5 +169,15 @@ padding-top: 2px;
 
-Or for plain CSS, override the `.abc-checkbox` class:
+or for Less:
+````less
+@font-family-icon: 'Glyphicons Halflings';
+@check-icon: "\e013";
+
+// Same styles as the Sass example...
+````
+
+Or for plain CSS, override the `.checkbox` class (and `.styled` class for Opera):
 ````css
-.abc-checkbox input[type=checkbox]:checked + label:after {
+input[type="checkbox"].styled:checked + label:after,
+input[type="radio"].styled:checked + label:after,
+.checkbox input[type=checkbox]:checked + label:after {
     font-family: 'Glyphicons Halflings';
@@ -143,3 +187,5 @@ content: "\e013";
 
-.abc-checkbox label:after {
+input[type="checkbox"].styled:checked label:after,
+input[type="radio"].styled:checked label:after,
+.checkbox label:after {
     padding-left: 4px;
@@ -151,11 +197,30 @@ padding-top: 2px;
 
+How can I support developers?
+------------------------------
+- Star our GitHub repo :star:
+- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
+- Follow us on [Twitter](https://twitter.com/flatlogic) :feet:
+- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup:
+
+Support
+------------------------------
+For any additional information please go to our [**support forum**](https://flatlogic.com/forum) and raise your questions or feedback provide there. We highly appreciate your participation!
+
+More from Flatlogic
+------------------------------
+- [React Native Starter](https://flatlogic.com/templates/react-native) - 🚀 A powerful react native starter template that bootstraps development of your mobile application 
+- [Sing App Dashboard](https://flatlogic.com/templates/sing-app-html5) - 💥 Free and open-source admin dashboard template built with Bootstrap 4
+- [React Material Admin](https://flatlogic.com/templates/react-material-admin-full) - ⚡ Admin boilerplate made with React 17 and Material-UI 5
+
 Credits
 ------------
 
-Based on the [Bootstrap][] and the awesome [Font Awesome][].
+Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
 
 
-[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/1.0.0/
+[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
 [Bootstrap]: http://getbootstrap.com/
-[Bootstrap 4]: http://getbootstrap.com/
+[Bootstrap 4 version]: https://getbootstrap.com/
+[bump-to-bootstrap4]: https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap4
+[Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
 [Font Awesome]: https://github.com/FortAwesome/Font-Awesome
@@ -165,1 +230,2 @@ [Glyphicons]: http://getbootstrap.com/components/#glyphicons
 [Less]: http://lesscss.org/
+[README.md]: https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap4

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

209761

increased by55.56%

Dev dependency count

0

decreased by-100%

Number of package files

14

increased by40%

Lines of code

7345

increased by1439.83%

Number of lines in readme file

219

increased by43.14%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes