Skip to content

Commit a91e6f3

Browse files
NickDJMNickDJM
authored
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
1 parent bd28356 commit a91e6f3

21 files changed

+251
-10
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## 1.1.0
4+
5+
- Add opacity plugin
6+
- Add transparent background plugin
7+
- Add screen reader breakpoint selector plugin
8+
39
## 1.0.0
410

511
- Add testing

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,14 @@ For more detailed usage of each plugin, please see the docs.
3333

3434
## Classes
3535

36+
- `.bg-colour-n`: Sets background colours with transparency - [Full documentation](docs/class/bg-transparency.md)
3637
- `.border-width-n`: Sets the width of borders. - [Full documentation](docs/classes/border-widths.md)
3738
- `.btn-rounded`: Rounds the corners of buttons. - [Full documentation](docs/classes/btn-rounded.md)
3839
- `.btn-squared`: Squares off the corners of buttons. - [Full documentation](docs/classes/btn-squared.md)
3940
- `.col-count-n`: Sets the column count of groups. - [Full documentation](docs/classes/col-count.md)
4041
- `.font-size-x`: Sets the font size of text. - [Full documentation](docs/classes/font-sizes.md)
42+
- `.o-n`: Sets the opacity of an element. - [Full documentation](docs/classes/opacity.md)
43+
- `.sr-x-only`: Breakpoint selectors for the `.sr-only` class - [Full documentation](docs/classes/sr-breakpoints.md)
4144
- `.text-outline`: Outlines text. - [Full documentation](docs/classes/text-outline.md)
4245

4346
## Mixins

‎docs/classes/bg-transparency.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Transparent Backgrounds
2+
3+
Adds background classes with transparencies.
4+
5+
Uses the base bootstrap background classes `.bg-primary` and adds a transparency selector onto the end which corresponds to the percentage of transparency `-50`.
6+
7+
Adds 11 variants for each background colour.
8+
9+
```scss
10+
.bg-primary-10
11+
.bg-primary-20
12+
.bg-primary-25
13+
.bg-primary-30
14+
.bg-primary-40
15+
.bg-primary-50
16+
.bg-primary-60
17+
.bg-primary-70
18+
.bg-primary-75
19+
.bg-primary-80
20+
.bg-primary-90
21+
```
22+
23+
## Usage
24+
25+
### Styles
26+
27+
```scss
28+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/transparent-backgrounds';
29+
```
30+
31+
### HTML
32+
33+
```html
34+
<div class="bg-success-70 text-light">
35+
<p>This is some text.</p>
36+
</div>
37+
```

‎docs/classes/opacity.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Transparent Backgrounds
2+
3+
Adds opacity classes.
4+
5+
Applies opacity to an element with a percentage directly tied to the class name (e.g. `o-60` for 60% opacity).
6+
7+
Adds 11 variants for opacity.
8+
9+
```scss
10+
.o-10
11+
.o-20
12+
.o-25
13+
.o-30
14+
.o-40
15+
.o-50
16+
.o-60
17+
.o-70
18+
.o-75
19+
.o-80
20+
.o-90
21+
```
22+
23+
## Usage
24+
25+
### Styles
26+
27+
```scss
28+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/opacity';
29+
```
30+
31+
### HTML
32+
33+
```html
34+
<p class="o-75">This is some faded text.</p>
35+
```

‎docs/classes/sr-breakpoints.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Screen Reader Breakpoints
2+
3+
Extends the vanilla Bootstrap `.sr-only` and `.sr-only-focusable` classes to function with media-breakpoint mixins.
4+
5+
The classes follow the pattern `sr-[breakpoint]-[query-type]` and `sr-[breakpoint]-[query-type]-focusable`.
6+
7+
The query types use the provided media queries aside from the "between" query:
8+
9+
- `only`: to target only the selected breakpoint
10+
- `up`: to target the selected breakpoint and anything larger
11+
- `down`: to target the select breakpoint and anything smaller
12+
13+
```scss
14+
.sr-md-only
15+
.sr-md-up
16+
.sr-md-down
17+
18+
.sr-md-only-focusable
19+
.sr-md-up-focusable
20+
.sr-md-down-focusable
21+
```
22+
23+
## Usage
24+
25+
### Styles
26+
27+
```scss
28+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/screen-reader-breakpoints';
29+
```
30+
31+
### HTML
32+
33+
```html
34+
<p class="sr-md-up">This is some text that can been seen on small and smaller screens.</p>
35+
```

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bootstrap-scss-plugins",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "A suite of SCSS plugins used for developing Bootstrap 4 themes and sites.",
55
"eslintConfig": "./.eslintrc.js",
66
"scripts": {

‎scss/mixins/opacity.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// ----------
2+
// Mixin to add opacity classes.
3+
//
4+
// Creates a selector based on the $parent provided and the $value given.
5+
// ----------
6+
7+
@mixin opacity-variant($parent, $value) {
8+
#{$parent} {
9+
opacity: $value;
10+
}
11+
}

‎scss/mixins/screen-reader-breakpoints.scss

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// ----------
2+
// Screen reader breakpoint mixins.
3+
// ----------
4+
5+
@each $breakpoint, $value in $grid-breakpoints {
6+
.sr-#{$breakpoint}-only {
7+
@include media-breakpoint-only($breakpoint) {
8+
@include sr-only;
9+
}
10+
}
11+
12+
.sr-#{$breakpoint}-up {
13+
@include media-breakpoint-up($breakpoint) {
14+
@include sr-only;
15+
}
16+
}
17+
18+
.sr-#{$breakpoint}-down {
19+
@include media-breakpoint-down($breakpoint) {
20+
@include sr-only;
21+
}
22+
}
23+
24+
.sr-#{$breakpoint}-only-focusable {
25+
@include media-breakpoint-only($breakpoint) {
26+
@include sr-only-focusable;
27+
}
28+
}
29+
30+
.sr-#{$breakpoint}-up-focusable {
31+
@include media-breakpoint-up($breakpoint) {
32+
@include sr-only-focusable;
33+
}
34+
}
35+
36+
.sr-#{$breakpoint}-down-focusable {
37+
@include media-breakpoint-down($breakpoint) {
38+
@include sr-only-focusable;
39+
}
40+
}
41+
}

‎scss/mixins/transparent-backgrounds.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// ----------
2+
// Mixin to add transparent background classes.
3+
//
4+
// Creates a selector based on the $parent provided and the $colour and $value given.
5+
// ----------
6+
7+
// sass-lint:disable no-color-literals
8+
9+
@mixin transparent-background-variant($parent, $colour, $value) {
10+
#{$parent} {
11+
background-color: rgba($colour, $value);
12+
}
13+
}

‎scss/opacity.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// ----------
2+
// Opacity plugin.
3+
// ----------
4+
5+
@import './mixins/opacity';
6+
@import './utilities/opacity';

‎scss/screen-reader-breakpoints.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// ----------
2+
// Screen reader breakpoints plugin
3+
// ----------
4+
5+
@import './mixins/screen-reader-breakpoints';

‎scss/transparent-backgrounds.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// ----------
2+
// Transparent backgrounds plugin.
3+
// ----------
4+
5+
@import './mixins/transparent-backgrounds';
6+
@import './utilities/transparent-backgrounds';

‎scss/utilities/opacity.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// ----------
2+
// Opacity classes.
3+
// ----------
4+
5+
@for $x from 1 to 10 {
6+
$class: '.o-#{($x * 10)}';
7+
$value: $x / 10;
8+
9+
@include opacity-variant($class, $value);
10+
}
11+
12+
// Add classes for 25% and 75%.
13+
@include opacity-variant('.o-25', .25);
14+
@include opacity-variant('.o-75', .75);

‎scss/utilities/transparent-backgrounds.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// ----------
2+
// Transparent background classes.
3+
// ----------
4+
5+
@each $name, $hex in $theme-colors {
6+
@for $x from 1 to 10 {
7+
$class: '.bg-#{$name}-#{($x * 10)}';
8+
$value: $x / 10;
9+
10+
@include transparent-background-variant($class, $hex, $value);
11+
}
12+
13+
// Add classes for 25% and 75%.
14+
@include transparent-background-variant('.bg-#{$name}-25', $hex, .25);
15+
@include transparent-background-variant('.bg-#{$name}-75', $hex, .75);
16+
}

‎test/classes/font-sizes.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// ----------
2-
// font-size class plugin.
2+
// Compile test for .font-size classes.
33
// ----------
44

55
@import '../../node_modules/bootstrap/scss/bootstrap';

‎test/classes/opacity.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// ----------
2+
// Compile test for .opacity-n classes.
3+
// ----------
4+
5+
@import '../../node_modules/bootstrap/scss/bootstrap';
6+
@import '../../scss/opacity';

‎test/classes/screen-reader-breakpoints.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// ----------
2+
// Compile test for .sr-breakpoint classes.
3+
// ----------
4+
5+
@import '../../node_modules/bootstrap/scss/bootstrap';
6+
@import '../../scss/screen-reader-breakpoints';

‎test/classes/text-outline.scss

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
// ----------
2-
// text-outline class plugin.
3-
//
4-
// The purpose of this plugin is to create a dark stroke around
5-
// text that doesn't quite meet contrast requirements.
6-
//
7-
// It should really only be used if you have no other way around fixing the contrast.
2+
// Compile test for .text-outline classes.
83
// ----------
94

105
@import '../../node_modules/bootstrap/scss/bootstrap';

‎test/classes/transparent-backgrounds.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// ----------
2+
// Compile test for .background-colour-x classes.
3+
// ----------
4+
5+
@import '../../node_modules/bootstrap/scss/bootstrap';
6+
@import '../../scss/transparent-backgrounds';

‎test/mixins/media-ie.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// ----------
2-
// media-ie mixin plugin.
2+
// Compile test for media-ie mixins.
33
// ----------
44

55
@import '../../node_modules/bootstrap/scss/bootstrap';

‎test/other/responsive-typography.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// ----------
2-
// Responsive typography plugin.
2+
// Compile test for responsive typography.
33
// ----------
44

55
@import '../../node_modules/bootstrap/scss/bootstrap';

0 commit comments

Comments
 (0)