Hi,
now I'll cover a bit about new Jewel Grid and GridCell components.
* Grid is a container that has GridCells.Grid uses GridLayout and GridCell
uses GridCellLayout.
* You can use those layouts with other component like a Group if you want,
but maybe is not worth it.
* Grid and GridCell proxies layout values to reduce mxml syntax
* Grid is the implementation of a Responsive layout:
* Grid takes 100% of the avaiable size by default, since is what this
kind of component use to do
* Resizing browsers makes cells adapt its size and positioning
accordingly to the properties you set up
* We have different "break points" : Phone, Tablet, Desktop and
WideScreen
* The implementation is "mobile-first" so resizing to "phone" width
make the cells resize and reposition to layout with phone rules,
resizing to tablet size make all repositioning again and so to desktop and
widscreen.
About GAP in Grids: Here gap is a boolean true or false. The motivation is
that making all style combinations will increase the style sheet in 500%
so this seems not a good way to go. And maybe most of those styles will
never be used. We can explore add/remove styles needed at runtime to make
this more flexible.
So now gap="true" introduces a gap between cells and false makes cells
doesn't have any space between
Grid Example: For a grid with 4 cells we can use this code:
<j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="4"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
<html:Div text="4"/>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="4"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
<html:Div text="4"/>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="4"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
<html:Div text="4"/>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="4"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
<html:Div text="4"/>
</j:GridCell>
</j:Grid>
a cell has 6 possible numeric vars to express fractions, it should go in
pairs. i.e: desktopNumerator and desktopDenominator. The example posted
will represent 4 columns in desktop, then 2 columns in tablets (each column
with 2 cell one above the other) and in phone will have 1 column with the 4
cells stacked.
We have 12 columns defined (this can change in SASS to generate other
number of columns 5? 12? 24?... and you have the Grid var counterpart in
AS3 code.
Some examples (I'll upload this example soon to repo)
https://snag.gy/NnX8FY.jpg (desktop without gap)
https://snag.gy/hCV8K5.jpg. (desktop with gap)
https://snag.gy/MOieqA.jpg. (phone)
https://snag.gy/0XF1Kz.jpg. (tablet)
--
Carlos Rovira
http://about.me/carlosrovira
