Merge branch 'release/v5.6.0'

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## 5.6.0 - 25-may-2022
+
+Update `o-layout` with:
+
+- native inline gaps, no more nasty margin hacks!
+- align-inline-between, generate equal space between items
+- block/inline specific gap classes
+
 ## 5.5.1 - 16-may-2022
 
 - Added `button`, `input`, `select` & `textarea` to margin in `_reset.scss`

objects/layout/README.md

@@ -20,16 +20,16 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
 
 - Configurable with custom properties.
 - Fluid layout.
-- Intelligent cell wrapping.
-- Evenly fill cell spacing.
+- Intelligent item wrapping.
+- Evenly fill item spacing.
 - Equal height columns.
-- Horizontal/vertical centering of cells.
-- Cell width is controlled independently of layout gap.
+- Horizontal/vertical centering of items.
+- Item width is controlled independently of layout gap.
 - Infinite nesting.
 
 ## Use
 
-A simple layout is easy to create. A layout container can have any number of child cells. When used with `.o-layout--fill` space is evenly distributed without need for `--colspan` or sizing utilities.
+A simple layout is easy to create. A layout container can have any number of child items. When used with `.o-layout--fill` space is evenly distributed without need for `--colspan` or sizing utilities.
 
 ```html
 <div class="o-layout o-layout--fill o-layout--gap-base">
@@ -46,7 +46,7 @@ For more granular control over layout make use of modifiers, custom properties o
 
 ```html
 <div
- class="o-layout [o-layout--align-inline-center | o-layout--align-inline-end | o-layout--align-block-center | o-layout--align-block-end | o-layout--fill | o-layout--fit | o-layout--stretch | o-layout--gap-base]"
+ class="o-layout [ o-layout--align-inline-center | o-layout--align-inline-end | o-layout--align-inline-between | o-layout--align-block-center | o-layout--align-block-end | o-layout--fill | o-layout--fit | o-layout--stretch | o-layout--gap-base | o-layout--gap-block-base | o-layout--gap-inline-base ]"
 >
  <div><!-- content --></div>
  <div><!-- content --></div>
@@ -61,7 +61,7 @@ For more granular control over layout make use of modifiers, custom properties o
 <div class="o-layout">
  <div class="o-layout__fit">Fit to content</div>
  <div class="o-layout__fill">Take up remaining space</div>
- <div class="o-layout__align-inline-center">Center align a single cell</div>
+ <div class="o-layout__align-inline-center">Center align a single item</div>
 </div>
 ```
 
@@ -136,39 +136,30 @@ When you set queries in `$fill-in-query` or `$fit-in-query` you can use them lik
 </div>
 ```
 
-### If anything in the above fails
-
-By default, the cell styling is applied to the direct child. If for any reason that doesn't work, wrap the direct child in an `o-layout__cell` and apply the `o-layout__[fit|fill], u-colspan, u-offset, etc.` logic there. Stuff should start working.
-
-```html
-<div class="o-layout">
- <div class="o-layout__cell u-colspan-8 u-offset-4">// your component</div>
- <div class="o-layout__cell">// your component</div>
-</div>
-```
-
 ## Available classes
 
 **On the `.o-layout` block**
 
 - `.o-layout`: core layout block
-- `.o-layout--align-inline-center`: center align _all_ layout cells over the inline axis
-- `.o-layout--align-inline-end`: align all layout cells to the end of the inline axis
-- `.o-layout--align-block-center`: center-align layout cells on the block axis
-- `.o-layout--align-block-end`: end-align layout cells on the block axis
-- `.o-layout--reverse`: reverse all cells in order
-- `.o-layout--fill`: evenly distribute space amongst all child cells
-- `.o-layout--fit`: fit all cells to their content
-- `.o-layout--stretch`: All cells match the size of tallest cell in a row on the block axis
-- `.o-layout--gap-[SPACE]`: adds a base gutter between cells
+- `.o-layout--align-inline-center`: center align _all_ layout items over the inline axis
+- `.o-layout--align-inline-end`: align all layout items to the end of the inline axis
+- `.o-layout--align-inline-between`: align layout items by creating an even space between them on the inline axis
+- `.o-layout--align-block-center`: center-align layout items on the block axis
+- `.o-layout--align-block-end`: end-align layout items on the block axis
+- `.o-layout--reverse`: reverse all items in order
+- `.o-layout--fill`: evenly distribute space amongst all child items
+- `.o-layout--fit`: fit all items to their content
+- `.o-layout--stretch`: All items match the size of tallest item in a row on the block axis
+- `.o-layout--gap-[SPACE]`: Adds a base gutter between items
+- `.o-layout--gap-block-[SPACE]`: Adds a gutter between items only on the block-axis
+- `.o-layout--gap-inline-[SPACE]`: Adds a gutter between items only on the inline-axis
 
 **On the flex item**
 
-- `.o-layout__align-inline-center`: Center one cell on the inline axis
-- `.o-layout__fit`: Make a cell shrink wrap its content
-- `.o-layout__fill`: Make a cell fill the remaining space.
+- `.o-layout__align-inline-center`: Center one item on the inline axis
+- `.o-layout__fit`: Make a item shrink wrap its content
+- `.o-layout__fill`: Make a item fill the remaining space.
 - `.o-layout__[fit|fill]@[QUERY-NAME]`: applies `fit` or `fill` at the given media query. (available in `$[fit|fill]-in-query` SCSS setting)
-- `.o-layout__cell`: Wrap the child component to fix some super specific bugs. Only use this when all of the above somehow not works.
 
 ## Configurable variables
 
@@ -179,13 +170,13 @@ There are multiple ways to configure the layout object. The Custom properties ar
 **On the `.o-layout` block**
 
 - `--columns`: The number of columns you want to have, defaults to `12`
-- `--gap`: The width of the gutter applied between the cells, defaults to `0`
+- `--gap`: The width of the gutter applied between the items, defaults to `0`
 - `--layout-gap`: Actual gap variable to be used when in conflict with other objects, defaults to `var(--gap)`.
 
 **On the flex item element**
 
-- `--colspan`: The amount of columns this cell will span, defaults to `--columns`
-- `--offset`: The amount of columns this cell will offset, defaults to `0`
+- `--colspan`: The amount of columns this item will span, defaults to `--columns`
+- `--offset`: The amount of columns this item will offset, defaults to `0`
 
 ### SCSS variables
 

objects/layout/_index.scss

@@ -47,7 +47,7 @@ $selector: '> *';
  align-items: flex-start;
  padding: 0; /* [1] */
  row-gap: var(--layout-block-gap);
- margin-inline-start: calc(-1 * var(--layout-inline-gap)); /* [1,2] */
+ column-gap: var(--layout-inline-gap);
  list-style: none; /* [1] */
 
  /**
@@ -59,108 +59,104 @@ $selector: '> *';
  * 2. Fix issue where elements with overflow extend past the
  * item's container. As per:
  * http:https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
- * 3. Calculate the offset + the layout gap
- * 4. We need to reset our margins if the direct child is `o-layout__cell`
- * but our gap variables need to be available. So we map our variables to
- * internal variables.
+ * 3. To fix the "percentage-based flex-basis & gap" based issues we need to
+ * set a max-width with a ratio to negate the `gap`.
+ * 4. Calculate offset
  */
  #{$selector} {
  --colspan: var(--columns);
  --offset: 0;
- --layout-igi: var(--layout-inline-gap); /* [4] */
  flex-basis: calc(
- (100% / var(--columns) * var(--colspan)) - var(--layout-igi)
+ (100% / var(--columns) * var(--colspan)) - var(--layout-inline-gap)
  ); /* [1] */
+ flex-grow: 1;
  min-inline-size: 0; /* [2] */
- margin-inline-start: calc(
- 100% / var(--columns) * var(--offset) + var(--layout-igi)
+ // stylelint-disable
+ max-inline-size: calc(
+ (100% / var(--columns) * var(--colspan)) - var(--layout-inline-gap) *
+ (100 - 100 / var(--columns) * var(--colspan)) / 100
  ); /* [3] */
+ // stylelint-enable
+ margin-inline-start: calc(100% / var(--columns) * var(--offset)); /* [4] */
  }
 }
 
 /**
  * Modifier: inline-center
- * center align all layout cells over the inline axis
+ * center align all layout items over the inline axis
  */
 .o-layout--align-inline-center {
  justify-content: center;
 }
 
 /**
  * Modifier: align-inline-end
- * align all layout cells to the end of the inline axis
+ * align all layout items to the end of the inline axis
  */
 .o-layout--align-inline-end {
  justify-content: flex-end;
 }
 
+/**
+ * Modifier: align-inline-between
+ * align layout items by creating an even space between
+ */
+.o-layout--align-inline-between {
+ justify-content: space-between;
+}
+
 /**
  * Modifier: align-block-center
- * center-align layout cells on the block axis
+ * center-align layout items on the block axis
  */
 .o-layout--align-block-center {
  align-items: center;
 }
 
 /**
  * Modifier: align-block-end
- * end-align layout cells on the block axis
+ * end-align layout items on the block axis
  */
 .o-layout--align-block-end {
  align-items: flex-end;
 }
 
 /**
  * Modifier: stretch
- * All cells match the size of tallest cell in a row
+ * All items match the size of tallest item in a row
  */
 .o-layout--stretch {
  align-items: stretch;
 }
 
 /**
  * Modifier: reverse
- * reverse all cells
+ * reverse all items
  */
 .o-layout--reverse {
  flex-direction: row-reverse;
 }
 
-/**
- * Element: cell
- * Only use cell wrapper element when everything else fails 😅
- */
-.o-layout__cell {
- --layout-igi: 0px; // stylelint-disable-line
- padding-inline-start: var(--layout-inline-gap);
-
- // Old way to stretch inner items
- .o-layout--stretch > & {
- display: flex;
-
- #{$selector} {
- inline-size: 100%; /* [1] */
- }
- }
-}
-
 /**
  * Modifier: fill
- * allow cells to equal distribute width
+ * allow items to equal distribute width
  */
 .o-layout--fill {
  #{$selector} {
  flex: 1;
+ max-inline-size: none;
  }
 }
 
 /**
  * Modifier: fit
- * fit all cells to their content
+ * fit all items to their content
  */
 .o-layout--fit {
  #{$selector} {
  flex-basis: auto;
+ flex-grow: 0;
+ max-inline-size: none;
  }
 }
 
@@ -173,20 +169,28 @@ $selector: '> *';
  }
 }
 
-/* --------------------------------------------------------------------------
- Elements
-/ --------------------------------------------------------------------------- */
+/**
+ * Modifier: gap-block-X
+ */
+@each $gap in variables.$gaps {
+ .o-layout--gap-block-#{$gap} {
+ --layout-block-gap: #{space.get($gap)};
+ }
+}
 
 /**
- * Element: fit
- * Make an item shrink wrap its content.
+ * Modifier: gap-inline-X
  */
-.o-layout__fit {
- @include responsive.in-query(variables.$fit-in-query) {
- flex-basis: auto;
+@each $gap in variables.$gaps {
+ .o-layout--gap-inline-#{$gap} {
+ --layout-inline-gap: #{space.get($gap)};
  }
 }
 
+/* --------------------------------------------------------------------------
+ Elements
+/ --------------------------------------------------------------------------- */
+
 /**
  * Element: fill
  * Make an item fill the remaining space.
@@ -198,6 +202,19 @@ $selector: '> *';
  @include responsive.in-query(variables.$fill-in-query) {
  flex: auto;
  inline-size: 0%; /* [1] */
+ max-inline-size: none;
+ }
+}
+
+/**
+ * Element: fit
+ * Make an item shrink wrap its content.
+ */
+.o-layout__fit {
+ @include responsive.in-query(variables.$fit-in-query) {
+ flex-basis: auto;
+ flex-grow: 0;
+ max-inline-size: none;
  }
 }