feat (plugins): 1.1.0 release

* 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 * feat(version): update to 0.2.0 * 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 * docs(community): add code of conduct * docs(community): add contributing guidelines * docs(community): add contribution documentation * docs(contribution): update pr steps * docs(contribution): fix links to issues * test(global): add lint and compiling tests * test(gulp): add initial testing setup * fix(plugin): rename squared buttons file * test(global): make tests work * chore(templates): add templates * docs(community): move code of conduct and contributing docs * chore(templates): add templates * chore(templates): add new templates * chore(templates): add new templates * chore(templates): remove old template * refactor(version): update to 1.0.0 * fix(repo): change repo url BREAKING CHANGE: The repository has changed. * docs(log): add changelog * refactor(version): update to 1.0.0 * feat(plugin): add screen reader breakpoints * docs(tests): correct documentation * docs(tests): correct documentation * feat(class): add sr-breakpoint classes * docs(spelling): correct typo * feat(plugin): add transparent backgrounds plugin * feat(plugin): add 25 and 75 transparent background classes * feat(plugin): add opacity classes * docs(classes): change name of documentation file * docs(plugin): update bg-transparency with 25 and 75 * docs(plugin): remove file extension from example * docs(plugin): add more info for the sr-brakpoints documention * feat(plugin): add opacity plugin * refactor(version): update to 1.1.0 * docs(community): add code of conduct * docs(community): add contributing guidelines * docs(community): add contribution documentation * docs(contribution): update pr steps * docs(contribution): fix links to issues * chore(templates): add templates * docs(community): move code of conduct and contributing docs * chore(templates): add templates * chore(templates): add new templates * chore(templates): add new templates * chore(templates): remove old template * refactor(version): update to 1.0.0 * fix(repo): change repo url BREAKING CHANGE: The repository has changed. * docs(log): add changelog * refactor(version): update to 1.0.0 * feat(plugin): add screen reader breakpoints * docs(tests): correct documentation * docs(tests): correct documentation * feat(class): add sr-breakpoint classes * docs(spelling): correct typo * feat(plugin): add transparent backgrounds plugin * feat(plugin): add 25 and 75 transparent background classes * feat(plugin): add opacity classes * docs(classes): change name of documentation file * docs(plugin): update bg-transparency with 25 and 75 * docs(plugin): remove file extension from example * docs(plugin): add more info for the sr-brakpoints documention * feat(plugin): add opacity plugin * refactor(version): update to 1.1.0
coldfrontlabs · Feb 4, 2019 · a91e6f3 · a91e6f3
1 parent bd28356
commit a91e6f3
Show file tree

Hide file tree

Showing 21 changed files with 251 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.1.0
+
+- Add opacity plugin
+- Add transparent background plugin
+- Add screen reader breakpoint selector plugin
+
 ## 1.0.0
 
 - Add testing

diff --git a/README.md b/README.md
@@ -33,11 +33,14 @@ For more detailed usage of each plugin, please see the docs.
 
 ## Classes
 
+- `.bg-colour-n`: Sets background colours with transparency - [Full documentation](docs/class/bg-transparency.md)
 - `.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)
+- `.o-n`: Sets the opacity of an element. - [Full documentation](docs/classes/opacity.md)
+- `.sr-x-only`: Breakpoint selectors for the `.sr-only` class - [Full documentation](docs/classes/sr-breakpoints.md)
 - `.text-outline`: Outlines text. - [Full documentation](docs/classes/text-outline.md)
 
 ## Mixins

diff --git a/docs/classes/bg-transparency.md b/docs/classes/bg-transparency.md
@@ -0,0 +1,37 @@
+# Transparent Backgrounds
+
+Adds background classes with transparencies.
+
+Uses the base bootstrap background classes `.bg-primary` and adds a transparency selector onto the end which corresponds to the percentage of transparency `-50`.
+
+Adds 11 variants for each background colour.
+
+```scss
+.bg-primary-10
+.bg-primary-20
+.bg-primary-25
+.bg-primary-30
+.bg-primary-40
+.bg-primary-50
+.bg-primary-60
+.bg-primary-70
+.bg-primary-75
+.bg-primary-80
+.bg-primary-90
+```
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/transparent-backgrounds';
+```
+
+### HTML
+
+```html
+<div class="bg-success-70 text-light">
+  <p>This is some text.</p>
+</div>
+```
diff --git a/docs/classes/opacity.md b/docs/classes/opacity.md
@@ -0,0 +1,35 @@
+# Transparent Backgrounds
+
+Adds opacity classes.
+
+Applies opacity to an element with a percentage directly tied to the class name (e.g. `o-60` for 60% opacity).
+
+Adds 11 variants for opacity.
+
+```scss
+.o-10
+.o-20
+.o-25
+.o-30
+.o-40
+.o-50
+.o-60
+.o-70
+.o-75
+.o-80
+.o-90
+```
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/opacity';
+```
+
+### HTML
+
+```html
+<p class="o-75">This is some faded text.</p>
+```
diff --git a/docs/classes/sr-breakpoints.md b/docs/classes/sr-breakpoints.md
@@ -0,0 +1,35 @@
+# Screen Reader Breakpoints
+
+Extends the vanilla Bootstrap `.sr-only` and `.sr-only-focusable` classes to function with media-breakpoint mixins.
+
+The classes follow the pattern `sr-[breakpoint]-[query-type]` and `sr-[breakpoint]-[query-type]-focusable`.
+
+The query types use the provided media queries aside from the "between" query:
+
+- `only`: to target only the selected breakpoint
+- `up`: to target the selected breakpoint and anything larger
+- `down`: to target the select breakpoint and anything smaller
+
+```scss
+.sr-md-only
+.sr-md-up
+.sr-md-down
+
+.sr-md-only-focusable
+.sr-md-up-focusable
+.sr-md-down-focusable
+```
+
+## Usage
+
+### Styles
+
+```scss
+@import 'path/to/node_modules/bootstrap-scss-plugins/scss/screen-reader-breakpoints';
+```
+
+### HTML
+
+```html
+<p class="sr-md-up">This is some text that can been seen on small and smaller screens.</p>
+```
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-scss-plugins",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A suite of SCSS plugins used for developing Bootstrap 4 themes and sites.",
   "eslintConfig": "./.eslintrc.js",
   "scripts": {

diff --git a/scss/mixins/opacity.scss b/scss/mixins/opacity.scss
@@ -0,0 +1,11 @@
+// ----------
+// Mixin to add opacity classes.
+//
+// Creates a selector based on the $parent provided and the $value given.
+// ----------
+
+@mixin opacity-variant($parent, $value) {
+  #{$parent} {
+    opacity: $value;
+  }
+}
diff --git a/scss/mixins/screen-reader-breakpoints.scss b/scss/mixins/screen-reader-breakpoints.scss
@@ -0,0 +1,41 @@
+// ----------
+// Screen reader breakpoint mixins.
+// ----------
+
+@each $breakpoint, $value in $grid-breakpoints {
+  .sr-#{$breakpoint}-only {
+    @include media-breakpoint-only($breakpoint) {
+      @include sr-only;
+    }
+  }
+
+  .sr-#{$breakpoint}-up {
+    @include media-breakpoint-up($breakpoint) {
+      @include sr-only;
+    }
+  }
+
+  .sr-#{$breakpoint}-down {
+    @include media-breakpoint-down($breakpoint) {
+      @include sr-only;
+    }
+  }
+
+  .sr-#{$breakpoint}-only-focusable {
+    @include media-breakpoint-only($breakpoint) {
+      @include sr-only-focusable;
+    }
+  }
+
+  .sr-#{$breakpoint}-up-focusable {
+    @include media-breakpoint-up($breakpoint) {
+      @include sr-only-focusable;
+    }
+  }
+
+  .sr-#{$breakpoint}-down-focusable {
+    @include media-breakpoint-down($breakpoint) {
+      @include sr-only-focusable;
+    }
+  }
+}
diff --git a/scss/mixins/transparent-backgrounds.scss b/scss/mixins/transparent-backgrounds.scss
@@ -0,0 +1,13 @@
+// ----------
+// Mixin to add transparent background classes.
+//
+// Creates a selector based on the $parent provided and the $colour and $value given.
+// ----------
+
+// sass-lint:disable no-color-literals
+
+@mixin transparent-background-variant($parent, $colour, $value) {
+  #{$parent} {
+    background-color: rgba($colour, $value);
+  }
+}
diff --git a/scss/opacity.scss b/scss/opacity.scss
@@ -0,0 +1,6 @@
+// ----------
+// Opacity plugin.
+// ----------
+
+@import './mixins/opacity';
+@import './utilities/opacity';
diff --git a/scss/screen-reader-breakpoints.scss b/scss/screen-reader-breakpoints.scss
@@ -0,0 +1,5 @@
+// ----------
+// Screen reader breakpoints plugin
+// ----------
+
+@import './mixins/screen-reader-breakpoints';
diff --git a/scss/transparent-backgrounds.scss b/scss/transparent-backgrounds.scss
@@ -0,0 +1,6 @@
+// ----------
+// Transparent backgrounds plugin.
+// ----------
+
+@import './mixins/transparent-backgrounds';
+@import './utilities/transparent-backgrounds';
diff --git a/scss/utilities/opacity.scss b/scss/utilities/opacity.scss
@@ -0,0 +1,14 @@
+// ----------
+// Opacity classes.
+// ----------
+
+@for $x from 1 to 10 {
+  $class: '.o-#{($x * 10)}';
+  $value: $x / 10;
+
+  @include opacity-variant($class, $value);
+}
+
+// Add classes for 25% and 75%.
+@include opacity-variant('.o-25', .25);
+@include opacity-variant('.o-75', .75);
diff --git a/scss/utilities/transparent-backgrounds.scss b/scss/utilities/transparent-backgrounds.scss
@@ -0,0 +1,16 @@
+// ----------
+// Transparent background classes.
+// ----------
+
+@each $name, $hex in $theme-colors {
+  @for $x from 1 to 10 {
+    $class: '.bg-#{$name}-#{($x * 10)}';
+    $value: $x / 10;
+
+    @include transparent-background-variant($class, $hex, $value);
+  }
+
+  // Add classes for 25% and 75%.
+  @include transparent-background-variant('.bg-#{$name}-25', $hex, .25);
+  @include transparent-background-variant('.bg-#{$name}-75', $hex, .75);
+}
diff --git a/test/classes/font-sizes.scss b/test/classes/font-sizes.scss
@@ -1,5 +1,5 @@
 // ----------
-// font-size class plugin.
+// Compile test for .font-size classes.
 // ----------
 
 @import '../../node_modules/bootstrap/scss/bootstrap';

diff --git a/test/classes/opacity.scss b/test/classes/opacity.scss
@@ -0,0 +1,6 @@
+// ----------
+// Compile test for .opacity-n classes.
+// ----------
+
+@import '../../node_modules/bootstrap/scss/bootstrap';
+@import '../../scss/opacity';
diff --git a/test/classes/screen-reader-breakpoints.scss b/test/classes/screen-reader-breakpoints.scss
@@ -0,0 +1,6 @@
+// ----------
+// Compile test for .sr-breakpoint classes.
+// ----------
+
+@import '../../node_modules/bootstrap/scss/bootstrap';
+@import '../../scss/screen-reader-breakpoints';
diff --git a/test/classes/text-outline.scss b/test/classes/text-outline.scss
@@ -1,10 +1,5 @@
 // ----------
-// text-outline class plugin.
-//
-// The purpose of this plugin is to create a dark stroke around
-// text that doesn't quite meet contrast requirements.
-//
-// It should really only be used if you have no other way around fixing the contrast.
+// Compile test for .text-outline classes.
 // ----------
 
 @import '../../node_modules/bootstrap/scss/bootstrap';

diff --git a/test/classes/transparent-backgrounds.scss b/test/classes/transparent-backgrounds.scss
@@ -0,0 +1,6 @@
+// ----------
+// Compile test for .background-colour-x classes.
+// ----------
+
+@import '../../node_modules/bootstrap/scss/bootstrap';
+@import '../../scss/transparent-backgrounds';
diff --git a/test/mixins/media-ie.scss b/test/mixins/media-ie.scss
@@ -1,5 +1,5 @@
 // ----------
-// media-ie mixin plugin.
+// Compile test for media-ie mixins.
 // ----------
 
 @import '../../node_modules/bootstrap/scss/bootstrap';

diff --git a/test/other/responsive-typography.scss b/test/other/responsive-typography.scss
@@ -1,5 +1,5 @@
 // ----------
-// Responsive typography plugin.
+// Compile test for responsive typography.
 // ----------
 
 @import '../../node_modules/bootstrap/scss/bootstrap';