feat(package): initial commit

NickDJM · NickDJM · commit 27e9a2e44cc6 · 2019-01-11T22:41:47.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+package-lock.json
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -0,0 +1,17 @@
+files:
+  include:
+    - 'scss/**/*.scss'
+syntax:
+    include:
+      - scss
+      - sass
+options:
+  formatter: stylish
+  merge-default-rules: true
+rules:
+  property-sort-order:
+    - 1
+    - order: smacss
+  placeholder-in-extend: 0
+  no-important: 0
+  no-vendor-prefixes: 0
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# bootstrap-scss-plugins
+
+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.
+
+**Can't you do this yourself by editing some variables?**
+
+Of course you can! This package exists purely to make it faster to replicate some commonly used customizations.
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "bootstrap-scss-plugins",
+  "version": "0.1.0",
+  "description": "A suite of SCSS plugins used for developing Bootstrap 4 themes and sites.",
+  "scripts": {
+    "lint": "sass-lint -v -c .sass-lint.yml"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NickDJM/bootstrap-scss-plugins.git"
+  },
+  "keywords": [
+    "bootstrap",
+    "scss",
+    "sass"
+  ],
+  "author": "Nick Milton",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/NickDJM/bootstrap-scss-plugins/issues"
+  },
+  "homepage": "https://github.com/NickDJM/bootstrap-scss-plugins#readme",
+  "dependencies": {
+    "bootstrap": "^4.2.1"
+  },
+  "devDependencies": {
+    "sass-lint": "^1.12.1"
+  }
+}
diff --git a/scss/border-widths.scss b/scss/border-widths.scss
@@ -0,0 +1,6 @@
+// ----------
+// border-width class plugin.
+// ----------
+
+@import './mixins/border-widths';
+@import './utilities/border-widths';
diff --git a/scss/button-rounded.scss b/scss/button-rounded.scss
@@ -0,0 +1,5 @@
+// ----------
+// btn-rounded class plugin.
+// ----------
+
+@import './utilities/button-rounded';
diff --git a/scss/button-squared.scss b/scss/button-squared.scss
@@ -0,0 +1,5 @@
+// ----------
+// btn-squared class plugin.
+// ----------
+
+@import './utilities/button-squared';
diff --git a/scss/column-count.scss b/scss/column-count.scss
@@ -0,0 +1,6 @@
+// ----------
+// column-count class plugin.
+// ----------
+
+@import './mixins/column-count';
+@import './utilities/column-count';
diff --git a/scss/font-sizes.scss b/scss/font-sizes.scss
@@ -0,0 +1,6 @@
+// ----------
+// font-size class plugin.
+// ----------
+
+@import './mixins/font-sizes';
+@import './utilities/font-sizes';
diff --git a/scss/media-ie.scss b/scss/media-ie.scss
@@ -0,0 +1,5 @@
+// ----------
+// media-ie mixin plugin.
+// ----------
+
+@import './mixins/media-ie';
diff --git a/scss/mixins/border-widths.scss b/scss/mixins/border-widths.scss
@@ -0,0 +1,11 @@
+// ----------
+// Mixin to add border-width classes.
+//
+// Creates a selector using the $parent provided and the $value given.
+// ----------
+
+@mixin border-width-variant($parent, $value) {
+  #{$parent} {
+    border-width: $value !important;
+  }
+}
diff --git a/scss/mixins/column-count.scss b/scss/mixins/column-count.scss
@@ -0,0 +1,22 @@
+// ----------
+// Mixin to add column-count classes.
+//
+// Creates a selector using the $parent provided and the $value given.
+// Also generates selectors based on $grid-brakpoints for different screen sizes.
+// ----------
+
+@mixin column-count-variant($parent, $value) {
+  #{$parent} {
+    &-#{$value} {
+      column-count: $value !important;
+    }
+
+    @each $breakpoint, $value in $grid-breakpoints {
+      &-#{$breakpoint}-#{$value} {
+        @include media-breakpoint-up($breakpoint) {
+          column-count: $value !important;
+        }
+      }
+    }
+  }
+}
diff --git a/scss/mixins/font-sizes.scss b/scss/mixins/font-sizes.scss
@@ -0,0 +1,22 @@
+// ----------
+// Mixin to add font-size classes.
+//
+// Creates a selector based on the $parent and $child provided and the $value given.
+// Also generates selectors based on $grid-brakpoints for different screen sizes.
+// ----------
+
+@mixin font-size-variant($parent, $child, $value) {
+  #{$parent} {
+    &-#{$child} {
+      font-size: $value !important;
+    }
+
+    @each $breakpoint, $value in $grid-breakpoints {
+      &-#{$breakpoint}-#{$child} {
+        @include media-breakpoint-up($breakpoint) {
+          font-size: $value !important;
+        }
+      }
+    }
+  }
+}
diff --git a/scss/mixins/media-ie.scss b/scss/mixins/media-ie.scss
@@ -0,0 +1,79 @@
+//----------
+// Mixins to detect IE.
+//----------
+
+// Internet Explorer 10+ check.
+@mixin media-ie {
+  @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    @content;
+  }
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-ie-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-ie-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-ie-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-ie-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-ie-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-ie-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-ie-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-ie-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}
diff --git a/scss/mixins/text-outline.scss b/scss/mixins/text-outline.scss
@@ -0,0 +1,15 @@
+// ----------
+// Mixin to add text-outline classes.
+//
+// Creates a selector based on the $parent provided and the $colour given.
+// ----------
+
+@mixin text-outline-variant ($parent, $colour, $width) {
+  #{$parent} {
+    text-shadow:
+    -$width -$width 0 $colour,
+    $width -$width 0 $colour,
+    -$width $width 0 $colour,
+    $width $width 0 $colour !important;
+  }
+}
diff --git a/scss/plugins.scss b/scss/plugins.scss
@@ -0,0 +1,12 @@
+// ----------
+// All plugins.
+// ----------
+
+@import './border-widths';
+@import './button-rounded';
+@import './button-squared';
+@import './column-count';
+@import './font-sizes';
+@import './media-ie';
+@import './responsive-typography';
+@import './text-outline';
diff --git a/scss/responsive-typography.scss b/scss/responsive-typography.scss
@@ -0,0 +1,5 @@
+// ----------
+// Responsive typography plugin.
+// ----------
+
+@import './utilities/responsive-typography';
diff --git a/scss/text-outline.scss b/scss/text-outline.scss
@@ -0,0 +1,11 @@
+// ----------
+// 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.
+// ----------
+
+@import './mixins/text-outline';
+@import './utilities/text-outline';
diff --git a/scss/utilities/border-widths.scss b/scss/utilities/border-widths.scss
@@ -0,0 +1,9 @@
+// ----------
+// border-width classes.
+// ----------
+
+$border-unit: 'px' !default;
+
+@for $i from 1 through 5 {
+  @include border-width-variant('.border-width-#{$i}', $i#{$border-unit});
+}
diff --git a/scss/utilities/button-rounded.scss b/scss/utilities/button-rounded.scss
@@ -0,0 +1,18 @@
+// ----------
+// .btn-rounded class.
+//
+// Adds .btn-rounded classes.
+// ----------
+
+// Generate classes
+.btn-rounded {
+  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-font-size * 1.2);
+
+  &.btn-lg {
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-font-size-lg * 1.2);
+  }
+
+  &.btn-sm {
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-font-size-sm * 1.2);
+  }
+}
diff --git a/scss/utilities/button-square.scss b/scss/utilities/button-square.scss
@@ -0,0 +1,18 @@
+// ----------
+// .btn-squared class.
+//
+// Adds .btn-squared classes.
+// ----------
+
+// Generate classes
+.btn-squared {
+  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, 0);
+
+  &.btn-lg {
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, 0);
+  }
+
+  &.btn-sm {
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, 0);
+  }
+}
diff --git a/scss/utilities/column-count.scss b/scss/utilities/column-count.scss
@@ -0,0 +1,8 @@
+// ----------
+// col-count classes.
+// ----------
+
+// Generate column-count classes based on the number of $grid-columns available.
+@for $i from 1 to $grid-columns {
+  @include column-count-variant('.col-count', $i);
+}
diff --git a/scss/utilities/font-sizes.scss b/scss/utilities/font-sizes.scss
@@ -0,0 +1,14 @@
+// ----------
+// font-size classes.
+// ----------
+
+// Add new font-size variables.
+$font-size-xs: $font-size-base * .75 !default;
+$font-size-xl: $font-size-base * 1.5 !default;
+
+// Generate classes.
+@include font-size-variant('.font-size', 'xs', $font-size-xs);
+@include font-size-variant('.font-size', 'sm', $font-size-sm);
+@include font-size-variant('.font-size', 'md', $font-size-base);
+@include font-size-variant('.font-size', 'lg', $font-size-lg);
+@include font-size-variant('.font-size', 'xl', $font-size-xl);
diff --git a/scss/utilities/responsive-typography.scss b/scss/utilities/responsive-typography.scss
@@ -0,0 +1,37 @@
+// ----------
+// Responsize typography settings.
+//
+// Changes the typography to react responsively based on screen size.
+//
+// Set $enable-responsize-typography to activate.
+// ----------
+
+$enable-responsive-typography: false !default;
+
+$responsive-typography-base: $font-size-base !default;
+$responsive-typography-sm: $responsive-typography-base * 1.1 !default;
+$responsive-typography-md: $responsive-typography-base * 1.2 !default;
+$responsive-typography-lg: $responsive-typography-base * 1.3 !default;
+$responsive-typography-xl: $responsive-typography-base * 1.4 !default;
+
+@if $enable-responsive-typography {
+  html {
+    @include media-breakpoint-up(sm) {
+      font-size: $responsive-typography-sm;
+    }
+
+    @include media-breakpoint-up(md) {
+      font-size: $responsive-typography-md;
+    }
+
+    @include media-breakpoint-up(lg) {
+      font-size: $responsive-typography-lg;
+    }
+
+    @include media-breakpoint-up(xl) {
+      font-size: $responsive-typography-xl;
+    }
+
+    font-size: $responsive-typography-base;
+  }
+}
diff --git a/scss/utilities/text-outline.scss b/scss/utilities/text-outline.scss

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.DS_Store`
	`2`	`+node_modules`
	`3`	`+package-lock.json`