Merge pull request #103 from belsman/feature/responsive-utils-width

feat: add responsive percentage ratio to the utils module
vcl · Oct 15, 2023 · d580e63 · d580e63
2 parents 70a3462 + 4101466
commit d580e63
Show file tree

Hide file tree

Showing 17 changed files with 729 additions and 215 deletions.
diff --git a/docgen/vcl.github.io/styles.css b/docgen/vcl.github.io/styles.css
diff --git a/packages/vcl/breakpoints/README.md b/packages/vcl/breakpoints/README.md
@@ -6,18 +6,31 @@ Descriptive breakpoints for responsive adaptation of components.
 
 The following ranges of viewport widths are defined:
 
-- up to 599px: extra small (mobile phone form factor)
-- 600 to 1023px: medium (tablets and narrow screen computers)
-- 1024px to 1439px: medium (tablets and narrow screen computers)
-- 1440px to 1919px: large screens
-- greater than 1920px: hi-res screens
+- up to 575px: extra small (mobile phone form factor)
+- 576 to 991px: medium (tablets and narrow screen computers)
+- 992x to 1199px: large screens
+- 1200px to 1399px: extra large screens
+- greater than 1400px: hi-res screens
 
 ## Usage
 
 Warning: Try to prevent responsive components as much as you can,
 [see why](https://vcl.github.io/#responsive-css-via-media-queries).
 
 ```css
-@media (max-width: @bp-xs-max)
-  /* mobile phone styles */
+@media (max-width: @bp-xs-max); /* mobile phone styles */
+```
+
+## Variables
+
+- `$breakpoints` - Breakpoints take the following form:
+  ```
+  $breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+  );
 ```
diff --git a/packages/vcl/breakpoints/index.scss b/packages/vcl/breakpoints/index.scss
@@ -1,9 +1,3 @@
-@use "../theme.scss" as *;
+@use '../theme.scss' as *;
 
-$breakpoints: (
-  "xs": 0px,
-  "sm": 600px,
-  "md": 1024px,
-  "lg": 1440px,
-  "xl": 1920px
-);
+$breakpoints: $breakpoints;
diff --git a/packages/vcl/flex-grid/README.md b/packages/vcl/flex-grid/README.md
@@ -37,6 +37,11 @@ Check the breakpoints section for more details.
 
 [responsive example](/demo/example-responsive.html)
 
+Utilize the percentage based width classes of the [sizing utils](#utils): ```w-{bp}-{per}p``` and ```w-{bp}-gca``` and ```w-{bp}-gcb```
+to size the flex items.
+
+[responsive percentage based example](/demo/example-percentage-based-width.html)
+
 Use `grid-gutter-1` to `grid-gutter-5` classes to space out grid cells.
 Warning: Gutters apply negative margins to the container element and positive paddings to the children. Take this into account when you are setting background colors or adding other padding/margins.
 

diff --git a/packages/vcl/flex-grid/demo/example-percentage-based-width.html b/packages/vcl/flex-grid/demo/example-percentage-based-width.html
@@ -0,0 +1,32 @@
+<code>row</code>
+<div class="container demo">
+  <div class="row">
+    <div class="w-33p"><div class="democontent">.w-33p</div></div>
+    <div class="w-33p"><div class="democontent">.w-33p</div></div>
+    <div class="w-33p"><div class="democontent">.w-33p</div></div>
+  </div>
+</div>
+
+<span>responsive percentage based width</span>
+<div class="container demo">
+  <div class="row">
+    <div class="w-100p w-lg-60p">
+      <div class="democontent">.w-100p .w-lg-60p</div>
+    </div>
+    <div class="w-100p w-lg-40p">
+      <div class="democontent">.w-100p .w-lg-40p</div>
+    </div>
+  </div>
+</div>
+
+<span>responsive width with golden cut</span>
+<div class="container demo">
+  <div class="row">
+    <div class="w-100p w-lg-gca">
+      <div class="democontent">.w-100p .w-lg-gca</div>
+    </div>
+    <div class="w-100p w-lg-gcb">
+      <div class="democontent">.w-100p .w-lg-gcb</div>
+    </div>
+  </div>
+</div>
diff --git a/packages/vcl/flex-grid/flex-grid-cells.scss b/packages/vcl/flex-grid/flex-grid-cells.scss
@@ -1,6 +1,6 @@
 @use "sass:math";
 @use "../theme.scss" as *;
-@use "../breakpoints.scss" as *;
+@use "../breakpoints.scss";
 
 $cells: 12;
 

diff --git a/packages/vcl/layer/demo.scss b/packages/vcl/layer/demo.scss
@@ -1,4 +1,3 @@
-@use "../breakpoints.scss" as *;
 @use "../button.scss" as *;
 @use "../flex-grid.scss";
 @use "../icogram.scss" as *;

diff --git a/packages/vcl/mixins/index.scss b/packages/vcl/mixins/index.scss
@@ -1 +1,2 @@
-@forward "./clearfix.scss";
+@forward './clearfix.scss';
+@forward './percent-based-size.scss';
diff --git a/packages/vcl/mixins/percent-based-size.scss b/packages/vcl/mixins/percent-based-size.scss
@@ -0,0 +1,33 @@
+@use 'sass:math';
+
+@mixin percent-based-height-step5($suffix) {
+  @if $suffix {
+    $suffix: '-' + $suffix;
+  } @else {
+    $suffix: '';
+  }
+
+  @for $i from 1 through 20 {
+    $per: $i * 5;
+
+    .h#{$suffix}-#{$per}p {
+      height: math.percentage(math.div($per, 100));
+    }
+  }
+}
+
+@mixin percent-based-width-step5($suffix) {
+  @if $suffix {
+    $suffix: '-' + $suffix;
+  } @else {
+    $suffix: '';
+  }
+
+  @for $i from 1 through 20 {
+    $per: $i * 5;
+
+    .w#{$suffix}-#{$per}p {
+      width: math.percentage(math.div($per, 100));
+    }
+  }
+}
diff --git a/packages/vcl/product-list/demo.scss b/packages/vcl/product-list/demo.scss
@@ -1,4 +1,3 @@
-@use "../breakpoints.scss" as *;
 @use "../button.scss" as *;
 @use "../form.scss" as *;
 @use "../form-control-group.scss" as *;

diff --git a/packages/vcl/theme/CHANGELOG.md b/packages/vcl/theme/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
+# [1.0.0-alpha.3](https://github.com/vcl/vcl/compare/v0.7.0-alpha.3...v1.0.0-alpha.2) (2020-01-17)
+
+
+### Features
+
+* **theme:** add breakpoint variable ([490b7e5](https://github.com/vcl/vcl/commit/490b7e549d7445d27c8832d00560436e35f71511))
+
+
+
+<!-- $breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default; -->
+
 # [1.0.0-alpha.2](https://github.com/vcl/vcl/compare/v0.7.0-alpha.3...v1.0.0-alpha.2) (2020-01-17)
 
 

diff --git a/packages/vcl/theme/theme.scss b/packages/vcl/theme/theme.scss
@@ -20,6 +20,15 @@ $space: (
   "5": 48px,
 ) !default;
 
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
 /* Focus Outline Colors */
 $focus-outline-default-shadow-color: rgba(
   $emphasized-medium-color,

diff --git a/packages/vcl/utils/CHANGELOG.md b/packages/vcl/utils/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
+
+# [1.0.0-alpha.3](https://github.com/vcl/vcl/compare/v0.6.0-5...v0.6.0-7) (2023-10-13)
+
+
+### Features
+
+* **utils:** add responsive width sizing classes ([cd87261](https://github.com/vcl/vcl/commit/cd87261))
+
 # [1.0.0-alpha.2](https://github.com/vcl/vcl/compare/v0.7.0-alpha.3...v1.0.0-alpha.2) (2020-01-17)
 
 

diff --git a/packages/vcl/utils/README.md b/packages/vcl/utils/README.md
@@ -93,9 +93,12 @@ width and height of a container.
 - `w-90p`
 - `w-95p`
 - `w-100p`
+- `w-{bp}-{per}p` Where bp is the breakpoint and per is the percentage For responsive width on sm, md, xl, xxl
 - `w-auto`
 - `w-gca`: Golden cut a
 - `w-gcb`: Golden cut b
+- `w-{bp}-gca`: Breaking point version for golden cut 'A'. Where bp is the breakpoint
+- `w-{bp}-gcb`: Breaking point version for golden cut 'B'. Where bp is the breakpoint
 - `max-w-100p`: max-width: 100%
 - `h-5p`
 - `h-10p`

diff --git a/packages/vcl/utils/demo/example-sizing.html b/packages/vcl/utils/demo/example-sizing.html
@@ -20,12 +20,24 @@
   <div class="w-50p">50% width</div>
 </div>
 
+<code>Responsive width</code>
+<div class="demoSizingContainer row">
+  <div class="w-100p w-md-50p">100% xs and 50% md</div>
+  <div class="w-100p w-md-50p">100% xs and 50% md</div>
+</div>
+
 <code>row</code>
 <div class="demoSizingContainer row">
   <div class="w-gca">gca</div>
   <div class="w-gcb">gcb</div>
 </div>
 
+<p>Responsive golden cut example: applies golden cut at large screen</p>
+<div class="demoSizingContainer row">
+  <div class="w-100p w-lg-gca">w-100p w-lg-gca</div>
+  <div class="w-100p w-lg-gcb">w-100p w-lg-gcb</div>
+</div>
+
 <div class="demoSizingContainer">
   <div class="h-25p">25% height</div>
 </div>
@@ -44,22 +56,18 @@
 
 <div class="demoSizingContainer">
   <div class="max-w-100p scrollable x">
-    <div class="demoSizingVeryWide">
-      100% max-width
-    </div>
+    <div class="demoSizingVeryWide">100% max-width</div>
   </div>
 </div>
 
 <div class="demoSizingContainer">
   <div class="max-h-100p scrollable y">
-    <div class="demoSizingVeryHigh">
-        100% max-height
-    </div>
+    <div class="demoSizingVeryHigh">100% max-height</div>
   </div>
 </div>
 
 <code>col</code>
 <div class="demoSizingContainer col">
   <div class="h-50p">50% height</div>
   <div class="h-50p">50% height</div>
-</div>
+</div>