From f3fbb2b52f99ce0b5707a022cd596c20482ab238 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 3 Dec 2020 10:34:30 -0700 Subject: [PATCH 01/41] =?UTF-8?q?=E2=9C=A8=20(new=20module)=20adds=20map?= =?UTF-8?q?=20math=20functions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit These functions only run in the latest versions of sass, and sass-loader which support map.set --- _index.scss | 3 +- map-math/_functions.scss | 143 +++++++++++++++++++++++++++++++++++++++ map-math/_index.scss | 1 + 3 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 map-math/_functions.scss create mode 100644 map-math/_index.scss diff --git a/_index.scss b/_index.scss index a6e27fe..0bc2ebd 100644 --- a/_index.scss +++ b/_index.scss @@ -4,4 +4,5 @@ @forward 'proportional-box/index'; @forward 'proportional-text/index'; @forward 'spacing/index'; -@forward 'card-pattern/index'; \ No newline at end of file +@forward 'card-pattern/index'; +@forward 'map-math/index'; \ No newline at end of file diff --git a/map-math/_functions.scss b/map-math/_functions.scss new file mode 100644 index 0000000..0a800a4 --- /dev/null +++ b/map-math/_functions.scss @@ -0,0 +1,143 @@ +@function map-multiply($value1, $value2, $calc: false) { + @if (meta.type-of($value1) == 'map') { + @return map-multiply-responsive($value1, $value1, $value2, $calc); + } @else if (meta.type-of($value2) == 'map') { + @return map-multiply-responsive($value2, $value1, $value2, $calc); + } @else { + @if $calc { + @return calc(#{$value1} * #{$value2}); + } + @return $value1 * $value2; + } +} + +@function map-multiply-responsive($sizes, $value1, $value2, $calc: false) { + $map: (); + + @each $breakpoint, $size in $sizes { + $bp-value1: $value1; + @if (meta.type-of($value1) == 'map') { + $bp-value1: map.get($value1, $breakpoint) + } + + $bp-value2: $value2; + @if (meta.type-of($value2) == 'map') { + $bp-value2: map.get($value2, $breakpoint) + } + @if $calc { + $map: map.set($map, $breakpoint, calc(#{$bp-value1} * #{$bp-value2})); + } @else { + $map: map.set($map, $breakpoint, $bp-value1 * $bp-value2); + } + } + + @return $map; +} + +@function map-divide($value1, $value2, $calc: false) { + @if (meta.type-of($value1) == 'map') { + @return map-divide-responsive($value1, $value1, $value2, $calc); + } @else if (meta.type-of($value2) == 'map') { + @return map-divide-responsive($value2, $value1, $value2, $calc); + } @else { + @if $calc { + @return calc(#{$value1} / #{$value2}); + } + @return $value1 / $value2; + } +} + +@function map-divide-responsive($sizes, $value1, $value2, $calc: false) { + $map: (); + + @each $breakpoint, $size in $sizes { + $bp-value1: $value1; + @if (meta.type-of($value1) == 'map') { + $bp-value1: map.get($value1, $breakpoint) + } + + $bp-value2: $value2; + @if (meta.type-of($value2) == 'map') { + $bp-value2: map.get($value2, $breakpoint) + } + @if $calc { + $map: map.set($map, $breakpoint, calc(#{$bp-value1} / #{$bp-value2})); + } @else { + $map: map.set($map, $breakpoint, $bp-value1 / $bp-value2); + } + } + + @return $map; +} + +@function map-add($value1, $value2, $calc: false) { + @if (meta.type-of($value1) == 'map') { + @return map-add-responsive($value1, $value1, $value2, $calc); + } @else if (meta.type-of($value2) == 'map') { + @return map-add-responsive($value2, $value1, $value2, $calc); + } @else { + @if $calc { + @return calc(#{$value1} + #{$value2}); + } + @return $value1 + $value2; + } +} + +@function map-add-responsive($sizes, $value1, $value2, $calc: false) { + $map: (); + + @each $breakpoint, $size in $sizes { + $bp-value1: $value1; + @if (meta.type-of($value1) == 'map') { + $bp-value1: map.get($value1, $breakpoint) + } + + $bp-value2: $value2; + @if (meta.type-of($value2) == 'map') { + $bp-value2: map.get($value2, $breakpoint) + } + @if $calc { + $map: map.set($map, $breakpoint, calc(#{$bp-value1} + #{$bp-value2})); + } @else { + $map: map.set($map, $breakpoint, $bp-value1 + $bp-value2); + } + } + + @return $map; +} + +@function map-subtract($value1, $value2, $calc: false) { + @if (meta.type-of($value1) == 'map') { + @return map-subtract-responsive($value1, $value1, $value2, $calc); + } @else if (meta.type-of($value2) == 'map') { + @return map-subtract-responsive($value2, $value1, $value2, $calc); + } @else { + @if $calc { + @return calc(#{$value1} - #{$value2}); + } + @return $value1 - $value2; + } +} + +@function map-subtract-responsive($sizes, $value1, $value2, $calc: false) { + $map: (); + + @each $breakpoint, $size in $sizes { + $bp-value1: $value1; + @if (meta.type-of($value1) == 'map') { + $bp-value1: map.get($value1, $breakpoint) + } + + $bp-value2: $value2; + @if (meta.type-of($value2) == 'map') { + $bp-value2: map.get($value2, $breakpoint) + } + @if $calc { + $map: map.set($map, $breakpoint, calc(#{$bp-value1} - #{$bp-value2})); + } @else { + $map: map.set($map, $breakpoint, $bp-value1 - $bp-value2); + } + } + + @return $map; +} \ No newline at end of file diff --git a/map-math/_index.scss b/map-math/_index.scss new file mode 100644 index 0000000..4ec4498 --- /dev/null +++ b/map-math/_index.scss @@ -0,0 +1 @@ +@forward 'functions'; \ No newline at end of file From 5ddac3dbf09115a26a0ea4385f847b10c88c2578 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 10:14:45 -0700 Subject: [PATCH 02/41] =?UTF-8?q?=E2=9C=A8=20(spacing)=20adds=20one=20side?= =?UTF-8?q?=20only=20spacing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- spacing/_mixins.scss | 39 +++++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/spacing/_mixins.scss b/spacing/_mixins.scss index 47806bc..49d97b9 100644 --- a/spacing/_mixins.scss +++ b/spacing/_mixins.scss @@ -1,6 +1,18 @@ @use '~breakpoint-sass/stylesheets/breakpoint' as *; @use '../breakpoints/index' as *; @use 'variables' as *; +@use 'sass:string'; + +/// Applies horizontal whitespace +/// +/// @param {CSS } $spacing +/// The horizontal whitespace on either side of the element +/// @param {string: 'both', 'left', 'left-only', 'right', 'right-only'} $side ['both'] +/// The side to apply the spacing to. 'left' or 'right' zero out the opposite side. +/// 'left-only', and 'right-only' do not zero out the opposite side +/// @param {string: 'margin', 'padding' or ''} $attribute [$horizontal-spacing-attribute] +/// The type of spacing to use. If a blank string is passed the 'left' or 'right' +/// positional attributes will be used. @mixin horizontal-spacer($spacing, $side: 'both', $attribute: $horizontal-spacing-attribute) { // allows setting left and right position attributes @@ -10,18 +22,29 @@ // just left when left, just right when right // otherwise both - @if $side != 'left' { + @if not string.index($side, 'left') { #{$attribute}right: $spacing; - } @else { + } @else if $side != 'left-only' { #{$attribute}right: 0; } - @if $side != 'right' { + @if not string.index($side, 'right') { #{$attribute}left: $spacing; - } @else { + } @else if $side != 'right-only' { #{$attribute}left: 0; } } +/// Applies vertical whitespace +/// +/// @param {CSS } $spacing +/// The vertical whitespace on either side of the element +/// @param {string: 'both', 'top', 'top-only', 'bottom', 'bottom-only'} $side ['both'] +/// The side to apply the spacing to. 'top' or 'bottom' zero out the opposite side. +/// 'top-only', and 'bottom-only' do not zero out the opposite side +/// @param {string: 'margin', 'padding' or ''} $attribute [$vertical-spacing-attribute] +/// The type of spacing to use. If a blank string is passed the 'top' or 'bottom' +/// positional attributes will be used. + @mixin vertical-spacer($spacing, $side: 'both', $attribute: $vertical-spacing-attribute) { // allows setting top and bottom position attributes @if $attribute != '' { @@ -29,14 +52,14 @@ } // just top when top, just bottom when bottom // otherwise both - @if $side != 'top' { + @if not string.index($side, 'top') { #{$attribute}bottom: $spacing; - } @else { + } @else if $side != 'top-only' { #{$attribute}bottom: 0; } - @if $side != 'bottom' { + @if not string.index($side, 'bottom') { #{$attribute}top: $spacing; - } @else { + } @else if $side != 'bottom-only' { #{$attribute}top: 0; } } From 58ac0af310a5e82ec4093552188a9d2877ede59e Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 11:04:31 -0700 Subject: [PATCH 03/41] =?UTF-8?q?=F0=9F=93=9D=20(spacing)=20updates=20read?= =?UTF-8?q?me=20to=20reflect=20previous=20change?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c565aa8..85ab529 100644 --- a/README.md +++ b/README.md @@ -278,12 +278,14 @@ $section-spacing: ( #### Applying to only one side -Note that when the spacing is applied to only one side the element, the opposite side gets set to zero. It is not possible at this time to use the mixin to set different spacing on either side of the element using the same attribute. Configuring both sides independently will be possible in version 1.0. +Spacing can be applied to a single side of the element by passing the side as the second argument (left or right, or top or bottom). Note that when the spacing is applied to only one side the element, the opposite side gets set to zero. If you do not wish to zero out the opposite side, append '-only' to the name of the side. ``` .content-block { + // Applies spacing to the left side and zeros out the spacing on the right @include derekstrap.horizontal-spacing($regular-margins, 'left'); - @include derekstrap.vertical-spacing($section-spacing, 'top'); + // Applies spacing to the top, but does not set a bottom spacing + @include derekstrap.vertical-spacing($section-spacing, 'top-only'); } ``` From 9ab2f39ef7977f543cf8cbe5ce3525f3078a5987 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 11:48:49 -0700 Subject: [PATCH 04/41] =?UTF-8?q?=F0=9F=8E=A8=20(proportional=20mixins)=20?= =?UTF-8?q?makes=20some=20methods=20private,=20adds=20docblocks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- proportional-box/_mixins.scss | 38 +++++++++++++++---- .../{_mixins.scss => _functions.scss} | 0 proportional-text/_index.scss | 4 +- 3 files changed, 32 insertions(+), 10 deletions(-) rename proportional-text/{_mixins.scss => _functions.scss} (100%) diff --git a/proportional-box/_mixins.scss b/proportional-box/_mixins.scss index 11173d8..d22e3c1 100644 --- a/proportional-box/_mixins.scss +++ b/proportional-box/_mixins.scss @@ -6,23 +6,39 @@ // For each argument either a single value, or a breakpoint map can be passed // If a breakpoint map is passed for more than one arugment, each must include // all of the same breakpoints +/// +/// @param {number or map} $aspect-ratio +/// Aspect ratio w/h or breakpoint map of aspect ratios +/// @param {CSS or map} $vw [100vw] +/// Width of container, including whitespace +/// Length type is intended to be a vw, use of other units may have unexpected results +/// @param {CSS or map} $offset [0px] +/// Size of whitespace on one size of proportionally sized element +/// If sides are uneven, this should be the average of the two + @mixin proportional-box($aspect-ratio, $vw: 100vw, $offset: 0px) { background-size: cover; background-repeat: no-repeat; background-position: center; @if (meta.type-of($aspect-ratio) == 'map') { - @include proportional-box-responsive($aspect-ratio, $aspect-ratio, $vw, $offset); + @include _proportional-box-responsive($aspect-ratio, $aspect-ratio, $vw, $offset); } @else if (meta.type-of($vw) == 'map') { - @include proportional-box-responsive($vw, $aspect-ratio, $vw, $offset); + @include _proportional-box-responsive($vw, $aspect-ratio, $vw, $offset); } @else if (meta.type-of($offset) == 'map') { - @include proportional-box-responsive($offset, $aspect-ratio, $vw, $offset); + @include _proportional-box-responsive($offset, $aspect-ratio, $vw, $offset); } @else { - @include proportional-height($aspect-ratio, $vw, $offset) + @include _proportional-height($aspect-ratio, $vw, $offset) } } -@mixin proportional-height($aspect-ratio, $vw, $offset) { +/// Calculates height based on values passed +/// +/// @param {number} $aspect-ratio +/// @param {CSS } $vw +/// @param {CSS } $offset + +@mixin _proportional-height($aspect-ratio, $vw, $offset) { @if (meta.type-of($aspect-ratio) == 'null') { @error "$aspect-ratio undefined. Ensure all maps passed as arguments contain the same breakpoints."; } @@ -37,7 +53,13 @@ } // Only the keys matter in the sizes map. The values aren't touched. -@mixin proportional-box-responsive($sizes, $aspect-ratio, $vw, $offset) { +/// +/// @param {map} $sizes +/// @param {number or map} $aspect-ratio +/// @param {CSS or map} $vw +/// @param {CSS or map} $offset + +@mixin _proportional-box-responsive($sizes, $aspect-ratio, $vw, $offset) { @each $breakpoint, $size in $sizes { $bp-ratio: $aspect-ratio; @@ -56,10 +78,10 @@ } @if $breakpoint == 'base' { - @include proportional-height($bp-ratio, $bp-vw, $bp-offset); + @include _proportional-height($bp-ratio, $bp-vw, $bp-offset); } @else { @include breakpoint(map-get($breakpointList, $breakpoint)) { - @include proportional-height($bp-ratio, $bp-vw, $bp-offset); + @include _proportional-height($bp-ratio, $bp-vw, $bp-offset); } } } diff --git a/proportional-text/_mixins.scss b/proportional-text/_functions.scss similarity index 100% rename from proportional-text/_mixins.scss rename to proportional-text/_functions.scss diff --git a/proportional-text/_index.scss b/proportional-text/_index.scss index 10b3e47..d13bd79 100644 --- a/proportional-text/_index.scss +++ b/proportional-text/_index.scss @@ -1,9 +1,9 @@ -@forward 'mixins'; +@forward 'functions'; @use '~breakpoint-sass/stylesheets/breakpoint' as *; @use '../breakpoints/index' as *; @use '../text-sizing/index' as *; -@use 'mixins' as *; +@use 'functions' as *; html { font-size: proportional-text($base-font-size, 320px); From 2999053160c45ca50a2bb7c7dd85a547f2513656 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 14:40:19 -0700 Subject: [PATCH 05/41] =?UTF-8?q?=E2=9C=A8=20(spacing)=20allows=20maps=20p?= =?UTF-8?q?assed=20for=20any=20argument,=20improves=20docs=20and=20format?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- spacing/_mixins.scss | 190 +++++++++++++++++++++++++++++++++---------- 1 file changed, 145 insertions(+), 45 deletions(-) diff --git a/spacing/_mixins.scss b/spacing/_mixins.scss index 49d97b9..89b929e 100644 --- a/spacing/_mixins.scss +++ b/spacing/_mixins.scss @@ -2,19 +2,103 @@ @use '../breakpoints/index' as *; @use 'variables' as *; @use 'sass:string'; +@use 'sass:meta'; +@use 'sass:map'; + /// Applies horizontal whitespace /// -/// @param {CSS } $spacing -/// The horizontal whitespace on either side of the element -/// @param {string: 'both', 'left', 'left-only', 'right', 'right-only'} $side ['both'] -/// The side to apply the spacing to. 'left' or 'right' zero out the opposite side. +/// @param {CSS or map} $spacing +/// The horizontal whitespace on either side of the element or a map of such values +/// @param {string or map} $side ['both'] +/// The side to apply the spacing to. 'both', 'left', 'left-only', 'right', or 'right-only' +/// Or a map of such values +/// 'left' or 'right' zero out the opposite side. /// 'left-only', and 'right-only' do not zero out the opposite side -/// @param {string: 'margin', 'padding' or ''} $attribute [$horizontal-spacing-attribute] -/// The type of spacing to use. If a blank string is passed the 'left' or 'right' -/// positional attributes will be used. +/// @param {string or map} $attribute [$horizontal-spacing-attribute] +/// The type of spacing to use. 'margin', 'padding' or '' - or a map of such values +/// If a blank string is passed the 'left' or 'right' positional attributes will be used. + +@mixin horizontal-spacing($spacing, $side: 'both', $attribute: $horizontal-spacing-attribute) { + + // Determine which, if any, argument to use as the base breakpoint map + @if (meta.type-of($spacing) == 'map') { + @include _horizontal-spacer-responsive($spacing, $spacing, $side, $attribute); + } @else if (meta.type-of($side) == 'map') { + @include _horizontal-spacer-responsive($side, $spacing, $side, $attribute); + } @else if (meta.type-of($attribute) == 'map') { + @include _horizontal-spacer-responsive($attribute, $spacing, $side, $attribute); + } @else { + @include _horizontal-spacer($spacing, $side, $attribute) + } +} + +/// Applies vertical whitespace +/// +/// @param {CSS or map} $spacing +/// The vertical whitespace on either side of the element or a map of such values +/// @param {string or map} $side ['both'] +/// The side to apply the spacing to. 'both', 'top', 'top-only', 'bottom', or 'bottom-only' +/// Or a map of such values +/// 'top' or 'bottom' zero out the opposite side. +/// 'top-only', and 'bottom-only' do not zero out the opposite side +/// @param {string or map} $attribute [$vertical-spacing-attribute] +/// The type of spacing to use. 'margin', 'padding' or '' - or a map of such values +/// If a blank string is passed the 'top' or 'bottom' positional attributes will be used. + +@mixin vertical-spacing($spacing, $side: 'both', $attribute: $vertical-spacing-attribute) { + + // Determine which, if any, argument to use as the base breakpoint map + @if (meta.type-of($spacing) == 'map') { + @include _vertical-spacer-responsive($spacing, $spacing, $side, $attribute); + } @else if (meta.type-of($side) == 'map') { + @include _vertical-spacer-responsive($side, $spacing, $side, $attribute); + } @else if (meta.type-of($attribute) == 'map') { + @include _vertical-spacer-responsive($attribute, $spacing, $side, $attribute); + } @else { + @include _vertical-spacer($spacing, $side, $attribute) + } +} + +/// Clears horizontal spacing at all breakpoints +/// +/// @param {string} $side ['both'] +/// 'left', 'right', or 'both' will all clear both sides +/// Use 'left-only' or 'right-only' to clear a single side +/// @param {string} $attribute [$horizontal-spacing-attribute] + +@mixin no-vertical-spacing($side: 'both', $attribute: $vertical-spacing-attribute) { + @include _vertical-spacer(0, $side, $attribute); + + @each $name, $width in $breakpointList { + @include breakpoint($width) { + @include _vertical-spacer(0, $side, $attribute); + } + } +} + +/// Clears vertical spacing at all breakpoints +/// +/// @param {string} $side ['both'] +/// 'top', 'bottom', or 'both' will all clear both sides +/// Use 'top-only' or 'bottom-only' to clear a single side +/// @param {string} $attribute [$horizontal-spacing-attribute] + +@mixin no-horizontal-spacing($side: 'both', $attribute: $horizontal-spacing-attribute) { + @include _horizontal-spacer(0, $side, $attribute); + + @each $name, $width in $breakpointList { + @include breakpoint($width) { + @include _horizontal-spacer(0, $side, $attribute); + } + } +} + +/// @param {CSS } $spacing +/// @param {string} $side ['both'] +/// @param {string} $attribute [$horizontal-spacing-attribute] -@mixin horizontal-spacer($spacing, $side: 'both', $attribute: $horizontal-spacing-attribute) { +@mixin _horizontal-spacer($spacing, $side: 'both', $attribute: $horizontal-spacing-attribute) { // allows setting left and right position attributes @if $attribute != '' { $attribute: #{$attribute}-; @@ -34,18 +118,12 @@ } } -/// Applies vertical whitespace -/// -/// @param {CSS } $spacing -/// The vertical whitespace on either side of the element -/// @param {string: 'both', 'top', 'top-only', 'bottom', 'bottom-only'} $side ['both'] -/// The side to apply the spacing to. 'top' or 'bottom' zero out the opposite side. -/// 'top-only', and 'bottom-only' do not zero out the opposite side -/// @param {string: 'margin', 'padding' or ''} $attribute [$vertical-spacing-attribute] -/// The type of spacing to use. If a blank string is passed the 'top' or 'bottom' -/// positional attributes will be used. -@mixin vertical-spacer($spacing, $side: 'both', $attribute: $vertical-spacing-attribute) { +/// @param {CSS } $spacing +/// @param {string} $side ['both'] +/// @param {string} $attribute [$vertical-spacing-attribute] + +@mixin _vertical-spacer($spacing, $side: 'both', $attribute: $vertical-spacing-attribute) { // allows setting top and bottom position attributes @if $attribute != '' { $attribute: #{$attribute}-; @@ -64,46 +142,68 @@ } } -@mixin horizontal-spacing($sizes, $side: 'both', $attribute: $horizontal-spacing-attribute) { +/// @param {map} $sizes +/// @param {CSS or map} $spacing +/// @param {string or map} $side +/// @param {string or map} $attribute [$horizontal-spacing-attribute] + +@mixin _horizontal-spacer-responsive($sizes, $spacing, $side, $attribute: $horizontal-spacing-attribute) { @each $breakpoint, $size in $sizes { + + $bp-spacing: $spacing; + @if (meta.type-of($spacing) == 'map') { + $bp-spacing: map.get($spacing, $breakpoint) + } + + $bp-side: $side; + @if (meta.type-of($side) == 'map') { + $bp-side: map.get($side, $breakpoint) + } + + $bp-attribute: $attribute; + @if (meta.type-of($attribute) == 'map') { + $bp-attribute: map.get($attribute, $breakpoint) + } + @if $breakpoint == 'base' { - @include horizontal-spacer($size, $side, $attribute); + @include _horizontal-spacer($bp-spacing, $bp-side, $bp-attribute); } @else { @include breakpoint(map-get($breakpointList, $breakpoint)) { - @include horizontal-spacer($size, $side, $attribute); + @include _horizontal-spacer($bp-spacing, $bp-side, $bp-attribute); } } } } -@mixin vertical-spacing($sizes, $side: 'both', $attribute: $vertical-spacing-attribute) { +/// @param {map} $sizes +/// @param {CSS or map} $spacing +/// @param {string or map} $side +/// @param {string} $attribute [$vertical-spacing-attribute] + +@mixin _vertical-spacer-responsive($sizes, $spacing, $side, $attribute: $vertical-spacing-attribute) { @each $breakpoint, $size in $sizes { - @if $breakpoint == 'base' { - @include vertical-spacer($size, $side, $attribute); - } @else { - @include breakpoint(map-get($breakpointList, $breakpoint)) { - @include vertical-spacer($size, $side, $attribute); - } - } - } -} -@mixin no-horizontal-spacing($side: 'both', $attribute: $horizontal-spacing-attribute) { - @include horizontal-spacer(0, $side, $attribute); + $bp-spacing: $spacing; + @if (meta.type-of($spacing) == 'map') { + $bp-spacing: map.get($spacing, $breakpoint) + } - @each $name, $width in $breakpointList { - @include breakpoint($width) { - @include horizontal-spacer(0, $side, $attribute); - } - } -} + $bp-side: $side; + @if (meta.type-of($side) == 'map') { + $bp-side: map.get($side, $breakpoint) + } -@mixin no-vertical-spacing($side: 'both', $attribute: $vertical-spacing-attribute) { - @include vertical-spacer(0, $side, $attribute); + $bp-attribute: $attribute; + @if (meta.type-of($attribute) == 'map') { + $bp-attribute: map.get($attribute, $breakpoint) + } - @each $name, $width in $breakpointList { - @include breakpoint($width) { - @include vertical-spacer(0, $side, $attribute); + @if $breakpoint == 'base' { + @include _vertical-spacer($bp-spacing, $bp-side, $bp-attribute); + } @else { + @include breakpoint(map-get($breakpointList, $breakpoint)) { + @include _vertical-spacer($bp-spacing, $bp-side, $bp-attribute); + } } } } From 6f8488c7b37ada568fcb9c38f2e52244655ffdee Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 15:03:36 -0700 Subject: [PATCH 06/41] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20(dependencies)=20ens?= =?UTF-8?q?ures=20sass=20and=20loader=20can=20compile=20map.set?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 ++- yarn.lock | 29 +++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index f79ead9..a4ac227 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ }, "peerDependencies": { "fibers": "^5.0.0", - "sass": "^1.26.10" + "sass": "^1.32.0", + "sass-loader": "^10.1.0" }, "repository": { "type": "git", diff --git a/yarn.lock b/yarn.lock index d63d03a..43d11e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1369,6 +1369,21 @@ chalk@^2.0.0, chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" +"chokidar@>=2.0.0 <4.0.0": + version "3.4.3" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" + integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.1.2" + chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -3006,6 +3021,13 @@ readdirp@~3.4.0: dependencies: picomatch "^2.2.1" +readdirp@~3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e" + integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ== + dependencies: + picomatch "^2.2.1" + regenerate-unicode-properties@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec" @@ -3168,6 +3190,13 @@ sass-rem@^2.0.1: resolved "https://registry.yarnpkg.com/sass-rem/-/sass-rem-2.0.1.tgz#dd863ec9ca5e0597eae5dd239f1f00a6c0f729b0" integrity sha512-Fuf7i1Wr7n1lIdCiImhCJ1/S0jEYq1OmrlqyKuJKSU2B2kHbU09HJIo5AuADvbf3DJLlRxU7b8Jm8D6m5lfqmA== +sass@^1.32.0: + version "1.32.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.0.tgz#10101a026c13080b14e2b374d4e15ee24400a4d3" + integrity sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng== + dependencies: + chokidar ">=2.0.0 <4.0.0" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" From 233f2aa84e8e5676510192c07a5303ab1534a9b9 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 15:19:02 -0700 Subject: [PATCH 07/41] =?UTF-8?q?=F0=9F=8E=A8=20(styles)=20improves=20stru?= =?UTF-8?q?cture,=20updates=20defaults?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _index.scss | 14 +++++++------- {breakpoints => scss/breakpoints}/_index.scss | 0 {breakpoints => scss/breakpoints}/_variables.scss | 0 {card-pattern => scss/card-pattern}/_index.scss | 0 {card-pattern => scss/card-pattern}/_mixins.scss | 0 {map-math => scss/map-math}/_functions.scss | 0 {map-math => scss/map-math}/_index.scss | 0 .../proportional-box}/_index.scss | 0 .../proportional-box}/_mixins.scss | 0 .../proportional-text}/_functions.scss | 0 .../proportional-text}/_index.scss | 0 {spacing => scss/spacing}/_index.scss | 0 {spacing => scss/spacing}/_mixins.scss | 0 {spacing => scss/spacing}/_variables.scss | 0 {text-sizing => scss/text-sizing}/_index.scss | 0 {text-sizing => scss/text-sizing}/_mixins.scss | 0 {text-sizing => scss/text-sizing}/_variables.scss | 10 +++++++--- 17 files changed, 14 insertions(+), 10 deletions(-) rename {breakpoints => scss/breakpoints}/_index.scss (100%) rename {breakpoints => scss/breakpoints}/_variables.scss (100%) rename {card-pattern => scss/card-pattern}/_index.scss (100%) rename {card-pattern => scss/card-pattern}/_mixins.scss (100%) rename {map-math => scss/map-math}/_functions.scss (100%) rename {map-math => scss/map-math}/_index.scss (100%) rename {proportional-box => scss/proportional-box}/_index.scss (100%) rename {proportional-box => scss/proportional-box}/_mixins.scss (100%) rename {proportional-text => scss/proportional-text}/_functions.scss (100%) rename {proportional-text => scss/proportional-text}/_index.scss (100%) rename {spacing => scss/spacing}/_index.scss (100%) rename {spacing => scss/spacing}/_mixins.scss (100%) rename {spacing => scss/spacing}/_variables.scss (100%) rename {text-sizing => scss/text-sizing}/_index.scss (100%) rename {text-sizing => scss/text-sizing}/_mixins.scss (100%) rename {text-sizing => scss/text-sizing}/_variables.scss (92%) diff --git a/_index.scss b/_index.scss index 0bc2ebd..19baaf2 100644 --- a/_index.scss +++ b/_index.scss @@ -1,8 +1,8 @@ // The order is importent here to avoid errors on compile -@forward 'breakpoints/index'; -@forward 'text-sizing/index'; -@forward 'proportional-box/index'; -@forward 'proportional-text/index'; -@forward 'spacing/index'; -@forward 'card-pattern/index'; -@forward 'map-math/index'; \ No newline at end of file +@forward 'scss/breakpoints/index'; +@forward 'scss/text-sizing/index'; +@forward 'scss/proportional-box/index'; +@forward 'scss/proportional-text/index'; +@forward 'scss/spacing/index'; +@forward 'scss/card-pattern/index'; +@forward 'scss/map-math/index'; \ No newline at end of file diff --git a/breakpoints/_index.scss b/scss/breakpoints/_index.scss similarity index 100% rename from breakpoints/_index.scss rename to scss/breakpoints/_index.scss diff --git a/breakpoints/_variables.scss b/scss/breakpoints/_variables.scss similarity index 100% rename from breakpoints/_variables.scss rename to scss/breakpoints/_variables.scss diff --git a/card-pattern/_index.scss b/scss/card-pattern/_index.scss similarity index 100% rename from card-pattern/_index.scss rename to scss/card-pattern/_index.scss diff --git a/card-pattern/_mixins.scss b/scss/card-pattern/_mixins.scss similarity index 100% rename from card-pattern/_mixins.scss rename to scss/card-pattern/_mixins.scss diff --git a/map-math/_functions.scss b/scss/map-math/_functions.scss similarity index 100% rename from map-math/_functions.scss rename to scss/map-math/_functions.scss diff --git a/map-math/_index.scss b/scss/map-math/_index.scss similarity index 100% rename from map-math/_index.scss rename to scss/map-math/_index.scss diff --git a/proportional-box/_index.scss b/scss/proportional-box/_index.scss similarity index 100% rename from proportional-box/_index.scss rename to scss/proportional-box/_index.scss diff --git a/proportional-box/_mixins.scss b/scss/proportional-box/_mixins.scss similarity index 100% rename from proportional-box/_mixins.scss rename to scss/proportional-box/_mixins.scss diff --git a/proportional-text/_functions.scss b/scss/proportional-text/_functions.scss similarity index 100% rename from proportional-text/_functions.scss rename to scss/proportional-text/_functions.scss diff --git a/proportional-text/_index.scss b/scss/proportional-text/_index.scss similarity index 100% rename from proportional-text/_index.scss rename to scss/proportional-text/_index.scss diff --git a/spacing/_index.scss b/scss/spacing/_index.scss similarity index 100% rename from spacing/_index.scss rename to scss/spacing/_index.scss diff --git a/spacing/_mixins.scss b/scss/spacing/_mixins.scss similarity index 100% rename from spacing/_mixins.scss rename to scss/spacing/_mixins.scss diff --git a/spacing/_variables.scss b/scss/spacing/_variables.scss similarity index 100% rename from spacing/_variables.scss rename to scss/spacing/_variables.scss diff --git a/text-sizing/_index.scss b/scss/text-sizing/_index.scss similarity index 100% rename from text-sizing/_index.scss rename to scss/text-sizing/_index.scss diff --git a/text-sizing/_mixins.scss b/scss/text-sizing/_mixins.scss similarity index 100% rename from text-sizing/_mixins.scss rename to scss/text-sizing/_mixins.scss diff --git a/text-sizing/_variables.scss b/scss/text-sizing/_variables.scss similarity index 92% rename from text-sizing/_variables.scss rename to scss/text-sizing/_variables.scss index a1e53da..4591f90 100644 --- a/text-sizing/_variables.scss +++ b/scss/text-sizing/_variables.scss @@ -7,19 +7,23 @@ $fw-bold: 700 !default; $fw-extra-bold: 800 !default; $fw-black: 900 !default; +$black: #000 !default; +$white: #fff !default; + $base-font-size: 16px !default; $base-font-family: Helvetica, Tacoma, sans-serif !default; -$base-font-color: #000 !default; //@todo: Use variable +$base-font-color: $black !default; $base-line-height: 1.6 !default; $base-font-weight: $fw-regular !default; +$base-spacing: 1rem !default; $heading-font-family: $base-font-family !default; $heading-line-height: 1.2 !default; $heading-font-color: $base-font-color !default; $heading-font-weight: $fw-bold !default; -$heading-margin: 1rem !default; //@todo: use variable -$heading-margin-top: $heading-margin !default; +$heading-margin: $base-spacing !default; +$heading-margin-top: 0 !default; $heading-margin-bottom: $heading-margin !default; $h1-font-size: 32px !default; From db7790aad99fab3d97d6e24e81045086e873a9d1 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 15:37:23 -0700 Subject: [PATCH 08/41] =?UTF-8?q?=E2=9C=A8=20(utility)=20adds=20ie11=20mix?= =?UTF-8?q?in?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _index.scss | 7 ++++--- scss/utility/_index.scss | 1 + scss/utility/_mixins.scss | 5 +++++ 3 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 scss/utility/_index.scss create mode 100644 scss/utility/_mixins.scss diff --git a/_index.scss b/_index.scss index 19baaf2..9d0836c 100644 --- a/_index.scss +++ b/_index.scss @@ -1,8 +1,9 @@ // The order is importent here to avoid errors on compile @forward 'scss/breakpoints/index'; -@forward 'scss/text-sizing/index'; +@forward 'scss/card-pattern/index'; +@forward 'scss/map-math/index'; @forward 'scss/proportional-box/index'; @forward 'scss/proportional-text/index'; @forward 'scss/spacing/index'; -@forward 'scss/card-pattern/index'; -@forward 'scss/map-math/index'; \ No newline at end of file +@forward 'scss/text-sizing/index'; +@forward 'scss/utility/index'; \ No newline at end of file diff --git a/scss/utility/_index.scss b/scss/utility/_index.scss new file mode 100644 index 0000000..07b1435 --- /dev/null +++ b/scss/utility/_index.scss @@ -0,0 +1 @@ +@forward 'mixins'; \ No newline at end of file diff --git a/scss/utility/_mixins.scss b/scss/utility/_mixins.scss new file mode 100644 index 0000000..3cab45d --- /dev/null +++ b/scss/utility/_mixins.scss @@ -0,0 +1,5 @@ +@mixin ie11 { + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + @content; + } +} \ No newline at end of file From e5558ae173efb51a86b3cd03c58ff0cb417b2e04 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 31 Dec 2020 16:02:07 -0700 Subject: [PATCH 09/41] =?UTF-8?q?=E2=9C=A8=20(breakpoints)=20adds=20handy?= =?UTF-8?q?=20breakpoint=20change=20methods?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 92 ++++++++++++++++++++++++---------------------- dist/main.js | 2 +- src/Breakpoints.js | 25 ++++++++++++- 3 files changed, 72 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 85ab529..c647b53 100644 --- a/README.md +++ b/README.md @@ -65,13 +65,13 @@ Breakpoints.init(breakpointList); SubModules * [Breakpoints](#breakpoints) +* [Card Pattern](#card-pattern) * [debounce.js](#debounce-js) * [Proportional Box](#proportional-box) * [Proportional Text](#proportional-text) * [setUserAgent.js](#setuseragent-js) * [Spacing](#spacing) * [Text Sizing](#text-sizing) -* [Card Pattern](#card-pattern) JS features @@ -133,7 +133,10 @@ After initilization. The following methods can be used. * `Breakpoints.get()`: returns an array of breakpoints that the current viewport size has surpassed. * `Breakpoints.getCurrent()`: returns the largest single breakpoint that the current viewport size has surpassed. -* `minWidth($breakpointName)`: when passed a string value corresponding to a breakpoint name returns a boolean indicating whether the current viewport size has surpassed the given breakpoint. +* `Breakpoints.minWidth(breakpointName)`: when passed a string value corresponding to a breakpoint name returns a boolean indicating whether the current viewport size has surpassed the given breakpoint. +* `Breakpoints.onBreakpointCross(breakpointName, callback)`: On crossing the breakpoint corresponding to `breakpointName`, either growing beyond it, or shrinking below it a function passed as a callback is called. +* `Breakpoints.onBreakpointUp(breakpointName, callback)`: Similar to `onBreakpointCross()` but only fires the callback when viewport has grown from below breakpoint to above it +* `Breakpoints.onBreakpointDown(breakpointName, callback)`: Similar to `onBreakpointCross()` but only fires the callback when viewport has shrunk from above breakpoint to below it ##### Events @@ -159,6 +162,48 @@ window.addEventListener('breakpointChange', (evt) => { Note that the event emitter is debounced. It will not fire until 50ms have passed since the last resize event. +### Card Pattern + +The card pattern module includes a mixin to quickly generate a common card layout pattern using flexbox. It sets the size and margins of both parent and child elements and allows passing breakpoint maps for arguments to create a responsive layout. If you pass more than one breakpoint map as an argument, ensure they contain the exact same breakpoints and that all included breakpoints have been configured in the $breakpointList variable. + +### Example Usage + +``` +@use '~@evanshunt/derekstrap'; + +// This will create a 4 column layout with a 2rem gutter and 3rem space between rows +.parent-element { + @include derekstrap.card-pattern('.child-selector', 4, 2rem, 3rem); +} + +// This will create a layout with a varying number of columns depending on breakpoint +.parent-element { + @include derekstrap.card-pattern('.child-selector', ( + 'base': 1, + 'tablet': 2, + 'desktop': 3 + ), 2rem, 3rem); +} + +// This will create a layout with varying columns and gutter size +.parent-element { + @include derekstrap.card-pattern( + '.child-selector', + ( + 'base': 1, + 'tablet': 2, + 'desktop': 3 + ), + ( + 'base': 2rem, + 'tablet': 1rem, + 'desktop': 0.5rem + ), + 3rem + ); +} +``` + ### debounce.js Derekstrap includes a `debounce()` helper function, used by the Breakpoints module. The code was borrowed from here: [https://davidwalsh.name/javascript-debounce-function](https://davidwalsh.name/javascript-debounce-function). Debouncing is a handy way to ensure a function that runs on resize, scroll, mouse movement or any other event which might occur many times in a row only runs after the action stops. @@ -287,45 +332,4 @@ Spacing can be applied to a single side of the element by passing the side as th // Applies spacing to the top, but does not set a bottom spacing @include derekstrap.vertical-spacing($section-spacing, 'top-only'); } -``` - -### Card Pattern - -The card pattern module includes a mixin to quickly generate a common card layout pattern using flexbox. It sets the size and margins of both parent and child elements and allows passing breakpoint maps for arguments to create a responsive layout. If you pass more than one breakpoint map as an argument, ensure they contain the exact same breakpoints and that all included breakpoints have been configured in the $breakpointList variable. - -### Example Usage - -``` -@use '~@evanshunt/derekstrap'; - -// This will create a 4 column layout with a 2rem gutter and 3rem space between rows -.parent-element { - @include derekstrap.card-pattern('.child-selector', 4, 2rem, 3rem); -} - -// This will create a layout with a varying number of columns depending on breakpoint -.parent-element { - @include derekstrap.card-pattern('.child-selector', ( - 'base': 1, - 'tablet': 2, - 'desktop': 3 - ), 2rem, 3rem); -} - -// This will create a layout with varying columns and gutter size -.parent-element { - @include derekstrap.card-pattern( - '.child-selector', - ( - 'base': 1, - 'tablet': 2, - 'desktop': 3 - ), - ( - 'base': 2rem, - 'tablet': 1rem, - 'desktop': 0.5rem - ), - 3rem - ); -} \ No newline at end of file +``` \ No newline at end of file diff --git a/dist/main.js b/dist/main.js index 7d17bef..8644eb5 100644 --- a/dist/main.js +++ b/dist/main.js @@ -1 +1 @@ -!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.Derekstrap=n():t.Derekstrap=n()}(window,(function(){return function(t){var n={};function r(e){if(n[e])return n[e].exports;var o=n[e]={i:e,l:!1,exports:{}};return t[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=n,r.d=function(t,n,e){r.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,n){if(1&n&&(t=r(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)r.d(e,o,function(n){return t[n]}.bind(null,o));return e},r.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(n,"a",n),n},r.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},r.p="",r(r.s=84)}([function(t,n,r){(function(n){var r=function(t){return t&&t.Math==Math&&t};t.exports=r("object"==typeof globalThis&&globalThis)||r("object"==typeof window&&window)||r("object"==typeof self&&self)||r("object"==typeof n&&n)||Function("return this")()}).call(this,r(46))},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n,r){var e=r(1);t.exports=!e((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(t,n){var r={}.hasOwnProperty;t.exports=function(t,n){return r.call(t,n)}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n,r){var e=r(4);t.exports=function(t){if(!e(t))throw TypeError(String(t)+" is not an object");return t}},function(t,n,r){var e=r(0),o=r(14).f,i=r(8),u=r(17),c=r(18),a=r(50),f=r(37);t.exports=function(t,n){var r,s,l,p,v,d=t.target,h=t.global,g=t.stat;if(r=h?e:g?e[d]||c(d,{}):(e[d]||{}).prototype)for(s in n){if(p=n[s],l=t.noTargetGet?(v=o(r,s))&&v.value:r[s],!f(h?s:d+(g?".":"#")+s,t.forced)&&void 0!==l){if(typeof p==typeof l)continue;a(p,l)}(t.sham||l&&l.sham)&&i(p,"sham",!0),u(r,s,p,t)}}},function(t,n){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,n,r){var e=r(2),o=r(11),i=r(27);t.exports=e?function(t,n,r){return o.f(t,n,i(1,r))}:function(t,n,r){return t[n]=r,t}},function(t,n,r){var e=r(15),o=r(7);t.exports=function(t){return e(o(t))}},function(t,n){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,n,r){var e=r(2),o=r(28),i=r(5),u=r(16),c=Object.defineProperty;n.f=e?c:function(t,n,r){if(i(t),n=u(n,!0),i(r),o)try{return c(t,n,r)}catch(t){}if("get"in r||"set"in r)throw TypeError("Accessors not supported");return"value"in r&&(t[n]=r.value),t}},function(t,n,r){var e=r(13),o=Math.min;t.exports=function(t){return t>0?o(e(t),9007199254740991):0}},function(t,n){var r=Math.ceil,e=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?e:r)(t)}},function(t,n,r){var e=r(2),o=r(26),i=r(27),u=r(9),c=r(16),a=r(3),f=r(28),s=Object.getOwnPropertyDescriptor;n.f=e?s:function(t,n){if(t=u(t),n=c(n,!0),f)try{return s(t,n)}catch(t){}if(a(t,n))return i(!o.f.call(t,n),t[n])}},function(t,n,r){var e=r(1),o=r(10),i="".split;t.exports=e((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?i.call(t,""):Object(t)}:Object},function(t,n,r){var e=r(4);t.exports=function(t,n){if(!e(t))return t;var r,o;if(n&&"function"==typeof(r=t.toString)&&!e(o=r.call(t)))return o;if("function"==typeof(r=t.valueOf)&&!e(o=r.call(t)))return o;if(!n&&"function"==typeof(r=t.toString)&&!e(o=r.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,n,r){var e=r(0),o=r(8),i=r(3),u=r(18),c=r(30),a=r(47),f=a.get,s=a.enforce,l=String(String).split("String");(t.exports=function(t,n,r,c){var a=!!c&&!!c.unsafe,f=!!c&&!!c.enumerable,p=!!c&&!!c.noTargetGet;"function"==typeof r&&("string"!=typeof n||i(r,"name")||o(r,"name",n),s(r).source=l.join("string"==typeof n?n:"")),t!==e?(a?!p&&t[n]&&(f=!0):delete t[n],f?t[n]=r:o(t,n,r)):f?t[n]=r:u(n,r)})(Function.prototype,"toString",(function(){return"function"==typeof this&&f(this).source||c(this)}))},function(t,n,r){var e=r(0),o=r(8);t.exports=function(t,n){try{o(e,t,n)}catch(r){e[t]=n}return n}},function(t,n){t.exports={}},function(t,n,r){var e=r(52),o=r(0),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,n){return arguments.length<2?i(e[t])||i(o[t]):e[t]&&e[t][n]||o[t]&&o[t][n]}},function(t,n){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(t,n,r){var e=r(7);t.exports=function(t){return Object(e(t))}},function(t,n,r){var e=r(0),o=r(33),i=r(3),u=r(34),c=r(41),a=r(60),f=o("wks"),s=e.Symbol,l=a?s:s&&s.withoutSetter||u;t.exports=function(t){return i(f,t)||(c&&i(s,t)?f[t]=s[t]:f[t]=l("Symbol."+t)),f[t]}},function(t,n,r){var e=r(2),o=r(1),i=r(3),u=Object.defineProperty,c={},a=function(t){throw t};t.exports=function(t,n){if(i(c,t))return c[t];n||(n={});var r=[][t],f=!!i(n,"ACCESSORS")&&n.ACCESSORS,s=i(n,0)?n[0]:a,l=i(n,1)?n[1]:void 0;return c[t]=!!r&&!o((function(){if(f&&!e)return!0;var t={length:-1};f?u(t,1,{enumerable:!0,get:a}):t[1]=1,r.call(t,s,l)}))}},function(t,n,r){"use strict";var e,o,i=r(77),u=r(78),c=RegExp.prototype.exec,a=String.prototype.replace,f=c,s=(e=/a/,o=/b*/g,c.call(e,"a"),c.call(o,"a"),0!==e.lastIndex||0!==o.lastIndex),l=u.UNSUPPORTED_Y||u.BROKEN_CARET,p=void 0!==/()??/.exec("")[1];(s||p||l)&&(f=function(t){var n,r,e,o,u=this,f=l&&u.sticky,v=i.call(u),d=u.source,h=0,g=t;return f&&(-1===(v=v.replace("y","")).indexOf("g")&&(v+="g"),g=String(t).slice(u.lastIndex),u.lastIndex>0&&(!u.multiline||u.multiline&&"\n"!==t[u.lastIndex-1])&&(d="(?: "+d+")",g=" "+g,h++),r=new RegExp("^(?:"+d+")",v)),p&&(r=new RegExp("^"+d+"$(?!\\s)",v)),s&&(n=u.lastIndex),e=c.call(f?r:u,g),f?e?(e.input=e.input.slice(h),e[0]=e[0].slice(h),e.index=u.lastIndex,u.lastIndex+=e[0].length):u.lastIndex=0:s&&e&&(u.lastIndex=u.global?e.index+e[0].length:n),p&&e&&e.length>1&&a.call(e[0],r,(function(){for(o=1;oa;)e(c,r=n[a++])&&(~i(f,r)||f.push(r));return f}},function(t,n,r){var e=r(1),o=/#|\.prototype\./,i=function(t,n){var r=c[u(t)];return r==f||r!=a&&("function"==typeof n?e(n):!!n)},u=i.normalize=function(t){return String(t).replace(o,".").toLowerCase()},c=i.data={},a=i.NATIVE="N",f=i.POLYFILL="P";t.exports=i},function(t,n,r){var e=r(20);t.exports=e("navigator","userAgent")||""},function(t,n,r){var e=r(57),o=r(15),i=r(22),u=r(12),c=r(58),a=[].push,f=function(t){var n=1==t,r=2==t,f=3==t,s=4==t,l=6==t,p=5==t||l;return function(v,d,h,g){for(var y,x,b=i(v),m=o(b),E=e(d,h,3),w=u(m.length),S=0,O=g||c,_=n?O(v,w):r?O(v,0):void 0;w>S;S++)if((p||S in m)&&(x=E(y=m[S],S,b),t))if(n)_[S]=x;else if(x)switch(t){case 3:return!0;case 5:return y;case 6:return S;case 2:a.call(_,y)}else if(s)return!1;return l?-1:f||s?s:_}};t.exports={forEach:f(0),map:f(1),filter:f(2),some:f(3),every:f(4),find:f(5),findIndex:f(6)}},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t}},function(t,n,r){var e=r(1);t.exports=!!Object.getOwnPropertySymbols&&!e((function(){return!String(Symbol())}))},function(t,n,r){var e=r(1),o=r(23),i=r(61),u=o("species");t.exports=function(t){return i>=51||!e((function(){var n=[];return(n.constructor={})[u]=function(){return{foo:1}},1!==n[t](Boolean).foo}))}},function(t,n,r){var e=r(36),o=r(21);t.exports=Object.keys||function(t){return e(t,o)}},function(t,n,r){"use strict";var e=r(6),o=r(25);e({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(t,n,r){var e=r(6),o=r(0),i=r(38),u=[].slice,c=function(t){return function(n,r){var e=arguments.length>2,o=e?u.call(arguments,2):void 0;return t(e?function(){("function"==typeof n?n:Function(n)).apply(this,o)}:n,r)}};e({global:!0,bind:!0,forced:/MSIE .\./.test(i)},{setTimeout:c(o.setTimeout),setInterval:c(o.setInterval)})},function(t,n){var r;r=function(){return this}();try{r=r||new Function("return this")()}catch(t){"object"==typeof window&&(r=window)}t.exports=r},function(t,n,r){var e,o,i,u=r(48),c=r(0),a=r(4),f=r(8),s=r(3),l=r(32),p=r(19),v=c.WeakMap;if(u){var d=new v,h=d.get,g=d.has,y=d.set;e=function(t,n){return y.call(d,t,n),n},o=function(t){return h.call(d,t)||{}},i=function(t){return g.call(d,t)}}else{var x=l("state");p[x]=!0,e=function(t,n){return f(t,x,n),n},o=function(t){return s(t,x)?t[x]:{}},i=function(t){return s(t,x)}}t.exports={set:e,get:o,has:i,enforce:function(t){return i(t)?o(t):e(t,{})},getterFor:function(t){return function(n){var r;if(!a(n)||(r=o(n)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return r}}}},function(t,n,r){var e=r(0),o=r(30),i=e.WeakMap;t.exports="function"==typeof i&&/native code/.test(o(i))},function(t,n){t.exports=!1},function(t,n,r){var e=r(3),o=r(51),i=r(14),u=r(11);t.exports=function(t,n){for(var r=o(n),c=u.f,a=i.f,f=0;fs;)if((c=a[s++])!=c)return!0}else for(;f>s;s++)if((t||s in a)&&a[s]===r)return t||s||0;return!t&&-1}};t.exports={includes:u(!0),indexOf:u(!1)}},function(t,n,r){var e=r(13),o=Math.max,i=Math.min;t.exports=function(t,n){var r=e(t);return r<0?o(r+n,0):i(r,n)}},function(t,n){n.f=Object.getOwnPropertySymbols},function(t,n,r){"use strict";var e=r(6),o=r(39).filter,i=r(42),u=r(24),c=i("filter"),a=u("filter");e({target:"Array",proto:!0,forced:!c||!a},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,n,r){var e=r(40);t.exports=function(t,n,r){if(e(t),void 0===n)return t;switch(r){case 0:return function(){return t.call(n)};case 1:return function(r){return t.call(n,r)};case 2:return function(r,e){return t.call(n,r,e)};case 3:return function(r,e,o){return t.call(n,r,e,o)}}return function(){return t.apply(n,arguments)}}},function(t,n,r){var e=r(4),o=r(59),i=r(23)("species");t.exports=function(t,n){var r;return o(t)&&("function"!=typeof(r=t.constructor)||r!==Array&&!o(r.prototype)?e(r)&&null===(r=r[i])&&(r=void 0):r=void 0),new(void 0===r?Array:r)(0===n?0:n)}},function(t,n,r){var e=r(10);t.exports=Array.isArray||function(t){return"Array"==e(t)}},function(t,n,r){var e=r(41);t.exports=e&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(t,n,r){var e,o,i=r(0),u=r(38),c=i.process,a=c&&c.versions,f=a&&a.v8;f?o=(e=f.split("."))[0]+e[1]:u&&(!(e=u.match(/Edge\/(\d+)/))||e[1]>=74)&&(e=u.match(/Chrome\/(\d+)/))&&(o=e[1]),t.exports=o&&+o},function(t,n,r){"use strict";var e=r(6),o=r(39).map,i=r(42),u=r(24),c=i("map"),a=u("map");e({target:"Array",proto:!0,forced:!c||!a},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,n,r){"use strict";var e=r(6),o=r(64).left,i=r(65),u=r(24),c=i("reduce"),a=u("reduce",{1:0});e({target:"Array",proto:!0,forced:!c||!a},{reduce:function(t){return o(this,t,arguments.length,arguments.length>1?arguments[1]:void 0)}})},function(t,n,r){var e=r(40),o=r(22),i=r(15),u=r(12),c=function(t){return function(n,r,c,a){e(r);var f=o(n),s=i(f),l=u(f.length),p=t?l-1:0,v=t?-1:1;if(c<2)for(;;){if(p in s){a=s[p],p+=v;break}if(p+=v,t?p<0:l<=p)throw TypeError("Reduce of empty array with no initial value")}for(;t?p>=0:l>p;p+=v)p in s&&(a=r(a,s[p],p,f));return a}};t.exports={left:c(!1),right:c(!0)}},function(t,n,r){"use strict";var e=r(1);t.exports=function(t,n){var r=[][t];return!!r&&e((function(){r.call(null,n||function(){throw 1},1)}))}},function(t,n,r){"use strict";var e=r(2),o=r(0),i=r(37),u=r(17),c=r(3),a=r(10),f=r(67),s=r(16),l=r(1),p=r(70),v=r(35).f,d=r(14).f,h=r(11).f,g=r(73).trim,y=o.Number,x=y.prototype,b="Number"==a(p(x)),m=function(t){var n,r,e,o,i,u,c,a,f=s(t,!1);if("string"==typeof f&&f.length>2)if(43===(n=(f=g(f)).charCodeAt(0))||45===n){if(88===(r=f.charCodeAt(2))||120===r)return NaN}else if(48===n){switch(f.charCodeAt(1)){case 66:case 98:e=2,o=49;break;case 79:case 111:e=8,o=55;break;default:return+f}for(u=(i=f.slice(2)).length,c=0;co)return NaN;return parseInt(i,e)}return+f};if(i("Number",!y(" 0o1")||!y("0b1")||y("+0x1"))){for(var E,w=function(t){var n=arguments.length<1?0:t,r=this;return r instanceof w&&(b?l((function(){x.valueOf.call(r)})):"Number"!=a(r))?f(new y(m(n)),r,w):m(n)},S=e?v(y):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),O=0;S.length>O;O++)c(y,E=S[O])&&!c(w,E)&&h(w,E,d(y,E));w.prototype=x,x.constructor=w,u(o,"Number",w)}},function(t,n,r){var e=r(4),o=r(68);t.exports=function(t,n,r){var i,u;return o&&"function"==typeof(i=n.constructor)&&i!==r&&e(u=i.prototype)&&u!==r.prototype&&o(t,u),t}},function(t,n,r){var e=r(5),o=r(69);t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var t,n=!1,r={};try{(t=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(r,[]),n=r instanceof Array}catch(t){}return function(r,i){return e(r),o(i),n?t.call(r,i):r.__proto__=i,r}}():void 0)},function(t,n,r){var e=r(4);t.exports=function(t){if(!e(t)&&null!==t)throw TypeError("Can't set "+String(t)+" as a prototype");return t}},function(t,n,r){var e,o=r(5),i=r(71),u=r(21),c=r(19),a=r(72),f=r(29),s=r(32),l=s("IE_PROTO"),p=function(){},v=function(t){return" + - -
-

HTML5 Kitchen Sink

- Jump to: Headings | Sections | Phrasing | Palpable Content | Embeds - | Forms | Tables

-

This section serves as the header.

+
+

Derekstrap Demo

+

Below is a non-exhaustive set of examples for the features in Derekstrap

-
-
-

# Headings

-

Elements h1, h2, h3, h4, - h5, h6 make up the heading content category. -

-
-

h1 I am most important.

-

h2 Back in my quaint garden

-

h3 Jaunty zinnias vie with flaunting phlox.

-

h4 Five or six big jet planes zoomed quickly by the new tower.

-
h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
-
h6 Pack my box with five dozen liquor jugs.
-
- +
+
+

Breakpoints

+

The colour of this text changes depending on screen size.

+

The largest current breakpoint is:

+
+

scss

+
+

js

+
-
-
-

# Sections

-

Elements article, aside, nav, - section make up the sectioning content category. -

- -
-
-

This paragraph is nested inside an article element. It contains many different, - sometimes useful, HTML5 elements. Of course there are - classics like emphasis, strong, - and small but there are many others as well. Hover the following text for - abbreviation element: abbr. You can define deleted text - which often gets replaced with inserted text.

-

You can also use keyboard text, which sometimes is styled similarly to the - <code> or samp elements. Even more specifically, there is an element - just for variables. Not to be mistaken with block - quotes below, the quote element lets you denote something as quoted text. Lastly don't forget - the sub (H2O) and sup (E = MC2) elements.

-
-

This paragraph is contained in a section element of its parent article - element.

-

↓ The following paragraph has the hidden attribute and should not be displayed. ↓ -

- -

↑ The previous paragraph should not be displayed. ↑

-
-
- - +
+
+

Cards

+

The layout below will have a different column count and different spacing depending on breakpoint.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

scss

+
-
-
-
-

# Phrasing

-

Elements abbr, b, bdi, - bdo, br, cite, code, - data, del, dfn, em, - i, ins, kbd, mark, - meter, progress, q, s, - samp, small, span, strong, - sub, sup, time, u, - var, wbr, and others make up the phrasing content category. -

-
-

abbr: Some vehicles meet the - SULEV standard.
- br was used to make this sentence start on a new line. -

-

bdi: Some languages read right to left, مرحبا. - bdo: The normal direction has been - overridden. -

-

em is used for emphasis and usually renders as italics, contrast that with - i which is used for alternate voice or to offset from the normal (such as a phrase from a - different language or taxonomic designation): E. coli can be bad. strong is used for - importance or urgency and usually renders as bold, contrast that with b - which is used to draw attention without the semantic meaning of importance.

-

cite: In the words of Charles Bukowski — An intellectual says a simple thing - in a hard way. An artist says a hard thing in a simple way.

-

data can be used to specify 5 A.M. that is - machine-readable, but time is a better choice for specifying in a machine-readable format. -

-

del can be varily used to mark deletions. - ins marks insertions. s: similar to - del, but used to mark content that is no longer relevant. Windows XP version - available. u: a holdover with no real meaning that should be removed. - mark: the HTML equivalent of the yellow highlighter. span: a - generic element with no meaning by itself. -

-

dfn: Foreign phrases add a certain je ne - sais quoi to one's prose. -

-

q: The W3C page About W3C says the W3C’s mission is To lead the World Wide Web to its full potential by developing - protocols and guidelines that ensure long-term growth for the Web.

-

kbd and samp: I did this:

- 
c:\>format c: /yes
-

Is that bad? Press Ctrl+F5 for a hard reload.

-

var: To log in, type ssh user@example.com, where user is - your user ID.

-

meter and progress: Storage space usage: - 6 blocks used (out of 8 total) Progress: - 37% -

-

sub is used for subscripts: H2O. sup is used for superscripts: E = - MC2. small is used for side comments: I wrote this whole document. - [Editor's note: no he did not] wbr: used to specify where a word may - break and it is supercalifragilisticexpialidocious.

- -
-
-
-
-

# Palpable Content

-

Elements a, address, blockquote, - button, details, dl, fieldset, - figure, form, input, label, - map, ol, output, pre, - select, table, textarea, - ul, and others make up the palpable content category. -

-
-

a: Example.

-

address:

-
1 Infinite Loop
- Cupertino, CA 95014
- United States -
-

blockquote:

-
-

I quickly explained that many big jobs involve few hazards

-
-
-

This is a mult-line blockquote with a cite reference. People think focus means saying yes to the - thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred - other good ideas that there are. You have to - pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. - Innovation is saying no to 1,000 things.

-
Steve Jobs, Apple Worldwide Developers’ Conference, 1997
-
-

details and summary:

-
- Copying... 25% - -
-
Transfer rate:
-
452KB/s
-
Duration:
-
01:16:27
-
Color profile:
-
SD (6-1-6)
-
Dimensions:
-
320×240
-
-
-

dl:

-
-
Definition List Title
-
Definition list division.
-
Kitchen Sink
-
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have - been mined. In this case, a bunch of markup.
-
aside
-
Defines content aside from the page content
-
blockquote
-
Defines a section that is quoted from another source
-
-

figure:

-
- -
Figure 1: A picture of Bill Murray from fillmurray.com -
-
-

-

# Forms

-
-
-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-
- I am legend -
- - -
-
- - -
-
- - -
-
-
- I am also legend - - - - -
-

- - - - - - - -

-
-

ul and ol:

-
    -
  • Unordered List item one -
      -
    • Nested list item -
        -
      • Level 3, item one
        • -
      • Level 3, item two
        • -
      • Level 3, item three
        • -
      • Level 3, item four
        • -
      -
      • -
    • List item two
      • -
    • List item three
      • -
    • List item four
      • -
    -
    • -
  • List item two
    • -
  • List item three
    • -
  • List item four
    • -
-
    -
  1. List item one -
      -
    1. List item one -
        -
      1. List item one
        2. -
      2. List item two
        3. -
      3. List item three
        4. -
      4. List item four
        5. -
      -
      2. -
    2. List item two
      3. -
    3. List item three
      4. -
    4. List item four
      5. -
    -
    2. -
  2. List item two
    3. -
  3. List item three
    4. -
  4. List item four
    5. -
-

output:

-
- + - = - -
-

pre:

- 
-pre {
-display: block;
-padding: 7px;
-background-color: #F5F5F5;
-border: 1px solid #E1E1E8;
-border-radius: 3px;
-white-space: pre-wrap;
-word-break: break-all;
-font-family: Menlo, Monaco;
-line-height: 160%;
-}
- 
You are in an open field west of a big white house with a boarded
-front door.
-There is a small mailbox here.
-
-> open mailbox
-
-Opening the mailbox reveals:
-A leaflet.
-
->


-

# Tables

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tables can have captions now.
PersonNumberThird Column
Someone Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor - fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id - nibh ultricies vehicula ut id elit.
Last One2800Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus - sit amet fermentum.
-

In the following table, characteristics are given in the second column, with the - negative side in the left column and the positive side in the right column.

- - - - - - - - - - - - - - - - - - - - - -
Characteristics with positive and negative sides
NegativeCharacteristicPositive
SadMoodHappy
FailingGradePassing
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Complex table with a thead, multiple tbody elements, and a - tfoot.
200820072006
Net sales$32,479$24,006$19,315
Cost of sales21,33415,85213,717
Gross margin$11,145$8,154$5,598
Gross margin percentage34.3%34.0%29.0%
- -
-
-
-
-

# Embeds

-

Elements audio, canvas, embed, - iframe, img, math, object, - picture, svg, video make up the embedded content - category. -

-
-

audio: By Cqdx - [CC BY-SA 3.0 ], from Wikimedia Commons. -

-

iframe:

-

img: Bill Murray

-

math:

- - - - - Quadratic Equation - - - - x - = - - - - - b - ± - - - - b - - 2 - - - - 4 - a - c - - - - - 2 - a - - - - - - - -

picture: - - - Bill Murray - -

-

svg: - -

-

video: -

- -
-
-
-
-

Find this document on GitHub.

-
+ - \ No newline at end of file diff --git a/demo/js/breakpoints.js b/demo/js/breakpoints.js new file mode 100644 index 0000000..0b25b5e --- /dev/null +++ b/demo/js/breakpoints.js @@ -0,0 +1,16 @@ +// In your project write +// import breakpointList from '../styles/main.scss'; +// import { Breakpoints } from '@evanshunt/derekstrap'; +import breakpointList from '../demo.scss'; +import { Breakpoints } from '../../src/index'; + +Breakpoints.init(breakpointList); + +const currentBreakpoint = document.querySelector('#currentBreakpoint'); +console.log(currentBreakpoint); + +currentBreakpoint.innerHTML = Breakpoints.getCurrent(); + +window.addEventListener('breakpointChange', (event) => { + currentBreakpoint.innerHTML = event.detail.breakpoint; +}); diff --git a/demo/kitchen-sink.html b/demo/kitchen-sink.html new file mode 100644 index 0000000..304ac2a --- /dev/null +++ b/demo/kitchen-sink.html @@ -0,0 +1,665 @@ + + + + + + HTML5 Kitchen Sink + + + + +
+

HTML5 Kitchen Sink

+ Jump to: Headings | Sections | Phrasing | Palpable Content | Embeds + | Forms | Tables

+

This section serves as the header.

+
+
+
+
+

# Headings

+

Elements h1, h2, h3, h4, + h5, h6 make up the heading content category. +

+
+

h1 I am most important.

+

h2 Back in my quaint garden

+

h3 Jaunty zinnias vie with flaunting phlox.

+

h4 Five or six big jet planes zoomed quickly by the new tower.

+
h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
+
h6 Pack my box with five dozen liquor jugs.
+
+ +
+
+
+
+

# Sections

+

Elements article, aside, nav, + section make up the sectioning content category. +

+ +
+
+

This paragraph is nested inside an article element. It contains many different, + sometimes useful, HTML5 elements. Of course there are + classics like emphasis, strong, + and small but there are many others as well. Hover the following text for + abbreviation element: abbr. You can define deleted text + which often gets replaced with inserted text.

+

You can also use keyboard text, which sometimes is styled similarly to the + <code> or samp elements. Even more specifically, there is an element + just for variables. Not to be mistaken with block + quotes below, the quote element lets you denote something as quoted text. Lastly don't forget + the sub (H2O) and sup (E = MC2) elements.

+
+

This paragraph is contained in a section element of its parent article + element.

+

↓ The following paragraph has the hidden attribute and should not be displayed. ↓ +

+ +

↑ The previous paragraph should not be displayed. ↑

+
+
+ + +
+
+
+
+

# Phrasing

+

Elements abbr, b, bdi, + bdo, br, cite, code, + data, del, dfn, em, + i, ins, kbd, mark, + meter, progress, q, s, + samp, small, span, strong, + sub, sup, time, u, + var, wbr, and others make up the phrasing content category. +

+
+

abbr: Some vehicles meet the + SULEV standard.
+ br was used to make this sentence start on a new line. +

+

bdi: Some languages read right to left, مرحبا. + bdo: The normal direction has been + overridden. +

+

em is used for emphasis and usually renders as italics, contrast that with + i which is used for alternate voice or to offset from the normal (such as a phrase from a + different language or taxonomic designation): E. coli can be bad. strong is used for + importance or urgency and usually renders as bold, contrast that with b + which is used to draw attention without the semantic meaning of importance.

+

cite: In the words of Charles Bukowski — An intellectual says a simple thing + in a hard way. An artist says a hard thing in a simple way.

+

data can be used to specify 5 A.M. that is + machine-readable, but time is a better choice for specifying in a machine-readable format. +

+

del can be varily used to mark deletions. + ins marks insertions. s: similar to + del, but used to mark content that is no longer relevant. Windows XP version + available. u: a holdover with no real meaning that should be removed. + mark: the HTML equivalent of the yellow highlighter. span: a + generic element with no meaning by itself. +

+

dfn: Foreign phrases add a certain je ne + sais quoi to one's prose. +

+

q: The W3C page About W3C says the W3C’s mission is To lead the World Wide Web to its full potential by developing + protocols and guidelines that ensure long-term growth for the Web.

+

kbd and samp: I did this:

+ 
c:\>format c: /yes
+

Is that bad? Press Ctrl+F5 for a hard reload.

+

var: To log in, type ssh user@example.com, where user is + your user ID.

+

meter and progress: Storage space usage: + 6 blocks used (out of 8 total) Progress: + 37% +

+

sub is used for subscripts: H2O. sup is used for superscripts: E = + MC2. small is used for side comments: I wrote this whole document. + [Editor's note: no he did not] wbr: used to specify where a word may + break and it is supercalifragilisticexpialidocious.

+ +
+
+
+
+

# Palpable Content

+

Elements a, address, blockquote, + button, details, dl, fieldset, + figure, form, input, label, + map, ol, output, pre, + select, table, textarea, + ul, and others make up the palpable content category. +

+
+

a: Example.

+

address:

+
1 Infinite Loop
+ Cupertino, CA 95014
+ United States +
+

blockquote:

+
+

I quickly explained that many big jobs involve few hazards

+
+
+

This is a mult-line blockquote with a cite reference. People think focus means saying yes to the + thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred + other good ideas that there are. You have to + pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. + Innovation is saying no to 1,000 things.

+
Steve Jobs, Apple Worldwide Developers’ Conference, 1997
+
+

details and summary:

+
+ Copying... 25% + +
+
Transfer rate:
+
452KB/s
+
Duration:
+
01:16:27
+
Color profile:
+
SD (6-1-6)
+
Dimensions:
+
320×240
+
+
+

dl:

+
+
Definition List Title
+
Definition list division.
+
Kitchen Sink
+
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have + been mined. In this case, a bunch of markup.
+
aside
+
Defines content aside from the page content
+
blockquote
+
Defines a section that is quoted from another source
+
+

figure:

+
+ +
Figure 1: A picture of a bear from placebear.com +
+
+

+

# Forms

+
+
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+ I am legend +
+ + +
+
+ + +
+
+ + +
+
+
+ I am also legend + + + + +
+

+ + + + + + + +

+
+

ul and ol:

+
    +
  • Unordered List item one +
      +
    • Nested list item +
        +
      • Level 3, item one
        • +
      • Level 3, item two
        • +
      • Level 3, item three
        • +
      • Level 3, item four
        • +
      +
      • +
    • List item two
      • +
    • List item three
      • +
    • List item four
      • +
    +
    • +
  • List item two
    • +
  • List item three
    • +
  • List item four
    • +
+
    +
  1. List item one +
      +
    1. List item one +
        +
      1. List item one
        2. +
      2. List item two
        3. +
      3. List item three
        4. +
      4. List item four
        5. +
      +
      2. +
    2. List item two
      3. +
    3. List item three
      4. +
    4. List item four
      5. +
    +
    2. +
  2. List item two
    3. +
  3. List item three
    4. +
  4. List item four
    5. +
+

output:

+
+ + + = + +
+

pre:

+ 
+pre {
+display: block;
+padding: 7px;
+background-color: #F5F5F5;
+border: 1px solid #E1E1E8;
+border-radius: 3px;
+white-space: pre-wrap;
+word-break: break-all;
+font-family: Menlo, Monaco;
+line-height: 160%;
+}
+ 
You are in an open field west of a big white house with a boarded
+front door.
+There is a small mailbox here.
+
+> open mailbox
+
+Opening the mailbox reveals:
+A leaflet.
+
+>


+

# Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tables can have captions now.
PersonNumberThird Column
Someone Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor + fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id + nibh ultricies vehicula ut id elit.
Last One2800Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus + sit amet fermentum.
+

In the following table, characteristics are given in the second column, with the + negative side in the left column and the positive side in the right column.

+ + + + + + + + + + + + + + + + + + + + + +
Characteristics with positive and negative sides
NegativeCharacteristicPositive
SadMoodHappy
FailingGradePassing
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Complex table with a thead, multiple tbody elements, and a + tfoot.
200820072006
Net sales$32,479$24,006$19,315
Cost of sales21,33415,85213,717
Gross margin$11,145$8,154$5,598
Gross margin percentage34.3%34.0%29.0%
+ +
+
+
+
+

# Embeds

+

Elements audio, canvas, embed, + iframe, img, math, object, + picture, svg, video make up the embedded content + category. +

+
+

audio: By Cqdx + [CC BY-SA 3.0 ], from Wikimedia Commons. +

+

iframe:

+

img: Bill Murray

+

math:

+ + + + + Quadratic Equation + + + + x + = + + + - + b + ± + + + + b + + 2 + + - + 4 + a + c + + + + + 2 + a + + + + + + + +

picture: + + + Bill Murray + +

+

svg: + +

+

video: +

+ +
+
+ +
+
+

Find this document on GitHub.

+
+ + + \ No newline at end of file diff --git a/demo/scss/_breakpoints.scss b/demo/scss/_breakpoints.scss new file mode 100644 index 0000000..1eafa6a --- /dev/null +++ b/demo/scss/_breakpoints.scss @@ -0,0 +1,27 @@ +// In your project write +// @use '~@evanshunt/derekstrap'; +@use '../../index' as derekstrap; + +#breakpoints { + color: darkred; + + @include derekstrap.breakpoint('phone-large') { + color: chocolate; + } + + @include derekstrap.breakpoint('tablet') { + color: goldenrod; + } + + @include derekstrap.breakpoint('desktop') { + color: green; + } + + @include derekstrap.breakpoint('desktop-large') { + color: navy; + } + + @include derekstrap.breakpoint('desktop-extra-large') { + color: purple; + } +} \ No newline at end of file diff --git a/demo/scss/_cards.scss b/demo/scss/_cards.scss new file mode 100644 index 0000000..6892a71 --- /dev/null +++ b/demo/scss/_cards.scss @@ -0,0 +1,27 @@ +// In your project write +// @use '~@evanshunt/derekstrap'; +@use '../../index' as derekstrap; + +#cards { + .parent { + @include derekstrap.card-pattern('.child', + ( // column count + 'base': 2, + 'tablet': 3, + 'desktop': 4 + ), + ( // horizontal gutter + 'base': 1rem, + 'tablet': 2rem, + 'desktop': 3rem + ), + // vertical gutter + 1rem + ); + + .child { + background-color: lightblue; + height: 8rem; + } + } +} \ No newline at end of file diff --git a/dist/demo.js b/dist/demo.js new file mode 100644 index 0000000..e22247a --- /dev/null +++ b/dist/demo.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Derekstrap=e():t.Derekstrap=e()}(self,(()=>(()=>{var t={2507:(t,e,r)=>{"use strict";r.d(e,{Breakpoints:()=>u}),r(2564);r(5827),r(1539),r(9720),r(9653),r(4916),r(5306),r(1249),r(7327),r(6699),r(2023);const n="function"==typeof window.CustomEvent?window.CustomEvent:function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:null};var r=document.createEvent("CustomEvent");return r.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),r};var i,o,a,c,s={breakpoints:{},current:[],currentBreakpoint:"",init:function(t){this.breakpoints=t,this.currentBreakpoint=this.getCurrent(),this.current=this.get(),window.addEventListener("resize",this.eventEmitter)},getCurrent:function(){var t=Object.entries(this.breakpoints).reduce((function(t,e){return t&&!window.matchMedia("(min-width:"+t[1]+")").matches&&(t=null),window.matchMedia("(min-width:"+e[1]+")").matches&&t&&Number(t[1].replace(/\D/g,"")){var n=r(614),i=r(6330),o=TypeError;t.exports=function(t){if(n(t))return t;throw o(i(t)+" is not a function")}},483:(t,e,r)=>{var n=r(4411),i=r(6330),o=TypeError;t.exports=function(t){if(n(t))return t;throw o(i(t)+" is not a constructor")}},6077:(t,e,r)=>{var n=r(614),i=String,o=TypeError;t.exports=function(t){if("object"==typeof t||n(t))return t;throw o("Can't set "+i(t)+" as a prototype")}},1223:(t,e,r)=>{var n=r(5112),i=r(30),o=r(3070).f,a=n("unscopables"),c=Array.prototype;null==c[a]&&o(c,a,{configurable:!0,value:i(null)}),t.exports=function(t){c[a][t]=!0}},1530:(t,e,r)=>{"use strict";var n=r(8710).charAt;t.exports=function(t,e,r){return e+(r?n(t,e).length:1)}},787:(t,e,r)=>{var n=r(7976),i=TypeError;t.exports=function(t,e){if(n(e,t))return t;throw i("Incorrect invocation")}},9670:(t,e,r)=>{var n=r(111),i=String,o=TypeError;t.exports=function(t){if(n(t))return t;throw o(i(t)+" is not an object")}},533:(t,e,r)=>{"use strict";var n=r(2092).forEach,i=r(9341)("forEach");t.exports=i?[].forEach:function(t){return n(this,t,arguments.length>1?arguments[1]:void 0)}},1318:(t,e,r)=>{var n=r(5656),i=r(1400),o=r(6244),a=function(t){return function(e,r,a){var c,s=n(e),u=o(s),f=i(a,u);if(t&&r!=r){for(;u>f;)if((c=s[f++])!=c)return!0}else for(;u>f;f++)if((t||f in s)&&s[f]===r)return t||f||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},2092:(t,e,r)=>{var n=r(9974),i=r(1702),o=r(8361),a=r(7908),c=r(6244),s=r(5417),u=i([].push),f=function(t){var e=1==t,r=2==t,i=3==t,f=4==t,p=6==t,A=7==t,d=5==t||p;return function(h,l,m,v){for(var x,y,C=a(h),g=o(C),b=n(l,m),w=c(g),B=0,E=v||s,S=e?E(h,w):r||A?E(h,0):void 0;w>B;B++)if((d||B in g)&&(y=b(x=g[B],B,C),t))if(e)S[B]=y;else if(y)switch(t){case 3:return!0;case 5:return x;case 6:return B;case 2:u(S,x)}else switch(t){case 4:return!1;case 7:u(S,x)}return p?-1:i||f?f:S}};t.exports={forEach:f(0),map:f(1),filter:f(2),some:f(3),every:f(4),find:f(5),findIndex:f(6),filterReject:f(7)}},1194:(t,e,r)=>{var n=r(7293),i=r(5112),o=r(7392),a=i("species");t.exports=function(t){return o>=51||!n((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},9341:(t,e,r)=>{"use strict";var n=r(7293);t.exports=function(t,e){var r=[][t];return!!r&&n((function(){r.call(null,e||function(){return 1},1)}))}},3671:(t,e,r)=>{var n=r(9662),i=r(7908),o=r(8361),a=r(6244),c=TypeError,s=function(t){return function(e,r,s,u){n(r);var f=i(e),p=o(f),A=a(f),d=t?A-1:0,h=t?-1:1;if(s<2)for(;;){if(d in p){u=p[d],d+=h;break}if(d+=h,t?d<0:A<=d)throw c("Reduce of empty array with no initial value")}for(;t?d>=0:A>d;d+=h)d in p&&(u=r(u,p[d],d,f));return u}};t.exports={left:s(!1),right:s(!0)}},206:(t,e,r)=>{var n=r(1702);t.exports=n([].slice)},7475:(t,e,r)=>{var n=r(3157),i=r(4411),o=r(111),a=r(5112)("species"),c=Array;t.exports=function(t){var e;return n(t)&&(e=t.constructor,(i(e)&&(e===c||n(e.prototype))||o(e)&&null===(e=e[a]))&&(e=void 0)),void 0===e?c:e}},5417:(t,e,r)=>{var n=r(7475);t.exports=function(t,e){return new(n(t))(0===e?0:e)}},72:(t,e,r)=>{var n=r(5112)("iterator"),i=!1;try{var o=0,a={next:function(){return{done:!!o++}},return:function(){i=!0}};a[n]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!i)return!1;var r=!1;try{var o={};o[n]=function(){return{next:function(){return{done:r=!0}}}},t(o)}catch(t){}return r}},4326:(t,e,r)=>{var n=r(1702),i=n({}.toString),o=n("".slice);t.exports=function(t){return o(i(t),8,-1)}},648:(t,e,r)=>{var n=r(1694),i=r(614),o=r(4326),a=r(5112)("toStringTag"),c=Object,s="Arguments"==o(function(){return arguments}());t.exports=n?o:function(t){var e,r,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,e){try{return t[e]}catch(t){}}(e=c(t),a))?r:s?o(e):"Object"==(n=o(e))&&i(e.callee)?"Arguments":n}},9920:(t,e,r)=>{var n=r(2597),i=r(3887),o=r(1236),a=r(3070);t.exports=function(t,e,r){for(var c=i(e),s=a.f,u=o.f,f=0;f{var n=r(5112)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(r){try{return e[n]=!1,"/./"[t](e)}catch(t){}}return!1}},8880:(t,e,r)=>{var n=r(9781),i=r(3070),o=r(9114);t.exports=n?function(t,e,r){return i.f(t,e,o(1,r))}:function(t,e,r){return t[e]=r,t}},9114:t=>{t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},8052:(t,e,r)=>{var n=r(614),i=r(3070),o=r(6339),a=r(3072);t.exports=function(t,e,r,c){c||(c={});var s=c.enumerable,u=void 0!==c.name?c.name:e;if(n(r)&&o(r,u,c),c.global)s?t[e]=r:a(e,r);else{try{c.unsafe?t[e]&&(s=!0):delete t[e]}catch(t){}s?t[e]=r:i.f(t,e,{value:r,enumerable:!1,configurable:!c.nonConfigurable,writable:!c.nonWritable})}return t}},3072:(t,e,r)=>{var n=r(7854),i=Object.defineProperty;t.exports=function(t,e){try{i(n,t,{value:e,configurable:!0,writable:!0})}catch(r){n[t]=e}return e}},9781:(t,e,r)=>{var n=r(7293);t.exports=!n((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},317:(t,e,r)=>{var n=r(7854),i=r(111),o=n.document,a=i(o)&&i(o.createElement);t.exports=function(t){return a?o.createElement(t):{}}},324:t=>{t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},509:(t,e,r)=>{var n=r(317)("span").classList,i=n&&n.constructor&&n.constructor.prototype;t.exports=i===Object.prototype?void 0:i},871:(t,e,r)=>{var n=r(823),i=r(5268);t.exports=!n&&!i&&"object"==typeof window&&"object"==typeof document},823:t=>{t.exports="object"==typeof Deno&&Deno&&"object"==typeof Deno.version},528:(t,e,r)=>{var n=r(8113),i=r(7854);t.exports=/ipad|iphone|ipod/i.test(n)&&void 0!==i.Pebble},833:(t,e,r)=>{var n=r(8113);t.exports=/(?:ipad|iphone|ipod).*applewebkit/i.test(n)},5268:(t,e,r)=>{var n=r(4326),i=r(7854);t.exports="process"==n(i.process)},36:(t,e,r)=>{var n=r(8113);t.exports=/web0s(?!.*chrome)/i.test(n)},8113:(t,e,r)=>{var n=r(5005);t.exports=n("navigator","userAgent")||""},7392:(t,e,r)=>{var n,i,o=r(7854),a=r(8113),c=o.process,s=o.Deno,u=c&&c.versions||s&&s.version,f=u&&u.v8;f&&(i=(n=f.split("."))[0]>0&&n[0]<4?1:+(n[0]+n[1])),!i&&a&&(!(n=a.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/))&&(i=+n[1]),t.exports=i},748:t=>{t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},2109:(t,e,r)=>{var n=r(7854),i=r(1236).f,o=r(8880),a=r(8052),c=r(3072),s=r(9920),u=r(4705);t.exports=function(t,e){var r,f,p,A,d,h=t.target,l=t.global,m=t.stat;if(r=l?n:m?n[h]||c(h,{}):(n[h]||{}).prototype)for(f in e){if(A=e[f],p=t.dontCallGetSet?(d=i(r,f))&&d.value:r[f],!u(l?f:h+(m?".":"#")+f,t.forced)&&void 0!==p){if(typeof A==typeof p)continue;s(A,p)}(t.sham||p&&p.sham)&&o(A,"sham",!0),a(r,f,A,t)}}},7293:t=>{t.exports=function(t){try{return!!t()}catch(t){return!0}}},7007:(t,e,r)=>{"use strict";r(4916);var n=r(1702),i=r(8052),o=r(2261),a=r(7293),c=r(5112),s=r(8880),u=c("species"),f=RegExp.prototype;t.exports=function(t,e,r,p){var A=c(t),d=!a((function(){var e={};return e[A]=function(){return 7},7!=""[t](e)})),h=d&&!a((function(){var e=!1,r=/a/;return"split"===t&&((r={}).constructor={},r.constructor[u]=function(){return r},r.flags="",r[A]=/./[A]),r.exec=function(){return e=!0,null},r[A](""),!e}));if(!d||!h||r){var l=n(/./[A]),m=e(A,""[t],(function(t,e,r,i,a){var c=n(t),s=e.exec;return s===o||s===f.exec?d&&!a?{done:!0,value:l(e,r,i)}:{done:!0,value:c(r,e,i)}:{done:!1}}));i(String.prototype,t,m[0]),i(f,A,m[1])}p&&s(f[A],"sham",!0)}},2104:(t,e,r)=>{var n=r(4374),i=Function.prototype,o=i.apply,a=i.call;t.exports="object"==typeof Reflect&&Reflect.apply||(n?a.bind(o):function(){return a.apply(o,arguments)})},9974:(t,e,r)=>{var n=r(1702),i=r(9662),o=r(4374),a=n(n.bind);t.exports=function(t,e){return i(t),void 0===e?t:o?a(t,e):function(){return t.apply(e,arguments)}}},4374:(t,e,r)=>{var n=r(7293);t.exports=!n((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")}))},6916:(t,e,r)=>{var n=r(4374),i=Function.prototype.call;t.exports=n?i.bind(i):function(){return i.apply(i,arguments)}},6530:(t,e,r)=>{var n=r(9781),i=r(2597),o=Function.prototype,a=n&&Object.getOwnPropertyDescriptor,c=i(o,"name"),s=c&&"something"===function(){}.name,u=c&&(!n||n&&a(o,"name").configurable);t.exports={EXISTS:c,PROPER:s,CONFIGURABLE:u}},1702:(t,e,r)=>{var n=r(4374),i=Function.prototype,o=i.bind,a=i.call,c=n&&o.bind(a,a);t.exports=n?function(t){return t&&c(t)}:function(t){return t&&function(){return a.apply(t,arguments)}}},5005:(t,e,r)=>{var n=r(7854),i=r(614),o=function(t){return i(t)?t:void 0};t.exports=function(t,e){return arguments.length<2?o(n[t]):n[t]&&n[t][e]}},246:(t,e,r)=>{var n=r(648),i=r(8173),o=r(497),a=r(5112)("iterator");t.exports=function(t){if(null!=t)return i(t,a)||i(t,"@@iterator")||o[n(t)]}},554:(t,e,r)=>{var n=r(6916),i=r(9662),o=r(9670),a=r(6330),c=r(246),s=TypeError;t.exports=function(t,e){var r=arguments.length<2?c(t):e;if(i(r))return o(n(r,t));throw s(a(t)+" is not iterable")}},8173:(t,e,r)=>{var n=r(9662);t.exports=function(t,e){var r=t[e];return null==r?void 0:n(r)}},647:(t,e,r)=>{var n=r(1702),i=r(7908),o=Math.floor,a=n("".charAt),c=n("".replace),s=n("".slice),u=/\$([$&'`]|\d{1,2}|<[^>]*>)/g,f=/\$([$&'`]|\d{1,2})/g;t.exports=function(t,e,r,n,p,A){var d=r+t.length,h=n.length,l=f;return void 0!==p&&(p=i(p),l=u),c(A,l,(function(i,c){var u;switch(a(c,0)){case"$":return"$";case"&":return t;case"`":return s(e,0,r);case"'":return s(e,d);case"<":u=p[s(c,1,-1)];break;default:var f=+c;if(0===f)return i;if(f>h){var A=o(f/10);return 0===A?i:A<=h?void 0===n[A-1]?a(c,1):n[A-1]+a(c,1):i}u=n[f-1]}return void 0===u?"":u}))}},7854:(t,e,r)=>{var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof r.g&&r.g)||function(){return this}()||Function("return this")()},2597:(t,e,r)=>{var n=r(1702),i=r(7908),o=n({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return o(i(t),e)}},3501:t=>{t.exports={}},842:(t,e,r)=>{var n=r(7854);t.exports=function(t,e){var r=n.console;r&&r.error&&(1==arguments.length?r.error(t):r.error(t,e))}},490:(t,e,r)=>{var n=r(5005);t.exports=n("document","documentElement")},4664:(t,e,r)=>{var n=r(9781),i=r(7293),o=r(317);t.exports=!n&&!i((function(){return 7!=Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},8361:(t,e,r)=>{var n=r(1702),i=r(7293),o=r(4326),a=Object,c=n("".split);t.exports=i((function(){return!a("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?c(t,""):a(t)}:a},9587:(t,e,r)=>{var n=r(614),i=r(111),o=r(7674);t.exports=function(t,e,r){var a,c;return o&&n(a=e.constructor)&&a!==r&&i(c=a.prototype)&&c!==r.prototype&&o(t,c),t}},2788:(t,e,r)=>{var n=r(1702),i=r(614),o=r(5465),a=n(Function.toString);i(o.inspectSource)||(o.inspectSource=function(t){return a(t)}),t.exports=o.inspectSource},9909:(t,e,r)=>{var n,i,o,a=r(8536),c=r(7854),s=r(1702),u=r(111),f=r(8880),p=r(2597),A=r(5465),d=r(6200),h=r(3501),l="Object already initialized",m=c.TypeError,v=c.WeakMap;if(a||A.state){var x=A.state||(A.state=new v),y=s(x.get),C=s(x.has),g=s(x.set);n=function(t,e){if(C(x,t))throw new m(l);return e.facade=t,g(x,t,e),e},i=function(t){return y(x,t)||{}},o=function(t){return C(x,t)}}else{var b=d("state");h[b]=!0,n=function(t,e){if(p(t,b))throw new m(l);return e.facade=t,f(t,b,e),e},i=function(t){return p(t,b)?t[b]:{}},o=function(t){return p(t,b)}}t.exports={set:n,get:i,has:o,enforce:function(t){return o(t)?i(t):n(t,{})},getterFor:function(t){return function(e){var r;if(!u(e)||(r=i(e)).type!==t)throw m("Incompatible receiver, "+t+" required");return r}}}},659:(t,e,r)=>{var n=r(5112),i=r(497),o=n("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(i.Array===t||a[o]===t)}},3157:(t,e,r)=>{var n=r(4326);t.exports=Array.isArray||function(t){return"Array"==n(t)}},614:t=>{t.exports=function(t){return"function"==typeof t}},4411:(t,e,r)=>{var n=r(1702),i=r(7293),o=r(614),a=r(648),c=r(5005),s=r(2788),u=function(){},f=[],p=c("Reflect","construct"),A=/^\s*(?:class|function)\b/,d=n(A.exec),h=!A.exec(u),l=function(t){if(!o(t))return!1;try{return p(u,f,t),!0}catch(t){return!1}},m=function(t){if(!o(t))return!1;switch(a(t)){case"AsyncFunction":case"GeneratorFunction":case"AsyncGeneratorFunction":return!1}try{return h||!!d(A,s(t))}catch(t){return!0}};m.sham=!0,t.exports=!p||i((function(){var t;return l(l.call)||!l(Object)||!l((function(){t=!0}))||t}))?m:l},4705:(t,e,r)=>{var n=r(7293),i=r(614),o=/#|\.prototype\./,a=function(t,e){var r=s[c(t)];return r==f||r!=u&&(i(e)?n(e):!!e)},c=a.normalize=function(t){return String(t).replace(o,".").toLowerCase()},s=a.data={},u=a.NATIVE="N",f=a.POLYFILL="P";t.exports=a},111:(t,e,r)=>{var n=r(614);t.exports=function(t){return"object"==typeof t?null!==t:n(t)}},1913:t=>{t.exports=!1},7850:(t,e,r)=>{var n=r(111),i=r(4326),o=r(5112)("match");t.exports=function(t){var e;return n(t)&&(void 0!==(e=t[o])?!!e:"RegExp"==i(t))}},2190:(t,e,r)=>{var n=r(5005),i=r(614),o=r(7976),a=r(3307),c=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=n("Symbol");return i(e)&&o(e.prototype,c(t))}},408:(t,e,r)=>{var n=r(9974),i=r(6916),o=r(9670),a=r(6330),c=r(659),s=r(6244),u=r(7976),f=r(554),p=r(246),A=r(212),d=TypeError,h=function(t,e){this.stopped=t,this.result=e},l=h.prototype;t.exports=function(t,e,r){var m,v,x,y,C,g,b,w=r&&r.that,B=!(!r||!r.AS_ENTRIES),E=!(!r||!r.IS_RECORD),S=!(!r||!r.IS_ITERATOR),k=!(!r||!r.INTERRUPTED),T=n(e,w),O=function(t){return m&&A(m,"normal",t),new h(!0,t)},j=function(t){return B?(o(t),k?T(t[0],t[1],O):T(t[0],t[1])):k?T(t,O):T(t)};if(E)m=t.iterator;else if(S)m=t;else{if(!(v=p(t)))throw d(a(t)+" is not iterable");if(c(v)){for(x=0,y=s(t);y>x;x++)if((C=j(t[x]))&&u(l,C))return C;return new h(!1)}m=f(t,v)}for(g=E?t.next:m.next;!(b=i(g,m)).done;){try{C=j(b.value)}catch(t){A(m,"throw",t)}if("object"==typeof C&&C&&u(l,C))return C}return new h(!1)}},212:(t,e,r)=>{var n=r(6916),i=r(9670),o=r(8173);t.exports=function(t,e,r){var a,c;i(t);try{if(!(a=o(t,"return"))){if("throw"===e)throw r;return r}a=n(a,t)}catch(t){c=!0,a=t}if("throw"===e)throw r;if(c)throw a;return i(a),r}},497:t=>{t.exports={}},6244:(t,e,r)=>{var n=r(7466);t.exports=function(t){return n(t.length)}},6339:(t,e,r)=>{var n=r(7293),i=r(614),o=r(2597),a=r(9781),c=r(6530).CONFIGURABLE,s=r(2788),u=r(9909),f=u.enforce,p=u.get,A=Object.defineProperty,d=a&&!n((function(){return 8!==A((function(){}),"length",{value:8}).length})),h=String(String).split("String"),l=t.exports=function(t,e,r){"Symbol("===String(e).slice(0,7)&&(e="["+String(e).replace(/^Symbol\(([^)]*)\)/,"$1")+"]"),r&&r.getter&&(e="get "+e),r&&r.setter&&(e="set "+e),(!o(t,"name")||c&&t.name!==e)&&(a?A(t,"name",{value:e,configurable:!0}):t.name=e),d&&r&&o(r,"arity")&&t.length!==r.arity&&A(t,"length",{value:r.arity});try{r&&o(r,"constructor")&&r.constructor?a&&A(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(t){}var n=f(t);return o(n,"source")||(n.source=h.join("string"==typeof e?e:"")),t};Function.prototype.toString=l((function(){return i(this)&&p(this).source||s(this)}),"toString")},4758:t=>{var e=Math.ceil,r=Math.floor;t.exports=Math.trunc||function(t){var n=+t;return(n>0?r:e)(n)}},948:(t,e,r)=>{var n,i,o,a,c,s,u,f,p=r(7854),A=r(9974),d=r(1236).f,h=r(261).set,l=r(833),m=r(528),v=r(36),x=r(5268),y=p.MutationObserver||p.WebKitMutationObserver,C=p.document,g=p.process,b=p.Promise,w=d(p,"queueMicrotask"),B=w&&w.value;B||(n=function(){var t,e;for(x&&(t=g.domain)&&t.exit();i;){e=i.fn,i=i.next;try{e()}catch(t){throw i?a():o=void 0,t}}o=void 0,t&&t.enter()},l||x||v||!y||!C?!m&&b&&b.resolve?((u=b.resolve(void 0)).constructor=b,f=A(u.then,u),a=function(){f(n)}):x?a=function(){g.nextTick(n)}:(h=A(h,p),a=function(){h(n)}):(c=!0,s=C.createTextNode(""),new y(n).observe(s,{characterData:!0}),a=function(){s.data=c=!c})),t.exports=B||function(t){var e={fn:t,next:void 0};o&&(o.next=e),i||(i=e,a()),o=e}},133:(t,e,r)=>{var n=r(7392),i=r(7293);t.exports=!!Object.getOwnPropertySymbols&&!i((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},8536:(t,e,r)=>{var n=r(7854),i=r(614),o=r(2788),a=n.WeakMap;t.exports=i(a)&&/native code/.test(o(a))},523:(t,e,r)=>{"use strict";var n=r(9662),i=function(t){var e,r;this.promise=new t((function(t,n){if(void 0!==e||void 0!==r)throw TypeError("Bad Promise constructor");e=t,r=n})),this.resolve=n(e),this.reject=n(r)};t.exports.f=function(t){return new i(t)}},3929:(t,e,r)=>{var n=r(7850),i=TypeError;t.exports=function(t){if(n(t))throw i("The method doesn't accept regular expressions");return t}},30:(t,e,r)=>{var n,i=r(9670),o=r(6048),a=r(748),c=r(3501),s=r(490),u=r(317),f=r(6200)("IE_PROTO"),p=function(){},A=function(t){return" diff --git a/demo/scss/_breakpoints.scss b/demo/scss/_breakpoints.scss index 1eafa6a..26d0a04 100644 --- a/demo/scss/_breakpoints.scss +++ b/demo/scss/_breakpoints.scss @@ -1,4 +1,4 @@ -// In your project write +// In your project, write // @use '~@evanshunt/derekstrap'; @use '../../index' as derekstrap; diff --git a/demo/scss/_cards.scss b/demo/scss/_cards.scss index 6892a71..2985016 100644 --- a/demo/scss/_cards.scss +++ b/demo/scss/_cards.scss @@ -1,4 +1,4 @@ -// In your project write +// In your project, write // @use '~@evanshunt/derekstrap'; @use '../../index' as derekstrap; diff --git a/demo/scss/_proportional-text.scss b/demo/scss/_proportional-text.scss new file mode 100644 index 0000000..0bbb26f --- /dev/null +++ b/demo/scss/_proportional-text.scss @@ -0,0 +1,11 @@ +// In your project, write +// @use '~@evanshunt/derekstrap'; +@use '../../index' as derekstrap; + +#proportional-text { + @extend %proportional-text; + + img { + width: 20em; + } +} \ No newline at end of file diff --git a/demo/scss/_spacing.scss b/demo/scss/_spacing.scss new file mode 100644 index 0000000..4ba83a7 --- /dev/null +++ b/demo/scss/_spacing.scss @@ -0,0 +1,86 @@ +// In your project, write +// @use '~@evanshunt/derekstrap'; +@use '../../index' as derekstrap; + +$horizontal-spacing: ( + 'base': 2rem, + 'phone-large': 4rem, + 'desktop': 10vw, + 'desktop-large': 12vw, + 'desktop-extra-large': 16vw +); + +$vertical-spacing: ( + 'base': 2rem, + 'desktop': 4rem, + 'desktop-extra-large': 8rem +); + +#spacing { + .wrapper { + background-color: lightsalmon; + + .block { + background-color: lightgreen; + border: 1px solid black; + + .inner { + background-color: white; + height: 5rem; + text-align: center; + } + } + + .vertical-padding { + @include derekstrap.vertical-spacing($vertical-spacing); + } + + .vertical-margin { + @include derekstrap.vertical-spacing($vertical-spacing, 'both', 'margin'); + } + + .top-padding { + @include derekstrap.vertical-spacing($vertical-spacing, 'top'); + } + + .top-margin { + @include derekstrap.vertical-spacing($vertical-spacing, 'top', 'margin'); + } + + .bottom-padding { + @include derekstrap.vertical-spacing($vertical-spacing, 'bottom'); + } + + .bottom-margin { + @include derekstrap.vertical-spacing($vertical-spacing, 'bottom', 'margin'); + } + + .horizontal-padding { + @include derekstrap.horizontal-spacing($horizontal-spacing); + } + + .horizontal-margin { + @include derekstrap.horizontal-spacing($horizontal-spacing, 'both', 'margin'); + } + + .left-padding { + @include derekstrap.horizontal-spacing($horizontal-spacing, 'left'); + } + + .left-margin { + @include derekstrap.horizontal-spacing($horizontal-spacing, 'left', 'margin'); + } + + .right-padding { + @include derekstrap.horizontal-spacing($horizontal-spacing, 'right'); + } + + .right-margin { + @include derekstrap.horizontal-spacing($horizontal-spacing, 'right', 'margin'); + } + + hr { + margin: 0; + } + } +} \ No newline at end of file diff --git a/dist/demo.js b/dist/demo.js index e22247a..4be8c2f 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Derekstrap=e():t.Derekstrap=e()}(self,(()=>(()=>{var t={2507:(t,e,r)=>{"use strict";r.d(e,{Breakpoints:()=>u}),r(2564);r(5827),r(1539),r(9720),r(9653),r(4916),r(5306),r(1249),r(7327),r(6699),r(2023);const n="function"==typeof window.CustomEvent?window.CustomEvent:function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:null};var r=document.createEvent("CustomEvent");return r.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),r};var i,o,a,c,s={breakpoints:{},current:[],currentBreakpoint:"",init:function(t){this.breakpoints=t,this.currentBreakpoint=this.getCurrent(),this.current=this.get(),window.addEventListener("resize",this.eventEmitter)},getCurrent:function(){var t=Object.entries(this.breakpoints).reduce((function(t,e){return t&&!window.matchMedia("(min-width:"+t[1]+")").matches&&(t=null),window.matchMedia("(min-width:"+e[1]+")").matches&&t&&Number(t[1].replace(/\D/g,"")){var n=r(614),i=r(6330),o=TypeError;t.exports=function(t){if(n(t))return t;throw o(i(t)+" is not a function")}},483:(t,e,r)=>{var n=r(4411),i=r(6330),o=TypeError;t.exports=function(t){if(n(t))return t;throw o(i(t)+" is not a constructor")}},6077:(t,e,r)=>{var n=r(614),i=String,o=TypeError;t.exports=function(t){if("object"==typeof t||n(t))return t;throw o("Can't set "+i(t)+" as a prototype")}},1223:(t,e,r)=>{var n=r(5112),i=r(30),o=r(3070).f,a=n("unscopables"),c=Array.prototype;null==c[a]&&o(c,a,{configurable:!0,value:i(null)}),t.exports=function(t){c[a][t]=!0}},1530:(t,e,r)=>{"use strict";var n=r(8710).charAt;t.exports=function(t,e,r){return e+(r?n(t,e).length:1)}},787:(t,e,r)=>{var n=r(7976),i=TypeError;t.exports=function(t,e){if(n(e,t))return t;throw i("Incorrect invocation")}},9670:(t,e,r)=>{var n=r(111),i=String,o=TypeError;t.exports=function(t){if(n(t))return t;throw o(i(t)+" is not an object")}},533:(t,e,r)=>{"use strict";var n=r(2092).forEach,i=r(9341)("forEach");t.exports=i?[].forEach:function(t){return n(this,t,arguments.length>1?arguments[1]:void 0)}},1318:(t,e,r)=>{var n=r(5656),i=r(1400),o=r(6244),a=function(t){return function(e,r,a){var c,s=n(e),u=o(s),f=i(a,u);if(t&&r!=r){for(;u>f;)if((c=s[f++])!=c)return!0}else for(;u>f;f++)if((t||f in s)&&s[f]===r)return t||f||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},2092:(t,e,r)=>{var n=r(9974),i=r(1702),o=r(8361),a=r(7908),c=r(6244),s=r(5417),u=i([].push),f=function(t){var e=1==t,r=2==t,i=3==t,f=4==t,p=6==t,A=7==t,d=5==t||p;return function(h,l,m,v){for(var x,y,C=a(h),g=o(C),b=n(l,m),w=c(g),B=0,E=v||s,S=e?E(h,w):r||A?E(h,0):void 0;w>B;B++)if((d||B in g)&&(y=b(x=g[B],B,C),t))if(e)S[B]=y;else if(y)switch(t){case 3:return!0;case 5:return x;case 6:return B;case 2:u(S,x)}else switch(t){case 4:return!1;case 7:u(S,x)}return p?-1:i||f?f:S}};t.exports={forEach:f(0),map:f(1),filter:f(2),some:f(3),every:f(4),find:f(5),findIndex:f(6),filterReject:f(7)}},1194:(t,e,r)=>{var n=r(7293),i=r(5112),o=r(7392),a=i("species");t.exports=function(t){return o>=51||!n((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},9341:(t,e,r)=>{"use strict";var n=r(7293);t.exports=function(t,e){var r=[][t];return!!r&&n((function(){r.call(null,e||function(){return 1},1)}))}},3671:(t,e,r)=>{var n=r(9662),i=r(7908),o=r(8361),a=r(6244),c=TypeError,s=function(t){return function(e,r,s,u){n(r);var f=i(e),p=o(f),A=a(f),d=t?A-1:0,h=t?-1:1;if(s<2)for(;;){if(d in p){u=p[d],d+=h;break}if(d+=h,t?d<0:A<=d)throw c("Reduce of empty array with no initial value")}for(;t?d>=0:A>d;d+=h)d in p&&(u=r(u,p[d],d,f));return u}};t.exports={left:s(!1),right:s(!0)}},206:(t,e,r)=>{var n=r(1702);t.exports=n([].slice)},7475:(t,e,r)=>{var n=r(3157),i=r(4411),o=r(111),a=r(5112)("species"),c=Array;t.exports=function(t){var e;return n(t)&&(e=t.constructor,(i(e)&&(e===c||n(e.prototype))||o(e)&&null===(e=e[a]))&&(e=void 0)),void 0===e?c:e}},5417:(t,e,r)=>{var n=r(7475);t.exports=function(t,e){return new(n(t))(0===e?0:e)}},72:(t,e,r)=>{var n=r(5112)("iterator"),i=!1;try{var o=0,a={next:function(){return{done:!!o++}},return:function(){i=!0}};a[n]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!i)return!1;var r=!1;try{var o={};o[n]=function(){return{next:function(){return{done:r=!0}}}},t(o)}catch(t){}return r}},4326:(t,e,r)=>{var n=r(1702),i=n({}.toString),o=n("".slice);t.exports=function(t){return o(i(t),8,-1)}},648:(t,e,r)=>{var n=r(1694),i=r(614),o=r(4326),a=r(5112)("toStringTag"),c=Object,s="Arguments"==o(function(){return arguments}());t.exports=n?o:function(t){var e,r,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,e){try{return t[e]}catch(t){}}(e=c(t),a))?r:s?o(e):"Object"==(n=o(e))&&i(e.callee)?"Arguments":n}},9920:(t,e,r)=>{var n=r(2597),i=r(3887),o=r(1236),a=r(3070);t.exports=function(t,e,r){for(var c=i(e),s=a.f,u=o.f,f=0;f{var n=r(5112)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(r){try{return e[n]=!1,"/./"[t](e)}catch(t){}}return!1}},8880:(t,e,r)=>{var n=r(9781),i=r(3070),o=r(9114);t.exports=n?function(t,e,r){return i.f(t,e,o(1,r))}:function(t,e,r){return t[e]=r,t}},9114:t=>{t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},8052:(t,e,r)=>{var n=r(614),i=r(3070),o=r(6339),a=r(3072);t.exports=function(t,e,r,c){c||(c={});var s=c.enumerable,u=void 0!==c.name?c.name:e;if(n(r)&&o(r,u,c),c.global)s?t[e]=r:a(e,r);else{try{c.unsafe?t[e]&&(s=!0):delete t[e]}catch(t){}s?t[e]=r:i.f(t,e,{value:r,enumerable:!1,configurable:!c.nonConfigurable,writable:!c.nonWritable})}return t}},3072:(t,e,r)=>{var n=r(7854),i=Object.defineProperty;t.exports=function(t,e){try{i(n,t,{value:e,configurable:!0,writable:!0})}catch(r){n[t]=e}return e}},9781:(t,e,r)=>{var n=r(7293);t.exports=!n((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},317:(t,e,r)=>{var n=r(7854),i=r(111),o=n.document,a=i(o)&&i(o.createElement);t.exports=function(t){return a?o.createElement(t):{}}},324:t=>{t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},509:(t,e,r)=>{var n=r(317)("span").classList,i=n&&n.constructor&&n.constructor.prototype;t.exports=i===Object.prototype?void 0:i},871:(t,e,r)=>{var n=r(823),i=r(5268);t.exports=!n&&!i&&"object"==typeof window&&"object"==typeof document},823:t=>{t.exports="object"==typeof Deno&&Deno&&"object"==typeof Deno.version},528:(t,e,r)=>{var n=r(8113),i=r(7854);t.exports=/ipad|iphone|ipod/i.test(n)&&void 0!==i.Pebble},833:(t,e,r)=>{var n=r(8113);t.exports=/(?:ipad|iphone|ipod).*applewebkit/i.test(n)},5268:(t,e,r)=>{var n=r(4326),i=r(7854);t.exports="process"==n(i.process)},36:(t,e,r)=>{var n=r(8113);t.exports=/web0s(?!.*chrome)/i.test(n)},8113:(t,e,r)=>{var n=r(5005);t.exports=n("navigator","userAgent")||""},7392:(t,e,r)=>{var n,i,o=r(7854),a=r(8113),c=o.process,s=o.Deno,u=c&&c.versions||s&&s.version,f=u&&u.v8;f&&(i=(n=f.split("."))[0]>0&&n[0]<4?1:+(n[0]+n[1])),!i&&a&&(!(n=a.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/))&&(i=+n[1]),t.exports=i},748:t=>{t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},2109:(t,e,r)=>{var n=r(7854),i=r(1236).f,o=r(8880),a=r(8052),c=r(3072),s=r(9920),u=r(4705);t.exports=function(t,e){var r,f,p,A,d,h=t.target,l=t.global,m=t.stat;if(r=l?n:m?n[h]||c(h,{}):(n[h]||{}).prototype)for(f in e){if(A=e[f],p=t.dontCallGetSet?(d=i(r,f))&&d.value:r[f],!u(l?f:h+(m?".":"#")+f,t.forced)&&void 0!==p){if(typeof A==typeof p)continue;s(A,p)}(t.sham||p&&p.sham)&&o(A,"sham",!0),a(r,f,A,t)}}},7293:t=>{t.exports=function(t){try{return!!t()}catch(t){return!0}}},7007:(t,e,r)=>{"use strict";r(4916);var n=r(1702),i=r(8052),o=r(2261),a=r(7293),c=r(5112),s=r(8880),u=c("species"),f=RegExp.prototype;t.exports=function(t,e,r,p){var A=c(t),d=!a((function(){var e={};return e[A]=function(){return 7},7!=""[t](e)})),h=d&&!a((function(){var e=!1,r=/a/;return"split"===t&&((r={}).constructor={},r.constructor[u]=function(){return r},r.flags="",r[A]=/./[A]),r.exec=function(){return e=!0,null},r[A](""),!e}));if(!d||!h||r){var l=n(/./[A]),m=e(A,""[t],(function(t,e,r,i,a){var c=n(t),s=e.exec;return s===o||s===f.exec?d&&!a?{done:!0,value:l(e,r,i)}:{done:!0,value:c(r,e,i)}:{done:!1}}));i(String.prototype,t,m[0]),i(f,A,m[1])}p&&s(f[A],"sham",!0)}},2104:(t,e,r)=>{var n=r(4374),i=Function.prototype,o=i.apply,a=i.call;t.exports="object"==typeof Reflect&&Reflect.apply||(n?a.bind(o):function(){return a.apply(o,arguments)})},9974:(t,e,r)=>{var n=r(1702),i=r(9662),o=r(4374),a=n(n.bind);t.exports=function(t,e){return i(t),void 0===e?t:o?a(t,e):function(){return t.apply(e,arguments)}}},4374:(t,e,r)=>{var n=r(7293);t.exports=!n((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")}))},6916:(t,e,r)=>{var n=r(4374),i=Function.prototype.call;t.exports=n?i.bind(i):function(){return i.apply(i,arguments)}},6530:(t,e,r)=>{var n=r(9781),i=r(2597),o=Function.prototype,a=n&&Object.getOwnPropertyDescriptor,c=i(o,"name"),s=c&&"something"===function(){}.name,u=c&&(!n||n&&a(o,"name").configurable);t.exports={EXISTS:c,PROPER:s,CONFIGURABLE:u}},1702:(t,e,r)=>{var n=r(4374),i=Function.prototype,o=i.bind,a=i.call,c=n&&o.bind(a,a);t.exports=n?function(t){return t&&c(t)}:function(t){return t&&function(){return a.apply(t,arguments)}}},5005:(t,e,r)=>{var n=r(7854),i=r(614),o=function(t){return i(t)?t:void 0};t.exports=function(t,e){return arguments.length<2?o(n[t]):n[t]&&n[t][e]}},246:(t,e,r)=>{var n=r(648),i=r(8173),o=r(497),a=r(5112)("iterator");t.exports=function(t){if(null!=t)return i(t,a)||i(t,"@@iterator")||o[n(t)]}},554:(t,e,r)=>{var n=r(6916),i=r(9662),o=r(9670),a=r(6330),c=r(246),s=TypeError;t.exports=function(t,e){var r=arguments.length<2?c(t):e;if(i(r))return o(n(r,t));throw s(a(t)+" is not iterable")}},8173:(t,e,r)=>{var n=r(9662);t.exports=function(t,e){var r=t[e];return null==r?void 0:n(r)}},647:(t,e,r)=>{var n=r(1702),i=r(7908),o=Math.floor,a=n("".charAt),c=n("".replace),s=n("".slice),u=/\$([$&'`]|\d{1,2}|<[^>]*>)/g,f=/\$([$&'`]|\d{1,2})/g;t.exports=function(t,e,r,n,p,A){var d=r+t.length,h=n.length,l=f;return void 0!==p&&(p=i(p),l=u),c(A,l,(function(i,c){var u;switch(a(c,0)){case"$":return"$";case"&":return t;case"`":return s(e,0,r);case"'":return s(e,d);case"<":u=p[s(c,1,-1)];break;default:var f=+c;if(0===f)return i;if(f>h){var A=o(f/10);return 0===A?i:A<=h?void 0===n[A-1]?a(c,1):n[A-1]+a(c,1):i}u=n[f-1]}return void 0===u?"":u}))}},7854:(t,e,r)=>{var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof r.g&&r.g)||function(){return this}()||Function("return this")()},2597:(t,e,r)=>{var n=r(1702),i=r(7908),o=n({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return o(i(t),e)}},3501:t=>{t.exports={}},842:(t,e,r)=>{var n=r(7854);t.exports=function(t,e){var r=n.console;r&&r.error&&(1==arguments.length?r.error(t):r.error(t,e))}},490:(t,e,r)=>{var n=r(5005);t.exports=n("document","documentElement")},4664:(t,e,r)=>{var n=r(9781),i=r(7293),o=r(317);t.exports=!n&&!i((function(){return 7!=Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},8361:(t,e,r)=>{var n=r(1702),i=r(7293),o=r(4326),a=Object,c=n("".split);t.exports=i((function(){return!a("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?c(t,""):a(t)}:a},9587:(t,e,r)=>{var n=r(614),i=r(111),o=r(7674);t.exports=function(t,e,r){var a,c;return o&&n(a=e.constructor)&&a!==r&&i(c=a.prototype)&&c!==r.prototype&&o(t,c),t}},2788:(t,e,r)=>{var n=r(1702),i=r(614),o=r(5465),a=n(Function.toString);i(o.inspectSource)||(o.inspectSource=function(t){return a(t)}),t.exports=o.inspectSource},9909:(t,e,r)=>{var n,i,o,a=r(8536),c=r(7854),s=r(1702),u=r(111),f=r(8880),p=r(2597),A=r(5465),d=r(6200),h=r(3501),l="Object already initialized",m=c.TypeError,v=c.WeakMap;if(a||A.state){var x=A.state||(A.state=new v),y=s(x.get),C=s(x.has),g=s(x.set);n=function(t,e){if(C(x,t))throw new m(l);return e.facade=t,g(x,t,e),e},i=function(t){return y(x,t)||{}},o=function(t){return C(x,t)}}else{var b=d("state");h[b]=!0,n=function(t,e){if(p(t,b))throw new m(l);return e.facade=t,f(t,b,e),e},i=function(t){return p(t,b)?t[b]:{}},o=function(t){return p(t,b)}}t.exports={set:n,get:i,has:o,enforce:function(t){return o(t)?i(t):n(t,{})},getterFor:function(t){return function(e){var r;if(!u(e)||(r=i(e)).type!==t)throw m("Incompatible receiver, "+t+" required");return r}}}},659:(t,e,r)=>{var n=r(5112),i=r(497),o=n("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(i.Array===t||a[o]===t)}},3157:(t,e,r)=>{var n=r(4326);t.exports=Array.isArray||function(t){return"Array"==n(t)}},614:t=>{t.exports=function(t){return"function"==typeof t}},4411:(t,e,r)=>{var n=r(1702),i=r(7293),o=r(614),a=r(648),c=r(5005),s=r(2788),u=function(){},f=[],p=c("Reflect","construct"),A=/^\s*(?:class|function)\b/,d=n(A.exec),h=!A.exec(u),l=function(t){if(!o(t))return!1;try{return p(u,f,t),!0}catch(t){return!1}},m=function(t){if(!o(t))return!1;switch(a(t)){case"AsyncFunction":case"GeneratorFunction":case"AsyncGeneratorFunction":return!1}try{return h||!!d(A,s(t))}catch(t){return!0}};m.sham=!0,t.exports=!p||i((function(){var t;return l(l.call)||!l(Object)||!l((function(){t=!0}))||t}))?m:l},4705:(t,e,r)=>{var n=r(7293),i=r(614),o=/#|\.prototype\./,a=function(t,e){var r=s[c(t)];return r==f||r!=u&&(i(e)?n(e):!!e)},c=a.normalize=function(t){return String(t).replace(o,".").toLowerCase()},s=a.data={},u=a.NATIVE="N",f=a.POLYFILL="P";t.exports=a},111:(t,e,r)=>{var n=r(614);t.exports=function(t){return"object"==typeof t?null!==t:n(t)}},1913:t=>{t.exports=!1},7850:(t,e,r)=>{var n=r(111),i=r(4326),o=r(5112)("match");t.exports=function(t){var e;return n(t)&&(void 0!==(e=t[o])?!!e:"RegExp"==i(t))}},2190:(t,e,r)=>{var n=r(5005),i=r(614),o=r(7976),a=r(3307),c=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=n("Symbol");return i(e)&&o(e.prototype,c(t))}},408:(t,e,r)=>{var n=r(9974),i=r(6916),o=r(9670),a=r(6330),c=r(659),s=r(6244),u=r(7976),f=r(554),p=r(246),A=r(212),d=TypeError,h=function(t,e){this.stopped=t,this.result=e},l=h.prototype;t.exports=function(t,e,r){var m,v,x,y,C,g,b,w=r&&r.that,B=!(!r||!r.AS_ENTRIES),E=!(!r||!r.IS_RECORD),S=!(!r||!r.IS_ITERATOR),k=!(!r||!r.INTERRUPTED),T=n(e,w),O=function(t){return m&&A(m,"normal",t),new h(!0,t)},j=function(t){return B?(o(t),k?T(t[0],t[1],O):T(t[0],t[1])):k?T(t,O):T(t)};if(E)m=t.iterator;else if(S)m=t;else{if(!(v=p(t)))throw d(a(t)+" is not iterable");if(c(v)){for(x=0,y=s(t);y>x;x++)if((C=j(t[x]))&&u(l,C))return C;return new h(!1)}m=f(t,v)}for(g=E?t.next:m.next;!(b=i(g,m)).done;){try{C=j(b.value)}catch(t){A(m,"throw",t)}if("object"==typeof C&&C&&u(l,C))return C}return new h(!1)}},212:(t,e,r)=>{var n=r(6916),i=r(9670),o=r(8173);t.exports=function(t,e,r){var a,c;i(t);try{if(!(a=o(t,"return"))){if("throw"===e)throw r;return r}a=n(a,t)}catch(t){c=!0,a=t}if("throw"===e)throw r;if(c)throw a;return i(a),r}},497:t=>{t.exports={}},6244:(t,e,r)=>{var n=r(7466);t.exports=function(t){return n(t.length)}},6339:(t,e,r)=>{var n=r(7293),i=r(614),o=r(2597),a=r(9781),c=r(6530).CONFIGURABLE,s=r(2788),u=r(9909),f=u.enforce,p=u.get,A=Object.defineProperty,d=a&&!n((function(){return 8!==A((function(){}),"length",{value:8}).length})),h=String(String).split("String"),l=t.exports=function(t,e,r){"Symbol("===String(e).slice(0,7)&&(e="["+String(e).replace(/^Symbol\(([^)]*)\)/,"$1")+"]"),r&&r.getter&&(e="get "+e),r&&r.setter&&(e="set "+e),(!o(t,"name")||c&&t.name!==e)&&(a?A(t,"name",{value:e,configurable:!0}):t.name=e),d&&r&&o(r,"arity")&&t.length!==r.arity&&A(t,"length",{value:r.arity});try{r&&o(r,"constructor")&&r.constructor?a&&A(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(t){}var n=f(t);return o(n,"source")||(n.source=h.join("string"==typeof e?e:"")),t};Function.prototype.toString=l((function(){return i(this)&&p(this).source||s(this)}),"toString")},4758:t=>{var e=Math.ceil,r=Math.floor;t.exports=Math.trunc||function(t){var n=+t;return(n>0?r:e)(n)}},948:(t,e,r)=>{var n,i,o,a,c,s,u,f,p=r(7854),A=r(9974),d=r(1236).f,h=r(261).set,l=r(833),m=r(528),v=r(36),x=r(5268),y=p.MutationObserver||p.WebKitMutationObserver,C=p.document,g=p.process,b=p.Promise,w=d(p,"queueMicrotask"),B=w&&w.value;B||(n=function(){var t,e;for(x&&(t=g.domain)&&t.exit();i;){e=i.fn,i=i.next;try{e()}catch(t){throw i?a():o=void 0,t}}o=void 0,t&&t.enter()},l||x||v||!y||!C?!m&&b&&b.resolve?((u=b.resolve(void 0)).constructor=b,f=A(u.then,u),a=function(){f(n)}):x?a=function(){g.nextTick(n)}:(h=A(h,p),a=function(){h(n)}):(c=!0,s=C.createTextNode(""),new y(n).observe(s,{characterData:!0}),a=function(){s.data=c=!c})),t.exports=B||function(t){var e={fn:t,next:void 0};o&&(o.next=e),i||(i=e,a()),o=e}},133:(t,e,r)=>{var n=r(7392),i=r(7293);t.exports=!!Object.getOwnPropertySymbols&&!i((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},8536:(t,e,r)=>{var n=r(7854),i=r(614),o=r(2788),a=n.WeakMap;t.exports=i(a)&&/native code/.test(o(a))},523:(t,e,r)=>{"use strict";var n=r(9662),i=function(t){var e,r;this.promise=new t((function(t,n){if(void 0!==e||void 0!==r)throw TypeError("Bad Promise constructor");e=t,r=n})),this.resolve=n(e),this.reject=n(r)};t.exports.f=function(t){return new i(t)}},3929:(t,e,r)=>{var n=r(7850),i=TypeError;t.exports=function(t){if(n(t))throw i("The method doesn't accept regular expressions");return t}},30:(t,e,r)=>{var n,i=r(9670),o=r(6048),a=r(748),c=r(3501),s=r(490),u=r(317),f=r(6200)("IE_PROTO"),p=function(){},A=function(t){return" -
+ -
+

Breakpoints

@@ -22,9 +23,9 @@

Breakpoints

The largest current breakpoint is:

scss

-
+

js

-
+
@@ -51,7 +52,7 @@

Cards


scss

-
+
@@ -61,7 +62,7 @@

Auto scaling by view width

Anything in this section that is sized in em units should resize in scale with the screen width. Resetting at specified breakpoints.

Placeholder image -
+
@@ -118,9 +119,9 @@

.top-margin.right-padding

-
+
- + \ No newline at end of file diff --git a/docs/js/breakpoints.js b/docs/js/breakpoints.js index c4103a0..0204385 100644 --- a/docs/js/breakpoints.js +++ b/docs/js/breakpoints.js @@ -1,4 +1,4 @@ -// In your project write +// In your project, write // import breakpointList from '../styles/main.scss'; // import { Breakpoints } from '@evanshunt/derekstrap'; import breakpointList from '../demo.scss'; diff --git a/docs/kitchen-sink.html b/docs/kitchen-sink.html index 304ac2a..324442b 100644 --- a/docs/kitchen-sink.html +++ b/docs/kitchen-sink.html @@ -3,8 +3,11 @@ + HTML5 Kitchen Sink + + @@ -587,7 +590,7 @@

# Embeds

[CC BY-SA 3.0 ], from Wikimedia Commons.

-

iframe:

img: Bill Murray

math:

@@ -660,6 +663,6 @@

# Embeds

Find this document on GitHub.

- + \ No newline at end of file diff --git a/docs/scss/breakpoints.scss b/docs/scss/_breakpoints.scss similarity index 100% rename from docs/scss/breakpoints.scss rename to docs/scss/_breakpoints.scss diff --git a/docs/scss/cards.scss b/docs/scss/_cards.scss similarity index 100% rename from docs/scss/cards.scss rename to docs/scss/_cards.scss diff --git a/docs/scss/proportional-text.scss b/docs/scss/_proportional-text.scss similarity index 100% rename from docs/scss/proportional-text.scss rename to docs/scss/_proportional-text.scss diff --git a/docs/scss/spacing.scss b/docs/scss/_spacing.scss similarity index 100% rename from docs/scss/spacing.scss rename to docs/scss/_spacing.scss From f1d21890deced7e26c6975e078efb9ca5d24eeb2 Mon Sep 17 00:00:00 2001 From: David Toews Date: Wed, 21 Dec 2022 16:33:26 -0700 Subject: [PATCH 39/41] =?UTF-8?q?=F0=9F=9A=9A=20=20(filenames)=20re-renami?= =?UTF-8?q?ng=20for=20github=20pages=20/=20jekyll?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/index.html | 8 ++++---- docs/scss/{_breakpoints.scss => breakpoints.scss} | 0 docs/scss/{_cards.scss => cards.scss} | 0 .../{_proportional-text.scss => proportional-text.scss} | 0 docs/scss/{_spacing.scss => spacing.scss} | 0 5 files changed, 4 insertions(+), 4 deletions(-) rename docs/scss/{_breakpoints.scss => breakpoints.scss} (100%) rename docs/scss/{_cards.scss => cards.scss} (100%) rename docs/scss/{_proportional-text.scss => proportional-text.scss} (100%) rename docs/scss/{_spacing.scss => spacing.scss} (100%) diff --git a/docs/index.html b/docs/index.html index a04c0e0..df8d226 100644 --- a/docs/index.html +++ b/docs/index.html @@ -23,7 +23,7 @@

Breakpoints

The largest current breakpoint is:

scss

-
+

js

@@ -52,7 +52,7 @@

Cards


scss

-
+
@@ -62,7 +62,7 @@

Auto scaling by view width

Anything in this section that is sized in em units should resize in scale with the screen width. Resetting at specified breakpoints.

Placeholder image -
+
@@ -119,7 +119,7 @@

.top-margin.right-padding

-
+
diff --git a/docs/scss/_breakpoints.scss b/docs/scss/breakpoints.scss similarity index 100% rename from docs/scss/_breakpoints.scss rename to docs/scss/breakpoints.scss diff --git a/docs/scss/_cards.scss b/docs/scss/cards.scss similarity index 100% rename from docs/scss/_cards.scss rename to docs/scss/cards.scss diff --git a/docs/scss/_proportional-text.scss b/docs/scss/proportional-text.scss similarity index 100% rename from docs/scss/_proportional-text.scss rename to docs/scss/proportional-text.scss diff --git a/docs/scss/_spacing.scss b/docs/scss/spacing.scss similarity index 100% rename from docs/scss/_spacing.scss rename to docs/scss/spacing.scss From d3da9e7e6d1ef4f8e3371e2494c302138258c9f8 Mon Sep 17 00:00:00 2001 From: David Toews Date: Wed, 21 Dec 2022 16:56:07 -0700 Subject: [PATCH 40/41] =?UTF-8?q?=F0=9F=93=9D=20=20(docs)=20adds=20anchor?= =?UTF-8?q?=20links?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 18 ++++++++++++++++-- docs/index.html | 14 ++++++++++++++ package.json | 2 +- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 361faaa..384e44c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Derekstrap -An SCSS base layout and styles library by Evans Hunt. +A base styles and scss utility library by Evans Hunt. ## Requirements @@ -17,7 +17,7 @@ Resources: yarn add @evanshunt/derekstrap; ``` -# Development +## Development If making any javascript changes, a `yarn build` needs to be run before commit. To install the included pre-commit hook, run the following from the project root: @@ -26,6 +26,12 @@ cp pre-commit.sh .git/hooks/pre-commit chmod +x .git/hooks/pre-commit ``` +### Demo + +The demo page is a self contained static site. It is bundled using the same `yarn build` command. It can be previewed locally by running `docker-compose up` from within the `/docs` directory. + +The [live version of the demo site](https://evanshunt.github.io/derekstrap/) is generated by GitHub Pages. + ## Usage ### With @import @@ -87,6 +93,8 @@ The best reference for these modules is likely to read the source code directly. ### Breakpoints +[See the Demo](https://evanshunt.github.io/derekstrap/#breakpoints). + The breakpoints module consists of both SCSS and JS pieces. The SCSS piece consistes of two parts. The first is a set of variables that doesn't do much on it's own, but it is used by other modules to configure responsive sizing, and by the JS piece to enable JS conditions and triggers tied to the same SCSS breakpoints. The breakpoints module assumes a mobile first design pattern; it is used to generate `min-width` media queries. You can override and individual breakpoint by configuring the variable for that breakpoint @@ -203,6 +211,8 @@ Note that the event emitter is debounced. It will not fire until 50ms have passe ### Card Pattern +[See the Demo](https://evanshunt.github.io/derekstrap/#cards). + The card pattern module includes a mixin to quickly generate a common card layout pattern using flexbox. It sets the size and margins of both parent and child elements and allows passing breakpoint maps for arguments to create a responsive layout. If you pass more than one breakpoint map as an argument, ensure they contain the exact same breakpoints and that all included breakpoints have been configured in the $breakpointList variable. ### Example Usage @@ -315,6 +325,8 @@ background-position: center; ### Proportional Text +[See the Demo](https://evanshunt.github.io/derekstrap/#proportional-text). + _This module is no longer enabled by default, as it produces [accessibility issues](https://gist.github.com/ChrissiQ/c1df2e455e7912700f7d06497f11bde5)_ This module sets the base sizing of text relative to viewport, with resets at each breakpoint defined and configured with the [Breakpoints](#Breakpoints) module. This allows layouts to behave more consistently with fewer odd issues caused by line wrapping. The breakpoint resets ensure the text does not huge on large screens. @@ -354,6 +366,8 @@ This will result in markup like the following: ### Spacing +[See the Demo](https://evanshunt.github.io/derekstrap/#spacing). + The spacing module is a set of mixins for defining the whitespace around a block. It is intended to allow consistency across blocks, and for flexibility allows use of `padding`, `margin` or `left`/`right`/`top`/`bottom` attributes to create the whitespace. By default the mixins will apply to both top and bottom or both left and right, and will use the `padding` attribute, but this can be configured with optional arguments. To standardize spacing across blocks it will be useful to define your own variable map of spacing using the same breakpoint names as used with the [Breakpoints](#Breakpoints) module. diff --git a/docs/index.html b/docs/index.html index df8d226..ad4f396 100644 --- a/docs/index.html +++ b/docs/index.html @@ -14,6 +14,20 @@
diff --git a/package.json b/package.json index dedcaf1..f4bce48 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@evanshunt/derekstrap", "version": "0.3.4", - "description": "A base layout and styles library by Evans Hunt", + "description": "A base styles and scss utility library by Evans Hunt", "main": "dist/main.js", "sass": "_index.scss", "style": "_index.scss", From 980923d91e0f20e10deba0cd519bfefe4a0297e7 Mon Sep 17 00:00:00 2001 From: David Toews Date: Thu, 22 Dec 2022 12:05:42 -0700 Subject: [PATCH 41/41] =?UTF-8?q?=F0=9F=94=96=20=20(version,=20docs)=20bum?= =?UTF-8?q?ps=20version,=20adds=20link=20to=20kitchen=20sink?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 092cbd8..58e2b6f 100644 --- a/README.md +++ b/README.md @@ -431,6 +431,8 @@ The attribute can also be switched in any given call to the function by passing This module applies text style defaults and provides a system for setting the defaults via configuration variables. It is the only portion of Derekstrap which generates css by default without opting in or calling funtions. +You can preview the default text styles on [this HTML5 Kitchen Sink demo page](https://evanshunt.github.io/derekstrap/kitchen-sink.html) + A configuration variable is available to opt-out of these styles. ```scss diff --git a/package.json b/package.json index f4bce48..ab934c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@evanshunt/derekstrap", - "version": "0.3.4", + "version": "1.0.0", "description": "A base styles and scss utility library by Evans Hunt", "main": "dist/main.js", "sass": "_index.scss",