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