search

ryanve / flexboxes

CSS flexbox framework with pure flexbox grid ability
https://ryanve.github.io/flexboxes
BSD Zero Clause License
31 stars 4 forks source link

Media Queries #18

Open mbrowne opened 7 years ago

mbrowne commented 7 years ago

Interesting library. Is there any plan to add additional media queries for different device sizes, in addition to the current portrait and landscape ones that don't specify device size?

ryanve commented 7 years ago

Thanks @mbrowne yes. I've been considering something with increments in em units because these are ideal for media queries. I'd like to avoid breakpoint variables because I think in a large codebase if someone updates the breakpoints it would have a high chance of breaking some layouts. I'd want to support both width and height media queries. What do you think about something like this? What would be most useful? Can you think of a way to make this more succinct but still intuitive?

<example class="flex@min-width-40em flex@min-height-30em">
mbrowne commented 7 years ago

Thanks. I'm not sure I follow regarding breakpoint variables...the variables are based on groups of device sizes, which shouldn't change much if at all. Sure, new phone and tablet sizes will be released in the future but they should fall into an existing group. Personally I've found Bootstrap's groupings to be reasonable (including the new one in Bootstrap 4, max 575px for portrait phones)...I'm sure a similar approach could be taken with em units. If you hard-code media query widths in your CSS classes, that's basically targeting specific devices...in that case perhaps it would be clearer just to have classes for specific devices, e.g. max-width-iphone-6s (not that I'm recommending that).

One of the things I like about what you have already is the classes for portrait and landscape. Sometimes I've had the need to write some CSS specific to landscape phones, for example. But I don't know if you were planning to combine orientation with max-width or min-width.

Another consideration - and this is a little off-topic - is that browser support for CSS grid layout is increasing; see https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid. So while I'm considering flexbox libraries like this one for my next project, I'm also considering the possibility of using grid layout wirh @supports fallbacks for flexbox. If I go that route then I guess this library wouldn't really be applicable for me anymore, but I'm currently undecided. Just thought I'd mention this as a consideration for the future in case it influences your design in any way, but of course serving as a fallback for grid layout shouldn't be the main objective of a flexbox library.

On July 30, 2017 4:38:41 PM EDT, Ryan Van Etten notifications@github.com wrote:

Thanks @mbrowne yes. I've been considering something with increments in em units because these are ideal for media queries. I'd like to avoid breakpoint variables because I think in a large codebase if someone updates the breakpoints it would have a high chance of breaking some layouts. I'd want to support both width and height media queries. What do you think about something like this? What would be most useful? Can you think of a way to make this more succinct but still intuitive?

<example class="flex@min-width-40em flex@min-height-30em">

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/ryanve/flexboxes/issues/18#issuecomment-318927916

-- Sent from my Android device with K-9 Mail.

ryanve commented 7 years ago

Thanks—great input. Actually something like class="flex@no-grid" was something I considered too for use with fallbacks. I've been wanting to develop a grid library too.