<div dir="ltr">Hi Soumya, <div><br></div><div>Patternfly relies on Bootstrap grid system, which is based on floats.</div><div><br></div><div>Until we move to bootstrap 4 we will not have a flexbox grid. <span style="font-size:12.8px">I'll probably have more info about when and how this upgrade is going to happen in the next few days.</span></div><div><div><br></div><div><div>Thanks</div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Fri, Sep 23, 2016 at 7:08 AM, Soumya Deb <span dir="ltr"><<a href="mailto:deb@redhat.com" target="_blank">deb@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div><div><div>FWIW, as a clarification, the Tendrl frontend team wanted to avoid floating grids, and use flexbox based layouts.<br></div>It has nothing to do with the spec-non-solidified grid layout - that's out of the picture.<br><br></div>Our app is mostly targeted for modern browsers, although a clear boundary hasn't been drawn yet (as Ju mentioned).<br><br></div>We do want to use patternfly for all the features it brings, but not having flexbox layouts are only concern against it.<br><div><br></div></div><div><div><div class="gmail_extra"><br><div class="gmail_quote">On 22 September 2016 at 21:00, Ju Lim <span dir="ltr"><<a href="mailto:julim@redhat.com" target="_blank">julim@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Thanks Andres for getting back to the Tendrl UI Dev team (CCed).  The Tendrl team is still exploring different options, so your feedback is timely.<br><div><br></div><div>Serena -- We don't know yet which browsers we'll support yet as the Tendrl Support Matrix is still being decided.  We'll let you know once it gets known.</div><div><br></div><div>Thanks again,</div><div>Ju</div></div><div class="gmail_extra"><div><div><br><div class="gmail_quote">On Thu, Sep 22, 2016 at 8:15 AM, Andres Galante <span dir="ltr"><<a href="mailto:agalante@redhat.com" target="_blank">agalante@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Hi Ju,<br><br>I am sure the <span style="font-size:12.8px">Tendrl is confused. </span><div><br></div><div>Flexbox is a CSS property that provides the ability to  arrange elements in the page. [1]</div><div><br></div><div>Grid layout, is a new spec, still a draft on the W3C and with almost no adoption on browsers. [2]</div><div><br></div><div>Semantic UI framework uses flexbox to build their grid system. Since boostrap 3 was born before flexbox, then its grid its based on floats.</div><div><br></div><div>Bootstrap 4 has an option to use flexbox and we will use it when we migrate to 4 on the next steps of patternfly. As for when, I don't know, but I'll have more info after this week.</div><div><br></div><div>Its important to notice that BS4 is an alpha so anything can change.</div><div><br></div><div>Can they use flexfox now? the answer of source its "it depends". Flexbox support is pretty good at the moment but if they want to support older browser the wont be able to use it [3]</div><div><br></div><div>My recommendation is for them to use bootstrap grid system, its works good with floats and when patternfly moves to Bootstrap 4 the migration of the grid would be almost transparent.</div><div><br></div><div>That is a good question though, we are living a huge change on layouts with flexbox and CSS grid layout, exiting times for CSS and the web!</div><div><div><br></div><div>[1] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" target="_blank">https://developer.mozilla.org/<wbr>en-US/docs/Web/CSS/CSS_Flexibl<wbr>e_Box_Layout/Using_CSS_flexibl<wbr>e_boxes</a><br></div></div><div>[2] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" target="_blank">https://developer.mozilla.org/<wbr>en-US/docs/Web/CSS/CSS_Grid_La<wbr>yout</a><br></div><div>[3] <a href="http://caniuse.com/#feat=flexbox" target="_blank">http://caniuse.com/#feat=flexb<wbr>ox</a></div><div><br></div></div><div><div><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Sep 21, 2016 at 3:46 PM, Serena Doyle <span dir="ltr"><<a href="mailto:sdoyle@redhat.com" target="_blank">sdoyle@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Ju, <div><br></div><div>Do you know what browsers RH Storage will be supporting ?</div><div><br></div><div>Thanks,</div><div>- Serena</div></div><div class="gmail_extra"><br><div class="gmail_quote"><div><div>On Wed, Sep 21, 2016 at 2:18 PM, Ju Lim <span dir="ltr"><<a href="mailto:julim@redhat.com" target="_blank">julim@redhat.com</a>></span> wrote:<br></div></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div><div><div dir="ltr"><div><div dir="ltr"><div><span><font face="arial, helvetica, sans-serif"><div><font color="#434343"><span style="line-height:33.12px;white-space:pre-wrap">PF Team:</span></font></div></font><br>The Tendrl (downstream product name is Red Hat Storage Console) project UI Development team has a request to the PatternFly team to ask if we've considered the including/implementing</span><span style="font-family:arial,helvetica,sans-serif;line-height:1.38;color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"> </span><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" style="font-family:arial,helvetica,sans-serif;line-height:1.38;text-decoration-line:none;text-decoration-style:initial;text-decoration-color:initial;background-color:transparent" target="_blank"><span style="color:rgb(240,98,146);text-decoration-line:underline;text-decoration-style:initial;text-decoration-color:initial;vertical-align:baseline;white-space:pre-wrap;background-color:transparent">flexbox</span></a><span style="font-family:arial,helvetica,sans-serif;line-height:1.38;color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"> (</span><span style="font-family:arial,helvetica,sans-serif;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap;background-color:transparent">similar to </span><a href="http://semantic-ui.com/introduction/getting-started.html" style="font-family:arial,helvetica,sans-serif;line-height:25.76px;text-decoration-line:none;text-decoration-style:initial;text-decoration-color:initial" target="_blank"><span style="color:rgb(0,0,0);text-decoration-line:underline;text-decoration-style:initial;text-decoration-color:initial;vertical-align:baseline;white-space:pre-wrap;background-color:transparent">Semantic UI</span></a><span style="font-family:arial,helvetica,sans-serif;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap;background-color:transparent">)</span><span style="font-family:arial,helvetica,sans-serif;color:rgb(42,57,144);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"> </span><span style="font-family:arial,helvetica,sans-serif;color:rgb(67,67,67);line-height:1.38;white-space:pre-wrap;background-color:transparent">instead of using a grid layout.</span><span><font face="arial, helvetica, sans-serif"></font><font face="arial, helvetica, sans-serif"><div><span style="white-space:pre-wrap;line-height:1.38;color:rgb(67,67,67);background-color:transparent"><br></span></div><div><span style="white-space:pre-wrap;line-height:1.38;color:rgb(67,67,67);background-color:transparent">The reasons are as follow:</span></div></font></span><font face="arial, helvetica, sans-serif"><span style="color:rgb(67,67,67);line-height:1.38;white-space:pre-wrap;background-color:transparent"><ul><li><span style="line-height:1.38;background-color:transparent">Flexbox is content driven model. It does not need to know the content upfront.</span><br></li><li><span style="line-height:1.38;vertical-align:baseline;background-color:transparent">Contents can be </span><span style="line-height:1.38;text-decoration-line:underline;text-decoration-style:initial;text-decoration-color:initial;color:rgb(240,98,146);vertical-align:baseline;background-color:transparent"><a href="https://drafts.csswg.org/css-flexbox/#order-accessibility" style="line-height:1.38;text-decoration-line:none;text-decoration-style:initial;text-decoration-color:initial;background-color:transparent" target="_blank">redistributed</a>.</span></li><li><span style="line-height:normal;vertical-align:baseline;background-color:transparent">Allow boxes to </span><a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property" style="line-height:normal;text-decoration-line:none;text-decoration-style:initial;text-decoration-color:initial" target="_blank"><span style="color:rgb(240,98,146);text-decoration-line:underline;text-decoration-style:initial;text-decoration-color:initial;vertical-align:baseline;background-color:transparent">wrap</span></a><span style="line-height:normal;vertical-align:baseline;background-color:transparent"> which is really handy for responsive design.</span></li></ul></span></font></div><div><span><span style="color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><font face="arial, helvetica, sans-serif">Alternatively, if there are other options that the PatternFly community is considering, can you please provide some guidance and roadmap for the feature (if possible).  </font></span></span></div><div><span><span style="color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><font face="arial, helvetica, sans-serif"><br></font></span></span></div><div><span><span style="color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><font face="arial, helvetica, sans-serif">Thoughts?  </font></span></span><span style="color:rgb(67,67,67);font-family:arial,helvetica,sans-serif;white-space:pre-wrap;background-color:transparent">Please advise.</span></div><div><span><span style="color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><font face="arial, helvetica, sans-serif"><br></font></span></span></div><div><span><span style="color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><font face="arial, helvetica, sans-serif">Thank you,</font></span></span></div><div><span><span style="color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><font face="arial, helvetica, sans-serif">Ju</font></span></span></div><div><span><span style="color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><font face="arial, helvetica, sans-serif"><br></font></span></span></div><div><span><span style="font-size:18.6667px;font-family:roboto;color:rgb(67,67,67);vertical-align:baseline;white-space:pre-wrap;background-color:transparent"><br></span></span></div></div></div>
</div>
<br></div></div>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><span><font color="#888888"><br><br clear="all"><div><br></div>-- <br><div><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><div style="color:rgb(0,0,0)">- Serena Chechile Doyle</div><div style="color:rgb(0,0,0)"><i>UXD | Unified Management Experience</i></div><div style="color:rgb(0,0,0)"><b style="color:rgb(0,0,173);font-family:"trebuchet ms",sans-serif;font-size:11px">Red Hat</b></div><div style="color:rgb(0,0,0);font-family:"trebuchet ms",sans-serif"><span style="font-size:11px"><b style="color:rgb(0,0,173)">Cell</b><span style="color:rgb(0,0,173)"> </span><a href="tel:508-769-7715" value="+15087697715" style="color:rgb(17,85,204)" target="_blank">508-769-7715</a> | <b style="color:rgb(0,0,173)">IRC</b> - serena | <b style="color:rgb(0,0,173)">Skype</b> - serenamarie125 </span><span style="font-size:11px">| </span><b style="font-size:11px;color:rgb(0,0,173)">Twitter</b><span style="font-size:11px"> - @serenamarie125</span></div></div></div></div></div></div></div>
</font></span></div>
<br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><br></div>
</div></div></blockquote></div><br><br clear="all"><div><br></div></div></div><span><font color="#888888">-- <br><div><div dir="ltr">Ju Lim<div>Red Hat</div><div>Office: <a href="tel:978-399-0422" value="+19783990422" target="_blank">978-399-0422</a></div><div>Mobile: <a href="tel:781-507-1323" value="+17815071323" target="_blank">781-507-1323</a></div><div>Email: <a href="mailto:julim@redhat.com" target="_blank">julim@redhat.com</a></div><div>IRC: julim</div><div><br></div></div></div>
</font></span></div>
</blockquote></div><br></div>
</div></div></blockquote></div><br></div></div></div>