Layout examples using inline styling

Steven McCoy

The [layout examples][1] in the Eikon Web UI site are all using inline CSS and thus breaking the core tenet of layout being separate to content. Why is this example so verbose? Section 1 Section 2 Section 3 Section 4 c.f.
http://jsfiddle.net/D9NGh/ CSS: .simple-example, .simple-example div { display: flex; flex-flow: row wrap; } nav { width: 250px; } section { flex: 1 100%; } .half { flex: 2 0; } HTML 5: (not ideal as using Flexbox instead of Grid) Section 1 Section 2 Section 3 Section 4 There many sites on flexbox layout correctly document how this should be demonstrated. -
http://www.w3.org/TR/css3-flexbox/ -
http://learnlayout.com/flexbox.html -
http://css-tricks.com/snippets/css/a-guide-to-flexbox/ -
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes [1]:
https://amers1.apps.cp.extranet.thomsonreuters.biz/Apps/EikonWebUI/1.2.12/

gregory.machon

Thanks Steve for taking time to put this example together. Much appreciated! I will pass it on to developers working on the Eikon Web UI.

We are focusing on the visual changes right now and at this stage I think even this way of flex-box implementation may suffice. Of course I'm all in favor of using best practices and using inline styles may cause issues in the long run and a css file is the right place for styles.

Thanks
Greg

Andrew Gerber

Steve, I'm not sure what the question is here? Maybe reword it a bit? Thanks!

RBrooks

I added an upvote to counteract the -1 score from a previous downvote. I would suggest that it's a valid comment, and a real issue.

Zhenya Kovalyov

Could you rephrase the issue then, please?

Steven McCoy

@Evgeny took a while to work out a flexbox example.

gregory.machon

up-voting from -1, valid question/concern/suggestion