On a first glance it seems straight forward: just a list of inline elements. But at PatternFly we are designers and we take spaces and alignment very seriously.
That’s the tricky part: How to build an (almost) pixel perfect component that’s robust enough to accommodate any amount of content, have different variations, keep vertical alignment and that can fit any scenario?
First you need a very robust HTML structure. You could say that List View has two more divs than it should, but I just couldn’t think of a lighter solution considering that PatternFly uses a fluid grid and we can’t predict the amount of information this structure will contain.
And to style it the answer is, of course,
The future is today!
Do I hear someone shouting “What about IE9 and 10 users?” well, I am glad you’ve asked.
flexbox can be combined with
floats. A browser that supports
flexbox will ignore the
width statement. And IE9 will just be unable to read
flex and use the
IE10 uses the old syntax of
flexbox and it doesn’t understand any align propriety:
align-self limiting vertical alignment.
An easier option to add “old school” flexbox without worrying about it, is using Autoprefixer.
Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed.
All you have to do is add it to your asset building tool (Grunt, for instance) and you can totally forget about CSS vendor prefixes hell.
If IE9 and 10 users are critical for your app, you should probably avoid this technique. They’ll have a different but acceptable experience.
In the case of the list view component, they’ll see all the elements vertically align on the top instead of on the center.
Vertical alignment on IE9 and 10 is a price I am willing to pay for a structure that can fit an elephant without braking.