My idea is add a new set of CSS classes that that can can be used to specify that an item uses a specific flex based layout. The base (2nd naming level) of these flex based layout class corresponds to the four possible flex-direction values. The CSS in these classes should also include the contents of the existing display-flex CSS class (1st naming level) for simplification.
Existing
Style Classes: display-flex flex-direction-column
To
Style Classes: flex-column
Raw CSS:
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
These two level based flexbox layout class names should be extended to include a set that has a 3rd naming level attribute that correspond to the nine possible relative item positions.
Existing
Style Classes: display-flex flex-direction-column flex-justify-content-flex-end flex-align-items-center
To
Style Classes: flex-column-bottom-center
Raw CSS:
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:end;
-ms-flex-pack:end;
justify-content:flex-end;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
The CSS class name sets suggested in this Idea are very developer friendly in their usage, rememberability, readability, and overall simplification of the flexbox layout via the introduction of 40 new CSS class names.
If the existing OutSystems UI CSS flexbox positioning classes are made flex-direction aware, the existing OutSystems UI classes could be used as is by using by using specifying two or three OutSystems UI classes class names.
The overall size of the OutSystems UI could also be reduced in size by using CSS parameters for for the flex-direction, justify-content, and align-items attribute values and incorporate these CSS variables into the existing OutSystems UI component CSS blocks.