EWF responsive grid strategy

[wgross]

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

Adding Bootstrap to EWF UI - problems

That comparison reinforces what we were thinking: Skeleton and Susy are probably great tools but in terms of adoption and stability, Bootstrap and Foundation are in front (Susy is not on the list - Skeleton is one dude and according to its own web site hasn’t had many updates recently, Foundation seems to get a major upgrade ever year).

Notice that Foundation uses ems for media queries as well as font size. Bootstrap uses pixel media queries.

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.

[samrueby]

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.

[wgross]

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.

[samrueby]

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”.

[wgross]

@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:

A Complete Guide to Flexbox | CSS-Tricks

http://philipwalton.github.io/solved-by-flexbox/

[samrueby]

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.