✨ (scss, docs, demo) adds Responsive Properties feature, v1.0.1

evanshunt · Jan 3, 2023 · 6a28e8c · 6a28e8c
1 parent f5a627a
commit 6a28e8c
Show file tree

Hide file tree

Showing 19 changed files with 179 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -77,6 +77,7 @@ SubModules
 * [Map Slice](#map-slice)
 * [Proportional Box](#proportional-box)
 * [Proportional Text](#proportional-text)
+* [Responsive Properties](#responsive-properties)
 * [setUserAgent.js](#setuseragentjs)
 * [Spacing](#spacing)
 * [Text Sizing](#text-sizing)
@@ -280,18 +281,85 @@ In most cases it will be sufficient to import this module in your stylesheets wi
 @use '~@evanshunt/derekstrap/proportional-text';
 ```
 
+### Responsive Properties
+
+This module provides a mixin to allow setting one or more css properties at multiple breakpoints with a shorthand syntax. 
+
+#### Example usage
+
+For a single CSS property.
+
+```scss
+@use '~@evanshunt/derekstrap';
+
+.colored-text {
+    @include derekstrap.responsive-properties(
+        'color',
+        (
+            'base': darkred,
+            'phone-large': chocolate,
+            'tablet': darkgoldenrod,
+            'desktop': green,
+            'desktop-large': navy,
+            'desktop-extra-large': purple
+        )
+    );
+}
+```
+
+For multiple CSS Properties 
+
+```scss
+@use '~@evanshunt/derekstrap';
+
+h1 {
+    @include derekstrap.responsive-properties(
+        (
+            'font-size',
+            'margin-bottom'
+        ),
+        (
+            'base': (
+                2rem,
+                1rem
+            ),
+            'phone-large': (
+                2.5rem,
+                1rem
+            ),
+            'tablet': (
+                3rem,
+                1rem
+            ),
+            'desktop': (
+                4rem,
+                1.5rem
+            ),
+            'desktop-large': (
+                5rem,
+                2rem
+            ),
+            'desktop-extra-large': (
+                6rem,
+                3rem
+            ),
+        )
+    );
+}
+```
+
 ### setUserAgent.js
 
 When Derekstrap is imported and initialized it runs [setUserAgent.js](src/setUserAgent.js) which appends the browser user agent string to a `data-user-agent` attribute `html` element.
 
-```
+```scss
 import { Derekstrap} from '@evanshunt/derekstrap';
 Derekstrap.init();
 ```
 
 This will result in markup like the following:
 
-```
+```html
 <html lang="en" data-useragent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15">
 ```
 
@@ -303,7 +371,7 @@ To standardize spacing across blocks it will be useful to define your own variab
 
 #### Basic example usage
 
-```
+```scss
 @use '~@evanshunt/derekstrap';
 
 $regular-margins: (
@@ -330,7 +398,7 @@ $section-spacing: (
 
 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.
 
-```
+```scss
 .content-block {
     @include derekstrap.horizontal-spacing($regular-margins, 'left');
     @include derekstrap.vertical-spacing($section-spacing, 'top');
@@ -609,3 +677,4 @@ blockquote {
     derekstrap.responsive-font-sizing($blockquote-sizes);
 }
 ```
+### @Todo: Document Utility module
diff --git a/_index.scss b/_index.scss
@@ -6,5 +6,6 @@
 @forward 'scss/proportional-box/index';
 @forward 'scss/text-defaults/index'; // must come before proportional text
 @forward 'scss/proportional-text/index';
+@forward 'scss/responsive-properties/index';
 @forward 'scss/spacing/index';
 @forward 'scss/utility/index';
diff --git a/docs/demo.scss b/docs/demo.scss
@@ -7,6 +7,7 @@
 @use 'scss/breakpoints';
 @use 'scss/cards';
 @use 'scss/proportional-text';
+@use 'scss/responsive-properties';
 @use 'scss/spacing';
 
 header#header,

diff --git a/docs/dist/demo.js b/docs/dist/demo.js
diff --git a/docs/index.html b/docs/index.html
@@ -21,6 +21,8 @@ <h1>Derekstrap Demo</h1>
             |
             <a href="#proportional-text">Proportional Text</a>
             |
+            <a href="#responsive-properties">Responsive Properties</a>
+            |
             <a href="#spacing">Spacing</a>
             <hr>
             See the <a href="https://github.com/evanshunt/derekstrap/#derekstrap">full documentation on GitHub</a>
@@ -33,8 +35,8 @@ <h1>Derekstrap Demo</h1>
         <section>
             <div id="breakpoints">
                 <h2>Breakpoints</h2>
-                <p>The colour of this text changes depending on screen size.</p>
-                <p>The largest current breakpoint is: <code id="currentBreakpoint"></code></p>
+                <p>The colours of this section change depending on screen size.</p>
+                <p>The largest current breakpoint is: <code id="jsCurrentBreakpoint"></code></p>
             </div>
             <h3>scss</h3>
             <pre><code class="language-scss" data-src="scss/breakpoints.scss"></code></pre>
@@ -79,6 +81,15 @@ <h3>Auto scaling by view width</h3>
             <pre><code class="language-scss" data-src="scss/proportional-text.scss"></code></pre>
         </section>
         <hr>
+        <section>
+            <div id="responsive-properties">
+                <h2>Responsive properties</h2>
+                <p>This example produces the same result as the <a href="#breakpoints">Breakpoints</a> example but with more concise syntax.</p>
+                <p>The colour of this text changes depending on screen size.</p>
+            </div>
+            <pre><code class="language-scss" data-src="scss/responsive-properties.scss"></code></pre>
+        </section>
+        <hr>
         <section>
             <div id="spacing">
                 <h2>Spacing</h2>

diff --git a/docs/js/breakpoints.js b/docs/js/breakpoints.js
@@ -6,7 +6,7 @@ import { Breakpoints } from '../../src/index';
 
 Breakpoints.init(breakpointList);
 
-const currentBreakpoint = document.querySelector('#currentBreakpoint');
+const currentBreakpoint = document.querySelector('#jsCurrentBreakpoint');
 
 if (currentBreakpoint) {
     currentBreakpoint.innerHTML = Breakpoints.getCurrent();

diff --git a/docs/scss/breakpoints.scss b/docs/scss/breakpoints.scss
@@ -4,24 +4,30 @@
 
 #breakpoints {
     color: darkred;
+    background-color: mistyrose;
 
     @include derekstrap.breakpoint('phone-large') {
         color: chocolate;
+        background-color: papayawhip;
     }
 
     @include derekstrap.breakpoint('tablet') {
-        color: goldenrod;
+        color: darkgoldenrod;
+        background-color: ivory;
     }
 
     @include derekstrap.breakpoint('desktop') {
         color: green;
+        background-color: mintcream;
     }
 
     @include derekstrap.breakpoint('desktop-large') {
         color: navy;
+        background-color: aliceblue;
     }
 
     @include derekstrap.breakpoint('desktop-extra-large') {
         color: purple;
+        background-color: lavenderblush;
     }
 }
diff --git a/docs/scss/responsive-properties.scss b/docs/scss/responsive-properties.scss
@@ -0,0 +1,17 @@
+// In your project, write
+// @use '~@evanshunt/derekstrap';
+@use '../../index' as derekstrap;
+
+#responsive-properties {
+
+    $colors: (
+        'base': (darkred, mistyrose),
+        'phone-large': (chocolate, papayawhip),
+        'tablet': (darkgoldenrod, ivory),
+        'desktop': (green, mintcream),
+        'desktop-large': (navy, aliceblue),
+        'desktop-extra-large': (purple, lavenderblush),
+    );
+
+    @include derekstrap.responsive-properties(('color', 'background-color'), $colors);
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@evanshunt/derekstrap",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A base styles and scss utility library by Evans Hunt",
   "main": "dist/main.js",
   "sass": "_index.scss",

diff --git a/scss/card-pattern/_mixins.scss b/scss/card-pattern/_mixins.scss
@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../breakpoints/index' as *;
 
+//@todo: document arguments
 @mixin card-pattern($child-selector, $columns, $gutter: 0, $row-space: 0, $inner-property: 'margin') {
     padding: 0;
     display: flex;
@@ -20,6 +21,7 @@
     }
 }
 
+//@todo: document arguments
 @mixin card-pattern-responsive($sizes, $child-selector, $columns, $gutter, $row-space, $inner-property) {
     @each $breakpoint, $size in $sizes {
         $bp-columns: $columns;
@@ -52,6 +54,7 @@
     }
 }
 
+//@todo: document arguments
 @mixin card-layout($child-selector, $columns, $gutter, $row-space, $inner-property) {
     @if (meta.type-of($columns) == 'null') {
         @error "$columns undefined. Ensure all maps passed as arguments contain the same breakpoints.";

diff --git a/scss/map-math/_functions.scss b/scss/map-math/_functions.scss
@@ -1,5 +1,7 @@
 @use "~sass-map-magic" as sass-map-magic;
 
+// For documentation see: https: //github.com/davejtoews/sass-map-magic
+
 // This function no longer needs to be in this module, but keeping it here as an alias for now
 @function map-multiply($value1, $value2, $calc: false) {
     @return sass-map-magic.multiply($value1, $value2, $calc);

diff --git a/scss/map-slice/_functions.scss b/scss/map-slice/_functions.scss
@@ -1,5 +1,7 @@
 @use "~sass-map-magic" as sass-map-magic;
 
+// For documentation see: https: //github.com/davejtoews/sass-map-magic
+
 // This function no longer needs to be in this module, but keeping it here as an alias for now
 @function map-slice($map, $start-key, $finish-key) {
     @return sass-map-magic.slice($map, $start-key, $finish-key);

diff --git a/scss/proportional-text/_functions.scss b/scss/proportional-text/_functions.scss
@@ -1,5 +1,6 @@
 @use "sass:math";
 
+//@todo: document arguments
 @function proportional-text($font-size, $viewport-size) {
   @return math.div($font-size*100, $viewport-size)+vw;
 }
diff --git a/scss/responsive-properties/_index.scss b/scss/responsive-properties/_index.scss
@@ -0,0 +1 @@
+@forward "mixins";
diff --git a/scss/responsive-properties/_mixins.scss b/scss/responsive-properties/_mixins.scss
@@ -0,0 +1,49 @@
+@use '../breakpoints/index' as *;
+@use 'sass:meta';
+@use 'sass:list';
+
+
+// Allows assigning values at multiple breakpoints to any arbitrary css property
+/// 
+/// @param {string | list} $properties
+///     Css property, or list of css properties
+/// @param {map} $sizes
+///     A breakpoint map with the values of the given proprety assigned to a list of 
+///     breakpoints w/in the master breakpoint list. The "base" breakpoint is assigned
+///     without a media query. If the properties value is a list, the value assigned 
+///     to each breakpoint should be a list the exact lengths as the properties, with
+///     corresponding values
+
+@mixin responsive-properties($properties, $sizes) {
+
+    @if meta.type-of($properties) == 'list' {
+        @for $i from 1 through list.length($properties) {
+            $property: list.nth($properties, $i );
+
+            @each $breakpoint, $values in $sizes {
+                @if list.length($values) != list.length($properties) {
+                    @error "List for breakpoint #{breakpoint} does not have the same number of items as the properties list.";
+                }
+
+                @if $breakpoint == 'base' {
+                    #{$property}: list.nth($values, $i);
+                } @else {
+                    @include breakpoint($breakpoint) {
+                        #{$property}: list.nth($values, $i);
+                    }
+                }
+            }
+        }
+
+    } @else {
+        @each $breakpoint, $value in $sizes {
+            @if $breakpoint == 'base' {
+                #{$properties}: $value;
+            } @else {
+                @include breakpoint($breakpoint) {
+                    #{$properties}: $value;
+                }
+            }
+        }
+    }
+}
diff --git a/scss/spacing/_mixins.scss b/scss/spacing/_mixins.scss
@@ -4,6 +4,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+//@todo: replace "attribute" w/ "property"
 
 /// Applies horizontal whitespace
 /// 

diff --git a/scss/text-defaults/_functions.scss b/scss/text-defaults/_functions.scss
@@ -2,6 +2,7 @@
 
 // The default value of 16px assumes $base-font-size has not been overriden
 // and this is applied outside of any other em context.
+//@todo: document arguments
 @function em-calc($size, $base-size: 16px) {
     $emSize: math.div($size, $base-size);
     @return #{$emSize}em;

diff --git a/scss/text-defaults/_mixins.scss b/scss/text-defaults/_mixins.scss
@@ -1,6 +1,7 @@
 @use '~sass-rem/rem' as rem;
 @use '../breakpoints/index' as *;
 
+//@todo: document arguments
 @mixin responsive-font-sizing($sizes) {
     @each $breakpoint, $size in $sizes {
         @if $breakpoint == 'base' {

diff --git a/webpack.config.js b/webpack.config.js
@@ -39,4 +39,7 @@ module.exports = {
             }
         ]
     },
+    stats: {
+        loggingDebug: ["sass-loader"],
+    },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,4 +39,7 @@ module.exports = { @@
                 }
             ]
         },
+        stats: {
+            loggingDebug: ["sass-loader"],
+        },
     };