guardian/frontend — pull request #3307 by kaelig (2014-02-26 16:32:40+00:00)
Title: Row pattern update

- [new] You can put a facia container anywhere in the site. If it's a front, use `.facia-container--layout-front`, if it's in an article, use: `.facia-container--layout-article`. News container is not portable yet, though (its styles are in head.facia.css only for now).
- [new] Guss Layout is more powerful and we can have different layouts on mobile (that we used to do with floats in the past)
- [new] Now using the row pattern in the related container
- [fix] "related" and "most popular" headings have the same size as container titles

Differences for the related container with this approach (see screenshots):
- we show tone border colours, consistently with the fronts. We can make an exception but I'd like to see if that causes confusion before we add more code.
- less scrolling needed (because flex box adapts the height of trails to their content, whereas with floats we needed to have a minimum height on trails, causing whitespace)
- tablet (between 740 and 900 px wide) see 3 trails instead of 5. This results in a better information density but potentially harm this onward journey at this breakpoint. Stats will tell if this is a big issue.

/cc @phamann

## Related container

### Before

#### Mobile
![screen shot 2014-02-26 at 15 59 29](https://f.cloud.github.com/assets/85783/2271876/485d1c92-9eff-11e3-8aca-c50b4b1190b9.PNG)

#### Tablet

![screen shot 2014-02-26 at 15 59 15](https://f.cloud.github.com/assets/85783/2271878/4bee3918-9eff-11e3-90af-4703f6b4ca8c.PNG)

#### Desktop

![screen shot 2014-02-26 at 15 58 56](https://f.cloud.github.com/assets/85783/2271882/5b6930b4-9eff-11e3-8487-2ae7477aeb4e.PNG)

#### Wide

![screen shot 2014-02-26 at 15 58 46](https://f.cloud.github.com/assets/85783/2271885/62a44f62-9eff-11e3-938c-67a6d885f9aa.PNG)

### After

#### Mobile

![screen shot 2014-02-26 at 16 27 39](https://f.cloud.github.com/assets/85783/2272239/15e91172-9f03-11e3-9de3-c4b4458077bb.PNG)

#### Tablet

![screen shot 2014-02-26 at 16 03 23](https://f.cloud.github.com/assets/85783/2272158/0f7e094c-9f02-11e3-8e4f-39a4f0e88f36.PNG)

#### Desktop

![screen shot 2014-02-26 at 16 03 12](https://f.cloud.github.com/assets/85783/2272161/133ec35a-9f02-11e3-80ce-51772e711530.PNG)

#### Wide

![screen shot 2014-02-26 at 16 03 04](https://f.cloud.github.com/assets/85783/2272162/17cca748-9f02-11e3-9db6-c70673103e37.PNG)

![ ](http://media.giphy.com/media/pGeWQv4ILBu36/giphy.gif)