feat(version): update to 0.2.0

* docs(usage): add basic information on how to use the plugins (#1)

* feat(license): add isc license

* feat(widths): add adjustable border-width variant

* docs(global): add proper docs

* docs(information): add more information about project

* docs(border widths): add documentation

* docs(temp): add placeholder templates

* docs(classes): add btn-rounded documentation

* docs(classes): add btn-squared documentation

* docs(classes): add font-sizes documentation

* feat(global): add commitizen

ensure commits follow the same structure for readability.

* docs(classes): update documentation structure

* docs(classes): add documentation for col-count

* docs(mixins): add documentation for media-ie

* docs(other): add documentation for responsize typography

LICENSE

@@ -0,0 +1,7 @@
+
+
+Copyright 2019 Nick Milton
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -2,17 +2,48 @@
 
 A suite of SCSS plugins used for developing Bootstrap 4 themes and sites.
 
-This package aims to add a few useful tools to help speed up development of themes in Bootstrap 4 by adding some quick classes and mixins.
+This package aims to add a few useful classes and mixins, not found in "vanilla" Bootstrap 4, to help speed up the development of websites.
 
 **Can't you do this yourself by editing some variables?**
 
 Of course you can! This package exists purely to make it faster to replicate some commonly used customizations.
 
 ## Usage
 
-There are a couple ways in use these plugins:
+There are a couple ways to use the plugins, but all steps begin with importing the main Bootstrap files first.
 
-1. Add all of them to your project by importing the `plugin.scss` file found in the root `scss/` directory, or
-2. Add individual plugins by importing the other `.scss` files found in the root `scss/` directory.
+### Include everything using the plugin file
 
-Once you have done that, you can use them as you would any other bootstrap feature.
+```scss
+@import 'path/to/node_modules/bootstrap/scss/bootstrap';
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugins';
+```
+
+### Include single plugins
+
+```scss
+@import 'path/to/node_modules/bootstrap/scss/bootstrap';
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/responsive-typography';
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/font-sizes';
+```
+
+Once you have imported all the files you need, you can simply use the classes and mixins are you would any other Bootstrap feature.
+
+For more detailed usage of each plugin, please see the docs.
+
+## Classes
+
+- `.border-width-n`: Sets the width of borders. - [Full documentation](docs/classes/border-widths.md)
+- `.btn-rounded`: Rounds the corners of buttons. - [Full documentation](docs/classes/btn-rounded.md)
+- `.btn-squared`: Squares off the corners of buttons. - [Full documentation](docs/classes/btn-squared.md)
+- `.col-count-n`: Sets the column count of groups. - [Full documentation](docs/classes/col-count.md)
+- `.font-size-x`: Sets the font size of text. - [Full documentation](docs/classes/font-sizes.md)
+- `.text-outline`: Outlines text. - [Full documentation](docs/classes/text-outline.md)
+
+## Mixins
+
+- `media-ie`: Media queries to for Internet Explorer. - [Full documentation](docs/mixins/media-ie.md)
+
+## Other Features
+
+- Responsive typography - [Full documentation](docs/other/responsive-typography.md)

docs/classes/border-widths.md

@@ -0,0 +1,33 @@
+# Border Widths
+
+Adds a way to specify the width of bordered elements through classes.
+
+By default there are 3 classes for border widths:
+
+```scss
+.border-width-1
+.border-width-2
+.border-width-3
+```
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/border-widths';
+```
+
+### HTML
+
+```html
+<img src="#" class="img-fluid border border-width-3" />
+```
+
+## Customization
+
+- `$border-width-unit`: Sets the unit of the width (e.g. px, em, rem).
+- `$border-width-min`: Sets the minimum width class (default is 1).
+- `$border-width-max`: Sets the maximum width class (default is 3).
+
+**Note:** The number of units used in each class is directly proportional to the number in the class. `.border-width-1` has a width of `1px` while `.border-width-3` has a width of `3px`.

docs/classes/btn-rounded.md

@@ -0,0 +1,19 @@
+# Rounded Buttons
+
+Rounds the corners of buttons to get a rounded effect
+
+Simply add the `.btn-rounded` class to your existing buttons and the styles will apply.
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/button-rounded';
+```
+
+### HTML
+
+```html
+<button class="btn btn-rounded btn-primary">Click me!</button>
+```

docs/classes/btn-squared.md

@@ -0,0 +1,19 @@
+# Rounded Buttons
+
+Squares the corners of buttons to get a 90 degree angle.
+
+Simply add the `.btn-squared` class to your existing buttons and the styles will apply.
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/button-squared';
+```
+
+### HTML
+
+```html
+<button class="btn btn-squared btn-primary">Click me!</button>
+```

docs/classes/col-count.md

@@ -0,0 +1,45 @@
+# Column Count
+
+Sets the number of columns a card column group has.
+
+## Default Classes
+
+There is a class for each column in `$grid-columns`:
+
+`.col-count-1` through `.col-count-12`
+
+You can also add breakpoints to the `.col-count` classes:
+
+- `.col-count-md-1`
+- `.col-count-xl-3`
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugin';
+```
+
+### HTML
+
+```html
+<div class="card-columns col-count-4 col-count-sm-2">
+  <div class="card">
+    ...
+  </div>
+  <div class="card">
+    ...
+  </div>
+  <div class="card">
+    ...
+  </div>
+  <div class="card">
+    ...
+  </div>
+</div>
+```
+
+## Customization
+
+Changing the `$grid-columns` variable will change the number of `.col-count` classes available.

docs/classes/font-sizes.md

@@ -0,0 +1,41 @@
+# Font Sizes
+
+Sets the size of font used in a specific element.
+
+You can add a breakpoint selector before the size selector for more control.
+
+There are font size classes for each `$font-size` variables including the two new variables added by this plguin:
+
+```scss
+.font-size-xs
+.font-size-sm
+.font-size-md
+.font-size-lg
+.font-size-xl
+```
+
+You can also add breakpoints to the classes in the format of `.font-size-[breakpoint]-[size]`.
+
+i.e. `.font-size-sm-lg` which will apply the `.font-size-lg` class on small and larger screens.
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/font-sizes';
+```
+
+### HTML
+
+```html
+<p class="font-size-lg">This is some text</p>
+```
+
+## Customization
+
+- `$font-size-xs`: Sets the font size for `.font-size-xs`
+- `$font-size-sm`: Sets the font size for `.font-size-sm`
+- `$font-size-base`: Sets the font size for `.font-size-md`
+- `$font-size-lg`: Sets the font size for `.font-size-lg`
+- `$font-size-xl`: Sets the font size for `.font-size-xl`

docs/classes/text-outline.md

@@ -0,0 +1,38 @@
+# Text Outline
+
+Outlines text using text shadows.
+
+This class really only exists to provide a slightly better contrast ration when your text doesn't meet colour contrast standards.
+
+There is a default text-outline class and one for each colour found in `$theme-colors`.
+
+```scss
+.text-outline
+
+.text-outline-primary
+.text-outline-secondary
+.text-outline-success
+.text-outline-info
+.text-outline-warning
+.text-outline-danger
+.text-outline-light
+.text-outline-dark
+```
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/text-outline';
+```
+
+### HTML
+
+```html
+<p class="text-outline">This is some text.</p>
+```
+
+## Customization
+
+- `$text-outline-width` - Sets the width of the outline.

docs/mixins/media-ie.md

@@ -0,0 +1,36 @@
+# Internet Explorer Media Queries
+
+Implements the existing breakpoint media queries, but adds a selector for Internet Explorer to all of them.
+
+Also adds a simple mixin to target Internet Explorer without any breakpoints.
+
+```scss
+media-ie
+
+media-ie-breakpoint-up()
+media-ie-breakpoint-down()
+media-ie-breakpoint-between()
+media-ie-breakpoint-only()
+```
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugin';
+```
+
+```scss
+@include media-ie {
+  ...
+}
+
+@include media-ie-breakpoint-up(md) {
+  ...
+}
+
+@include media-ie-only(xl) {
+  ...
+}
+```

docs/other/responsive-typography.md

@@ -0,0 +1,24 @@
+# Responsive Typography
+
+Creates a simple toggle to make all text on your site responsive; changing size for every media breakpoint.
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugin';
+```
+
+```scss
+$enable-responsive-typography: true;
+```
+
+## Customization
+
+- `$enable-responsive-typography`: A boolean that toggles the plugin on/off
+- `$responsive-typography-base`: Sets the base font size for extra small and larger screens. Based off `$font-size-base`
+- `$responsive-typography-sm`: Sets the font size for small and larger screens. Based off `$responsive-typography-base`
+- `$responsive-typography-md`: Sets the font size for medium and larger screens. Based off `$responsive-typography-base`
+- `$responsive-typography-lg`: Sets the font size for large and larger screens. Based off `$responsive-typography-base`
+- `$responsive-typography-xl`: Sets the font size for extra large and larger screens. Based off `$responsive-typography-base`

package.json

@@ -1,9 +1,10 @@
 {
   "name": "bootstrap-scss-plugins",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A suite of SCSS plugins used for developing Bootstrap 4 themes and sites.",
   "scripts": {
-    "lint": "sass-lint -v -c .sass-lint.yml"
+    "lint": "sass-lint -v -c .sass-lint.yml",
+    "commit": "npx git cz"
   },
   "repository": {
     "type": "git",
@@ -24,6 +25,13 @@
     "bootstrap": "^4.2.1"
   },
   "devDependencies": {
+    "commitizen": "^3.0.5",
+    "cz-conventional-changelog": "^2.1.0",
     "sass-lint": "^1.12.1"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

scss/utilities/border-widths.scss

@@ -2,8 +2,10 @@
 // border-width classes.
 // ----------
 
-$border-unit: 'px' !default;
+$border-width-unit: 'px' !default;
+$border-width-min: 1 !default;
+$border-width-max: 3 !default;
 
-@for $i from 1 through 5 {
-  @include border-width-variant('.border-width-#{$i}', $i#{$border-unit});
+@for $i from $border-width-min through $border-width-max {
+  @include border-width-variant('.border-width-#{$i}', $i#{$border-width-unit});
 }