horizontal-not-left-right
: Use horizontal
propertyWhen positioning elements on a web page, it is common to use the left
and
right
properties to specify their horizontal placement. However, if both
values are the same, it is more efficient to use the horizontal
property
instead.
horizontal
property is a shorthand for specifying both the left
and
right
properties with a single value.-- ftd.text: Hello World
padding-left.px: 20
padding-right.px: 20
;; or
-- ftd.text: Hello World
margin-left.px: 20
margin-right.px: 20
-- ftd.text: Hello World
padding-horizontal.px: 20
;; or
-- ftd.text: Hello World
margin-horizontal.px: 20
vertical-not-top-bottom
: Use vertical
propertyWhen positioning elements on a web page, it is common to use the top
and
bottom
properties to specify their horizontal placement. However, if both
values are the same, it is more efficient to use the horizontal
property
instead.
horizontal
property is a shorthand for specifying both the top
and
bottom
properties with a single value.-- ftd.text: Hello World
padding-top.px: 20
padding-bottom.px: 20
;; or
-- ftd.text: Hello World
margin-top.px: 20
margin-bottom.px: 20
-- ftd.text: Hello World
padding-vertical.px: 20
;; or
-- ftd.text: Hello World
margin-vertical.px: 20
optimize-container-props
: Applying properties to container with consistent child values-- ftd.column:
-- ftd.text: Hello
align-self: center
-- ftd.text: World
align-self: center
--end: ftd.column
-- ftd.column:
align-content: center
-- ftd.text: Hello
-- ftd.text: World
--end: ftd.column
alignment-in-container
: Best-practice for aligning items within the containerIn general, it is not recommended to apply the same value of align-content to both the flex container and its child elements because it can lead to unexpected behavior. If the same value is applied to both, the child elements may not align properly within the container.
However, if different values of `align-content are applied to the container and its child elements, then the property should be applied to the child elements to control their alignment.-- ftd.column:
align-content: center
-- ftd.text: Hello
align-self: start
-- ftd.text: World
align-self: center
-- end: ftd.column
-- ftd.column:
align-content: center
-- ftd.text: Hello
align-self: start
-- ftd.text: World
-- end: ftd.column
parent-propagation
: Propagating Child Properties to Parent Containers-- ftd.column:
-- ftd.text: Hello World
color: $inherited.colors.text
role: $inherited.types.copy-regular
-- ftd.text: Hello Multiverse
color: $inherited.colors.text
role: $inherited.types.copy-regular
-- end: ftd.column
-- ftd.column:
color: $inherited.colors.text
role: $inherited.types.copy-regular
-- ftd.text: Hello World
-- ftd.text: Hello Multiverse
-- end: ftd.column