Wikia/app — pull request #1140 by kflorence (2013-07-19 00:51:46+00:00)
Title: DAR-1162: Prepare fluid layout for production release to Community Council

**DO NOT MERGE BEFORE MONDAY JULY 22, 2013**

https://wikia-inc.atlassian.net/browse/DAR-1162

This changeset introduces the responsive layout to Oasis in preparation for its enablement on the Community Council wiki for its first feedback period. There should be no noticable regressions in production when the responsive layout is disabled. To enable this on your devbox, use the following flag:

```php
$wgOasisResponsive = true;
```

Notable changes include:
- Media queries with breakpoints for small screens (max-width: 1023px) and large screens (min-width: 1370px) with a minimum layout size of 768px and a maximum of 1600px.
- Skin ad margins of 170px for screens sizes between 1370px and 1940px. Ad skin margins will decrease in size for screen sizes less than 1370px and increase in size for screen sizes larger than 1940px.
- Right rail size has been adjusted from 330px to 300px.
- A fluid article content area.
- Dynamically placed background image based on screen size and background image dimensions. Once the responsive layout kicks in, there will be a gradient on the inner edges of the background image which blend it into the background color (generally not noticeable unless a wiki has transparency enabled since it sits behind the top leaderboard ads).
- Fixes for right rail modules when the responsive layout is enabled (there are a few exceptions for modules which haven't been addressed yet, such as the related videos module).
- Fixes for edit pages (including wide mode) and preview dialogs when the responsive layout is enabled
- Fixes to various special pages (not all special pages have been fixed yet)
- Various cleanup to template and stylesheets.

Some helpful variables have also been added for detecting when the responsive layout is enabled. Keep in mind that these will be refactored out once this code is going live globally. In PHP, you can call `BodyController::isResponsiveLayoutEnabled()`. In JavaScript, you can check if the responsive layout is enabled by checking the `wgIsResponsiveLayoutEnabled` variable. In Sass, you can check the `$responsive-layout-enabled` variable which is defined in _/skins/oasis/css/core/layout.scss_.