Change Details

**TBD - WIP (draft)** Topic: Discussion about naming and implementing the missing flex mixins. This is a proposed version. === Common CSS rule mapping pattern - `flex-grow: 2` -> `.flex-grow( 2 )` - `display: flex` -> `.display( flex )` === Mixins missin from the core: ==== Basic flex properties - `.flex-size( @grow: 0, @shrink: 1, @base-size: auto, @direction: row )` (.flex() is taken) - `.flex-grow( @grow )` - `.flex-order( @order )` ===== Shorthand for efficiency - `.display-flex(), .display-flex( inline )` ===== Mixin following the common pattern - `.display( flex ), .display( flex-inline )` ==== Deprecate old mixins that don't follow the CSS rule mapping: - `.flex( @grow: 1, @shrink: 1, @width: auto, @order: 1 )` - `@grow`'s default is different from the initial `0` value in the specification - `@order`'s default is different from the initial `0` value - `@order` is an orthogonal concern to the `flow` rule. - `.flex-display( @display: flex )` - Too long, inconsistent with the CSS rule mapping: ==== Implement mediawiki.mixins.flex-align.less: - `.align-items( @value: normal )` - `.align-content( @value: normal )` - `.justify-content( @value: normal )` - Flex layout ignores `justify-items`, not necessary until we start using grid layout.

**TBD - WIP (draft)** Topic: Discussion about naming and implementing the missing flex mixins. This is a proposed version. === Common CSS rule mapping pattern - `flex-grow: 2` -> `.flex-grow( 2 )` - `display: flex` -> `.display( flex )` === Mixins missin from the core ===== Mixin following the common pattern - `.display( flex ), .display( flex-inline )` ===== Shorthand for efficiency - `.display-flex(), .display-flex( inline )` ==== Basic flex properties - `.flex-size( @grow: 0, @shrink: 1, @base-size: auto, @direction: row )` (.flex() is taken) - `.flex-grow( @grow )` - `.flex-shrink( @shrink )` (not necessary so far) - `.flex-order( @order )` (.flex-* prefix for namespacing and consistency) ==== Implement align and justify mixins - `.align-items( @value: normal )` - `.align-content( @value: normal )` - `.justify-content( @value: normal )` - Flex layout ignores `justify-items`, not necessary until we start using grid layout. Separate file: `mediawiki.mixins.flex-align.less` Mapping to 2009 flexbox property values makes it complex and longer. === Deprecate old mixins that don't follow the common pattern - `.flex( @grow: 1, @shrink: 1, @width: auto, @order: 1 )` - `@grow`'s default is different from the initial `0` value in the specification - `@order`'s default is different from the initial `0` value - `@order` is an orthogonal concern to the `flow` rule. - `.flex-display( @display: flex )` - Too long, inconsistent with the CSS rule mapping:

**TBD - WIP (draft)** Topic: Discussion about naming and implementing the missing flex mixins. This is a proposed version. === Common CSS rule mapping pattern - `flex-grow: 2` -> `.flex-grow( 2 )` - `display: flex` -> `.display( flex )` === Mixins missin from the core: ===== Mixin following the common pattern - `.display( flex ), .display( flex-inline )` ===== Shorthand for efficiency - `.display-flex(), .display-flex( inline )` ==== Basic flex properties - `.flex-size( @grow: 0, @shrink: 1, @base-size: auto, @direction: row )` (.flex() is taken) - `.flex-grow( @grow )` - `.flex-order( @order )`shrink( @shrink )` (not necessary so far) ===== Shorthand- `.flex-order( @order )` (.flex-* prefix for efficiencynamespacing and consistency) ==== Implement align and justify mixins - `.display-flex(), .display-flex( inline )`align-items( @value: normal )` ===== Mixin following the common pattern- `.align-content( @value: normal )` - `.display( flex )justify-content( @value: normal )` - Flex layout ignores `justify-items`, .display( flex-inline )` =not necessary until we start using grid layout. Separate file: `mediawiki.mixins.flex-align.less` Mapping to 2009 flexbox property values makes it complex and longer. === Deprecate old mixins that don't follow the CSS rule mapping:common pattern - `.flex( @grow: 1, @shrink: 1, @width: auto, @order: 1 )` - `@grow`'s default is different from the initial `0` value in the specification - `@order`'s default is different from the initial `0` value - `@order` is an orthogonal concern to the `flow` rule. - `.flex-display( @display: flex )` - Too long, inconsistent with the CSS rule mapping: ==== Implement mediawiki.mixins.flex-align.less: - `.align-items( @value: normal )` - `.align-content( @value: normal )` - `.justify-content( @value: normal )` - Flex layout ignores `justify-items`, not necessary until we start using grid layout.