Skip to content

Commit 8e87952

Browse files
NickDJMNickDJM
authored
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
1 parent 58a0c30 commit 8e87952

12 files changed

+313
-10
lines changed

‎LICENSE

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
3+
Copyright 2019 Nick Milton
4+
5+
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.
6+
7+
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

+36-5
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,48 @@
22

33
A suite of SCSS plugins used for developing Bootstrap 4 themes and sites.
44

5-
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.
5+
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.
66

77
**Can't you do this yourself by editing some variables?**
88

99
Of course you can! This package exists purely to make it faster to replicate some commonly used customizations.
1010

1111
## Usage
1212

13-
There are a couple ways in use these plugins:
13+
There are a couple ways to use the plugins, but all steps begin with importing the main Bootstrap files first.
1414

15-
1. Add all of them to your project by importing the `plugin.scss` file found in the root `scss/` directory, or
16-
2. Add individual plugins by importing the other `.scss` files found in the root `scss/` directory.
15+
### Include everything using the plugin file
1716

18-
Once you have done that, you can use them as you would any other bootstrap feature.
17+
```scss
18+
@import 'path/to/node_modules/bootstrap/scss/bootstrap';
19+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugins';
20+
```
21+
22+
### Include single plugins
23+
24+
```scss
25+
@import 'path/to/node_modules/bootstrap/scss/bootstrap';
26+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/responsive-typography';
27+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/font-sizes';
28+
```
29+
30+
Once you have imported all the files you need, you can simply use the classes and mixins are you would any other Bootstrap feature.
31+
32+
For more detailed usage of each plugin, please see the docs.
33+
34+
## Classes
35+
36+
- `.border-width-n`: Sets the width of borders. - [Full documentation](docs/classes/border-widths.md)
37+
- `.btn-rounded`: Rounds the corners of buttons. - [Full documentation](docs/classes/btn-rounded.md)
38+
- `.btn-squared`: Squares off the corners of buttons. - [Full documentation](docs/classes/btn-squared.md)
39+
- `.col-count-n`: Sets the column count of groups. - [Full documentation](docs/classes/col-count.md)
40+
- `.font-size-x`: Sets the font size of text. - [Full documentation](docs/classes/font-sizes.md)
41+
- `.text-outline`: Outlines text. - [Full documentation](docs/classes/text-outline.md)
42+
43+
## Mixins
44+
45+
- `media-ie`: Media queries to for Internet Explorer. - [Full documentation](docs/mixins/media-ie.md)
46+
47+
## Other Features
48+
49+
- Responsive typography - [Full documentation](docs/other/responsive-typography.md)

‎docs/classes/border-widths.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Border Widths
2+
3+
Adds a way to specify the width of bordered elements through classes.
4+
5+
By default there are 3 classes for border widths:
6+
7+
```scss
8+
.border-width-1
9+
.border-width-2
10+
.border-width-3
11+
```
12+
13+
## Usage
14+
15+
### Styles
16+
17+
```scss
18+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/border-widths';
19+
```
20+
21+
### HTML
22+
23+
```html
24+
<img src="#" class="img-fluid border border-width-3" />
25+
```
26+
27+
## Customization
28+
29+
- `$border-width-unit`: Sets the unit of the width (e.g. px, em, rem).
30+
- `$border-width-min`: Sets the minimum width class (default is 1).
31+
- `$border-width-max`: Sets the maximum width class (default is 3).
32+
33+
**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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Rounded Buttons
2+
3+
Rounds the corners of buttons to get a rounded effect
4+
5+
Simply add the `.btn-rounded` class to your existing buttons and the styles will apply.
6+
7+
## Usage
8+
9+
### Styles
10+
11+
```scss
12+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/button-rounded';
13+
```
14+
15+
### HTML
16+
17+
```html
18+
<button class="btn btn-rounded btn-primary">Click me!</button>
19+
```

‎docs/classes/btn-squared.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Rounded Buttons
2+
3+
Squares the corners of buttons to get a 90 degree angle.
4+
5+
Simply add the `.btn-squared` class to your existing buttons and the styles will apply.
6+
7+
## Usage
8+
9+
### Styles
10+
11+
```scss
12+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/button-squared';
13+
```
14+
15+
### HTML
16+
17+
```html
18+
<button class="btn btn-squared btn-primary">Click me!</button>
19+
```

‎docs/classes/col-count.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Column Count
2+
3+
Sets the number of columns a card column group has.
4+
5+
## Default Classes
6+
7+
There is a class for each column in `$grid-columns`:
8+
9+
`.col-count-1` through `.col-count-12`
10+
11+
You can also add breakpoints to the `.col-count` classes:
12+
13+
- `.col-count-md-1`
14+
- `.col-count-xl-3`
15+
16+
## Usage
17+
18+
### Styles
19+
20+
```scss
21+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugin';
22+
```
23+
24+
### HTML
25+
26+
```html
27+
<div class="card-columns col-count-4 col-count-sm-2">
28+
<div class="card">
29+
...
30+
</div>
31+
<div class="card">
32+
...
33+
</div>
34+
<div class="card">
35+
...
36+
</div>
37+
<div class="card">
38+
...
39+
</div>
40+
</div>
41+
```
42+
43+
## Customization
44+
45+
Changing the `$grid-columns` variable will change the number of `.col-count` classes available.

‎docs/classes/font-sizes.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Font Sizes
2+
3+
Sets the size of font used in a specific element.
4+
5+
You can add a breakpoint selector before the size selector for more control.
6+
7+
There are font size classes for each `$font-size` variables including the two new variables added by this plguin:
8+
9+
```scss
10+
.font-size-xs
11+
.font-size-sm
12+
.font-size-md
13+
.font-size-lg
14+
.font-size-xl
15+
```
16+
17+
You can also add breakpoints to the classes in the format of `.font-size-[breakpoint]-[size]`.
18+
19+
i.e. `.font-size-sm-lg` which will apply the `.font-size-lg` class on small and larger screens.
20+
21+
## Usage
22+
23+
### Styles
24+
25+
```scss
26+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/font-sizes';
27+
```
28+
29+
### HTML
30+
31+
```html
32+
<p class="font-size-lg">This is some text</p>
33+
```
34+
35+
## Customization
36+
37+
- `$font-size-xs`: Sets the font size for `.font-size-xs`
38+
- `$font-size-sm`: Sets the font size for `.font-size-sm`
39+
- `$font-size-base`: Sets the font size for `.font-size-md`
40+
- `$font-size-lg`: Sets the font size for `.font-size-lg`
41+
- `$font-size-xl`: Sets the font size for `.font-size-xl`

‎docs/classes/text-outline.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Text Outline
2+
3+
Outlines text using text shadows.
4+
5+
This class really only exists to provide a slightly better contrast ration when your text doesn't meet colour contrast standards.
6+
7+
There is a default text-outline class and one for each colour found in `$theme-colors`.
8+
9+
```scss
10+
.text-outline
11+
12+
.text-outline-primary
13+
.text-outline-secondary
14+
.text-outline-success
15+
.text-outline-info
16+
.text-outline-warning
17+
.text-outline-danger
18+
.text-outline-light
19+
.text-outline-dark
20+
```
21+
22+
## Usage
23+
24+
### Styles
25+
26+
```scss
27+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/text-outline';
28+
```
29+
30+
### HTML
31+
32+
```html
33+
<p class="text-outline">This is some text.</p>
34+
```
35+
36+
## Customization
37+
38+
- `$text-outline-width` - Sets the width of the outline.

‎docs/mixins/media-ie.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Internet Explorer Media Queries
2+
3+
Implements the existing breakpoint media queries, but adds a selector for Internet Explorer to all of them.
4+
5+
Also adds a simple mixin to target Internet Explorer without any breakpoints.
6+
7+
```scss
8+
media-ie
9+
10+
media-ie-breakpoint-up()
11+
media-ie-breakpoint-down()
12+
media-ie-breakpoint-between()
13+
media-ie-breakpoint-only()
14+
```
15+
16+
## Usage
17+
18+
### Styles
19+
20+
```scss
21+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugin';
22+
```
23+
24+
```scss
25+
@include media-ie {
26+
...
27+
}
28+
29+
@include media-ie-breakpoint-up(md) {
30+
...
31+
}
32+
33+
@include media-ie-only(xl) {
34+
...
35+
}
36+
```

‎docs/other/responsive-typography.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Responsive Typography
2+
3+
Creates a simple toggle to make all text on your site responsive; changing size for every media breakpoint.
4+
5+
## Usage
6+
7+
### Styles
8+
9+
```scss
10+
@import 'path/to/node_modules/bootstrap-scss-plugins/scss/plugin';
11+
```
12+
13+
```scss
14+
$enable-responsive-typography: true;
15+
```
16+
17+
## Customization
18+
19+
- `$enable-responsive-typography`: A boolean that toggles the plugin on/off
20+
- `$responsive-typography-base`: Sets the base font size for extra small and larger screens. Based off `$font-size-base`
21+
- `$responsive-typography-sm`: Sets the font size for small and larger screens. Based off `$responsive-typography-base`
22+
- `$responsive-typography-md`: Sets the font size for medium and larger screens. Based off `$responsive-typography-base`
23+
- `$responsive-typography-lg`: Sets the font size for large and larger screens. Based off `$responsive-typography-base`
24+
- `$responsive-typography-xl`: Sets the font size for extra large and larger screens. Based off `$responsive-typography-base`

‎package.json

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
22
"name": "bootstrap-scss-plugins",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"description": "A suite of SCSS plugins used for developing Bootstrap 4 themes and sites.",
55
"scripts": {
6-
"lint": "sass-lint -v -c .sass-lint.yml"
6+
"lint": "sass-lint -v -c .sass-lint.yml",
7+
"commit": "npx git cz"
78
},
89
"repository": {
910
"type": "git",
@@ -24,6 +25,13 @@
2425
"bootstrap": "^4.2.1"
2526
},
2627
"devDependencies": {
28+
"commitizen": "^3.0.5",
29+
"cz-conventional-changelog": "^2.1.0",
2730
"sass-lint": "^1.12.1"
31+
},
32+
"config": {
33+
"commitizen": {
34+
"path": "./node_modules/cz-conventional-changelog"
35+
}
2836
}
2937
}

‎scss/utilities/border-widths.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
// border-width classes.
33
// ----------
44

5-
$border-unit: 'px' !default;
5+
$border-width-unit: 'px' !default;
6+
$border-width-min: 1 !default;
7+
$border-width-max: 3 !default;
68

7-
@for $i from 1 through 5 {
8-
@include border-width-variant('.border-width-#{$i}', $i#{$border-unit});
9+
@for $i from $border-width-min through $border-width-max {
10+
@include border-width-variant('.border-width-#{$i}', $i#{$border-width-unit});
911
}

0 commit comments

Comments
 (0)