EWF responsive grid strategy

Continuing the discussion from Adding Bootstrap to EWF UI - problems:

I was thinking through this tonight, and here’s the essence of the Bootstrap/Foundation/etc. responsive grids:

For each “cell”, use a floating div instead of an HTML table cell, because divs automatically wrap.

Everything else flows from that. Each div needs to have an explicitly specified width (in %). The frameworks use a fixed number of columns (12) so that there can be a finite number of CSS classes that define width (e.g. col-md-1, col-xs-6). They have predefined screen size ranges (xs, sm, md, and lg for Bootstrap) that correspond to the media queries that they’re using.

Now that I understand this, I think EWF should just use some of these techniques itself instead of bringing in a whole framework like Bootstrap or Foundation. Here’s what we’d have to do to make FormItemList responsive without changing its interface at all:

  • Generate one in-page CSS rule for each calculated width percentage used on the page
  • Use it from all of the FormItemList “cell” divs that need that width
  • Make EwfPage responsible for receiving all the widths from the various FormItemList objects on the page, and outputting the in-page CSS rules
  • Use a media query to double or triple the percentage widths for small screens

That’s pretty much it. I also observed that Bootstrap, Foundation, etc. use a “mobile-first” approach, meaning that the base CSS rules are all designed for tiny screens, and media queries are used for larger screens. I think EWF should use a “tablet-first” or “desktop-first” approach and make phones the exception rather than the rule.

1 Like

I was about to point a link to this blog post: http://www.html5rocks.com/en/mobile/responsivedesign/#toc-style-mobilefirst about designing styles-mobile first, but it looks like you already got it.

Yeah, I understand the mobile-first idea, but I just feel like large-screen-first would be a better approach for EWF based on the kinds of systems we’re using it for.

That doesn’t make sense to me. It doesn’t matter what the primary devices that are using it are. It’s a matter of supporting mobile or not.

Unless you’re saying that, by going large-screen-first we’ll be saving a ton of effort that isn’t necessarily worth it and more like “icing on the cake”.

@samrueby, you mentioned CSS flexbox to me and I think it was a terrific find. If we’re ok with not supporting old versions of IE, we can use it and completely bypass the Bootstrap/Foundation/etc. responsive grid techniques. Furthermore, it looks like flexbox took the same approach to columns as we did in FormItemList: they let you use whatever number of “units” you want. It also seems to support the vertical centering that we need. This is exciting!

Check these pages out:

1 Like

I think pretty soon we can stop caring about old versions of IE: many important websites are removing support for it and we will too when we move to jQuery 2.x. Hopefully Microsoft finally killing-off support for XP will completely push the older versions of IE away.