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

Lines changed: 251 additions & 10 deletions

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
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‎

Lines changed: 3 additions & 0 deletions
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‎

Lines changed: 37 additions & 0 deletions
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‎

Lines changed: 35 additions & 0 deletions
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‎

Lines changed: 35 additions & 0 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 11 additions & 0 deletions
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‎

Lines changed: 41 additions & 0 deletions
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‎

Lines changed: 13 additions & 0 deletions
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‎

Lines changed: 6 additions & 0 deletions
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';

0 commit comments

Comments
 (0)