Hi Piotr, MDL is more easy and direct but you get less possibilities. I really didn't invent anything just saw many css frameworks out there and take ideas here and there to implement what I liked more.
One thing to notice is all the possibilities in all those framework are pre calculated, this is good and bad. Good because is more easy and people need to be in some kind of "skeleton" and don't put more or less pixels out of that bounding box. Bad because you have less freedom. My opinion is that this limitation is the perfect point of equilibrium. But we need to see though experience if what I put in place is enough or we need more things or adjust what the current things. For example, regarding Gaps, I remember I changed from the current way (selectors that multiply by 3) and go to completely pixel freedom...is something to see what fits better. El jue., 3 ene. 2019 a las 14:26, Piotr Zarzycki (<[email protected]>) escribió: > Carlos, > > I understand now, so I will test your solution. I was using Grid in MDL, > but there wasn't two properties to configure one column - there was one, so > it was for me more clear than in Jewel Grid. > > Thank you for help! > Piotr > > czw., 3 sty 2019 o 14:19 Carlos Rovira <[email protected]> > napisał(a): > > > Hi Piotr, > > > > Jewel Grid implements a flex grid column layout based on columns. > > By default is configured to 12 columns (check _layout.sass) > > > > $grid-columns: 12 !default > > > > you can change this to other value, but doing that will need to change as > > well GridCellLayout MAX_COLUMNS > > > > public static const MAX_COLUMNS:Number = 12; > > > > normally columns in this kind of systems use to be 12 and 24 > > > > Then you should have into account that all works with "numerators" / > > "denominators" > > > > Since Grid is about responsiveness you hace 4 sizes : Phone, Tablet, > > Desktop and WideScreen > > > > each one has its own set of numerator / denominator (i.e: for phones: > > phoneNumerator/phoneDenominator) > > > > In this way the interface will adapt automatically to the sizes you set > up. > > > > So regarding your question, can we size to percentages? I think not, you > > can setup to the closes "grid" column config for example 9/12 and 3/12 > for > > example: > > > > <j:Grid gap="true"> > > <j:GridCell desktopNumerator="9" desktopDenominator="12" > > tabletNumerator="9" tabletDenominator="12" > > phoneNumerator="9" phoneDenominator="12"> > > <html:Div className="box" text="XXX"/> > > </j:GridCell> > > <j:GridCell desktopNumerator="3" desktopDenominator="12" > > tabletNumerator="3" tabletDenominator="12" > > phoneNumerator="3" phoneDenominator="12"> > > <html:Div className="box" text="YYY"/> > > </j:GridCell> > > </j:Grid> > > > > This will make all sizes (phone/tablet/desktop) be 9/12 of the width for > > first column and 3/12 of the width for second column (and use gap) > > > > HTH > > > > Carlos > > > > > > > > El jue., 3 ene. 2019 a las 12:40, Piotr Zarzycki (< > > [email protected]>) > > escribió: > > > > > I initially send that question off list, but it looks like it fits > > > perfectly here :) > > > > > > czw., 3 sty 2019 o 12:38 Piotr Zarzycki <[email protected]> > > > napisał(a): > > > > > > > Hi Carlos, > > > > > > > > If you think that I should post it on the list let me know. However I > > > have > > > > a question regarding Grid. I would like to use grid where I have two > > > > GridCell. > > > > 1. GridCell - Taking 80% of the screen > > > > 2. GridCell - Taking 20% of the screen > > > > > > > > They are displayed one after another. I really cannot achieve that > and > > > I'm > > > > wondering whether it is limitation of that component ? > > > > > > > > <j:Grid gap="true" itemsVerticalAlign="itemsTop"> > > > > <j:GridCell desktopNumerator="1" desktopDenominator="2" > > > > tabletNumerator="1" tabletDenominator="2" > > > > phoneNumerator="1" phoneDenominator="2"> > > > > <!--Some content--> > > > > </j:GridCell> > > > > <j:GridCell desktopNumerator="1" desktopDenominator="5" > > > > tabletNumerator="1" tabletDenominator="5" > > > > phoneNumerator="1" phoneDenominator="5"> > > > > <!--Some content--> > > > > </j:GridCell> > > > > </j:Grid> > > > > > > > > In above code first GridCell have 100% of the screen and second one > > have > > > > 20%. > > > > > > > > Do you think it's impossible ? > > > > > > > > Thanks, > > > > -- > > > > > > > > Piotr Zarzycki > > > > > > > > Patreon: *https://www.patreon.com/piotrzarzycki > > > > <https://www.patreon.com/piotrzarzycki>* > > > > > > > > > > > > > -- > > > > > > Piotr Zarzycki > > > > > > Patreon: *https://www.patreon.com/piotrzarzycki > > > <https://www.patreon.com/piotrzarzycki>* > > > > > > > > > -- > > Carlos Rovira > > http://about.me/carlosrovira > > > > > -- > > Piotr Zarzycki > > Patreon: *https://www.patreon.com/piotrzarzycki > <https://www.patreon.com/piotrzarzycki>* > -- Carlos Rovira http://about.me/carlosrovira
