[Layout] Components: Column and stack

[aweell]

Layout components

Proposal for the following layout components:

• Row
• Column
• Stack

The structure and different applied properties can be found in the live demo:

https://codepen.io/AlexBueno/project/editor/ZoERKd

---

Row & Column

Row

Name	Type	Default	Description
gutter	string	"none"	Spacing between stacked elements
align	string	-	Align columns in the cross axis
justify	string	-	Align columns in the main axis
wrap	boolean	"true"	Wrap elements preventing overflow
reverse	boolean	"false"	Change the flex-direction of the row to reverse

gutter prop

Fig - Examples of some values of the gutter prop

The gutter uses the gap property to indicate the spacing between elements in a stack.

$gutter: (
  "none": --spacing-0,
  "xxsmall": --spacing-2,
  "xsmall": --spacing-4,
  "small": --spacing-8,
  "medium": --spacing-12,
  "large": --spacing-16,
  "xlarge": --spacing-24,
  "xxlarge": --spacing-32
);

align prop

Fig - Row with align prop to baseline

Align the columns inside a row across the cross axis. The values of the CSS property align-items allowed are:

$align: (
"start": flex-start,
"end": flex-end,
"center": center,
"baseline": baseline,
"stretch": stretch
);

justify prop

Fig - Examples of the space-between, space-evenly and space-around values of justify prop.

Use the CSS justify-content values to justify the content inside of a row.

$justify: (
	"center":center, 
	"space-between":space-between, 
	"space-evenly": space-evenly,
	"space-around": space-around,
	"start": flex-start, 
	"end": flex-end
);

reverse prop

Fig - Example of a row with a normal direction and a reverse direction.

Change the flex-direction of the row to row-reverse

---

Column

Name	Type	Default	Description
basis	string	"content" *	Initial length of the column
grow	string	"0"	Spacing between stacked elements
order	number	-	Change the order of the column
width	string	-	Change the width of the column

(*) The default value for flex-basis is content when using grow to change the size of the columns, if we decide to use based-8 column width, the default should be set to auto.

basis prop

Fig - Different values of the basis prop

When wrapping if has flex-grow: 1+, the basis value (small, medium, large) will indicate when the wrap happens.

$basis: (
"auto": auto,
"content": content,
"small": 24ch,
"medium": 48ch,
"large": 64ch
);

width prop

Fig - Different column sizes using the 8 columns layout.

The width prop changes the width of the columns based on an 8 columns grid layout. The proposed values are 1/8, 2/8, 3/8, 4/8, 5/8, 6/8, 7/8, 8/8.

$width: (
	"1": 12.5%,
	"2": 25%,
	"3": 37.5%,
	"4": 50%,
	"5": 62.5%,
	"6": 75%,
	"7": 87.5%,
	"8": 100%,
);

---

Stack

Component proposed props:

Name	Type	Default	Description
gutter	string	"none"	Spacing between stacked elements
divider	boolean	"false"	Add a divider between stacked elements
align	string	"start"	Align stacked elements in the horizontal axis
as	string	"div"	Set the component to a different HTML tag

gutter prop

The gutter uses the gap property to indicate the spacing between elements in a stack.

$gutter: (
  "none": --spacing-0,
  "xxsmall": --spacing-2,
  "xsmall": --spacing-4,
  "small": --spacing-8,
  "medium": --spacing-12,
  "large": --spacing-16,
  "xlarge": --spacing-24,
  "xxlarge": --spacing-32
);

divider prop

Fig - Divider with a gutter: "large".

• The value of the padding-bottom of the divider container should be calc(gutter / 2)
• The gutter defined is divided by half calc(gutter / 2)

align prop

$align: (
"start": flex-start,
"end": flex-end,
"center": center,
"baseline": baseline
);

as prop

Set the HTML tag of the component to the following:

• <div>: default value
• <ul>: set the stack as an unordered list
• <ol>: set the stack as an ordered list

Padding and bleed

I see these properties as transversal across the 3 components. Both padding and bleed have the same variables, and the bleed prop is based on the negation of the padding values as margin (bleed = calc(var($padding-value) * -1);)

Fig. - Example of a stack with a padding="large" and an element with a bleed="large"

$padding / $bleed: (
  "xxsmall": --spacing-4,
  "xsmall": --spacing-8,
  "small": --spacing-12,
  "medium": --spacing-16,
  "large": --spacing-24,
  "xlarge": --spacing-32,
  "xxlarge": --spacing-48
);

References

• Rainbow Design System Cheat Sheet
• Arcade design system
• Lens design system
• Braid design system
• Wanda design system
• Layout primitives for React