triniwiz / nativescript-mason

Apache License 2.0
11 stars 3 forks source link

Release Alpha.0 #10

Open triniwiz opened 1 year ago

triniwiz commented 1 year ago
ammarahm-ed commented 1 year ago

Many names for the layout have been suggested. I am going to list them here.

<Flex/>
<Grid/>
<Container/>

I would suggest creating 3 base elements for layout. Flex, Grid & Container. The Container can be styled as both grid/flex as needed while Flex & Grid follow their respective layouts. This will give a clear understanding of layout at a glance.

However Container is usually used as something that wraps your app/screen. So <Flex/> & <Grid/> alone do great. https://theme-ui.com/components/flex https://theme-ui.com/components/grid Druid also uses Flex as a layout primitive.

With taffy's roadmap mentioning support for more layout algorithms in future, it makes sense to think of this more broadly. For example Morphorm layout has three base node, Row, Column and Grid

<Row/>
<Column/>

This can in future fit well with the above, Flex, Grid, Container combo where Grid can be switched between css/morphorm grid.

With TableLayout

<Table/>

And

<HStack/>
<VStack/>
<ZStack/>

#

<Box/>

This is also a great option. Short & Concise. Already used by many web UI libraries in their design systems. However it's function varies from what we want here. For example https://theme-ui.com/components/box defined box as Use the Box component as a layout primitive to add margin, padding, and colors to content..

<DivLayout/>

If we want to stick to the nativescript way of naming layouts, this seems most suitable I think.

<div/>

Since mason & taffy both want to follow the web specification for flex & grid, just calling it a div is another great option.

And here's a list of other name suggestions that were discussed upon:

<TriniDiv/>
<Layout/>
<FlexLayout/>
<Section/>
<DiView/>
<MasonView/>
<Block/>
<Structure/>
<StyledView/>
<LayoutView/>
<FlexView/>
<GridView/>
<Mason/>
<NSDiv/>
triniwiz commented 1 year ago

These look pretty sweet

<Flex/>
<Grid/>
<Container/>
ammarahm-ed commented 1 year ago

Tests WIP here: https://github.com/herefishyfish/nativescript-mason