diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..564c91e --- /dev/null +++ b/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. diff --git a/README.md b/README.md index 7378c4f..782e73a 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 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?** @@ -10,9 +10,40 @@ Of course you can! This package exists purely to make it faster to replicate som ## 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) diff --git a/docs/classes/border-widths.md b/docs/classes/border-widths.md new file mode 100644 index 0000000..284b0e8 --- /dev/null +++ b/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 + +``` + +## 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`. diff --git a/docs/classes/btn-rounded.md b/docs/classes/btn-rounded.md new file mode 100644 index 0000000..4f3a2ce --- /dev/null +++ b/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 + +``` diff --git a/docs/classes/btn-squared.md b/docs/classes/btn-squared.md new file mode 100644 index 0000000..331a49a --- /dev/null +++ b/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 + +``` diff --git a/docs/classes/col-count.md b/docs/classes/col-count.md new file mode 100644 index 0000000..3ca7d4e --- /dev/null +++ b/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 +
This is some text
+``` + +## 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` diff --git a/docs/classes/text-outline.md b/docs/classes/text-outline.md new file mode 100644 index 0000000..d0ec163 --- /dev/null +++ b/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 +This is some text.
+``` + +## Customization + +- `$text-outline-width` - Sets the width of the outline. diff --git a/docs/mixins/media-ie.md b/docs/mixins/media-ie.md new file mode 100644 index 0000000..d0a1569 --- /dev/null +++ b/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) { + ... +} +``` diff --git a/docs/other/responsive-typography.md b/docs/other/responsive-typography.md new file mode 100644 index 0000000..f565c70 --- /dev/null +++ b/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` diff --git a/package.json b/package.json index 1db5f88..59bd004 100644 --- a/package.json +++ b/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" + } } } diff --git a/scss/utilities/border-widths.scss b/scss/utilities/border-widths.scss index 9838c2b..2a373b1 100644 --- a/scss/utilities/border-widths.scss +++ b/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}); }