{"action":"created","comment":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/34533556","id":34533556,"diff_hunk":"@@ -0,0 +1,878 @@\n+---\n+layout:       element\n+title:        Grid System\n+date:         2015-07-01 00:00:00\n+\n+categories:   elements\n+tags:\n+- atomic\n+- pattern\n+- grid\n+\n+slug:         grid\n+scssurl:      \"https://github.com/edx/ux-pattern-library/blob/master/_src/pattern-library/sass/components/_grid.scss\"\n+\n+description:  Grid system and settings that can be used throughout layouts.\n+\n+info: A responsive, mobile first fluid grid system, based on Susy and Breakpoint, that appropriately scales up to 12 columns as the device or viewport size increases. It includes some predefined classes for easy layout options, while providing Sass utilities for generating more semantic layouts.\n+\n+example: grid.html\n+---\n+\n+<h3 class=\"hd-6 example-set-hd\">Basic Grid</h3>\n+<div class=\"example-set\">\n+    <div class=\"example-grid example-grid-basic\">\n+        <div class=\"grid-container\">\n+            <div class=\"col first\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+               <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+\n+            <div class=\"col last\">\n+                <span class=\"example-label\">Col</span>\n+            </div>\n+        </div>\n+    </div>\n+</div>\n+\n+<h3 class=\"hd-6 example-set-hd\">Basic Grid (with column shifts)</h3>\n+<div class=\"example-set\">\n+    <div class=\"example-grid example-grid-shifts\">\n+        <div class=\"grid-container\">\n+            <section class=\"shifts-pre\">\n+                <div class=\"col col-A\">\n+                    <span class=\"example-label\">Pre 1 Col</span>\n+                </div>\n+\n+                <div class=\"col col-B\">\n+                    <span class=\"example-label\">Pre 2 Col</span>\n+                </div>\n+\n+                <div class=\"col col-C\">\n+                    <span class=\"example-label\">Pre 3 Col</span>\n+                </div>\n+\n+                <div class=\"col col-D\">\n+                    <span class=\"example-label\">Pre 4 Col</span>\n+                </div>\n+\n+                <div class=\"col col-E\">\n+                    <span class=\"example-label\">Pre 5 Col</span>\n+                </div>\n+\n+                <div class=\"col col-F\">\n+                    <span class=\"example-label\">Pre 6 Col</span>\n+                </div>\n+\n+                <div class=\"col col-G\">\n+                    <span class=\"example-label\">Pre 7 Col</span>\n+                </div>\n+\n+                <div class=\"col col-H\">\n+                    <span class=\"example-label\">Pre 8 Col</span>\n+                </div>\n+\n+                <div class=\"col col-I\">\n+                    <span class=\"example-label\">Pre 9 Col</span>\n+                </div>\n+\n+                <div class=\"col col-J\">\n+                   <span class=\"example-label\">Pre 10 Col</span>\n+                </div>\n+\n+                <div class=\"col col-K\">\n+                    <span class=\"example-label\">Pre 11 Col</span>\n+                </div>\n+            </section>\n+\n+            <section class=\"shifts-post\">\n+                <div class=\"col col-A\">\n+                    <span class=\"example-label\">Post 1 Col</span>\n+                </div>\n+\n+                <div class=\"col col-B\">\n+                    <span class=\"example-label\">Post 2 Col</span>\n+                </div>\n+\n+                <div class=\"col col-C\">\n+                    <span class=\"example-label\">Post 3 Col</span>\n+                </div>\n+\n+                <div class=\"col col-D\">\n+                    <span class=\"example-label\">Post 4 Col</span>\n+                </div>\n+\n+                <div class=\"col col-E\">\n+                    <span class=\"example-label\">Post 5 Col</span>\n+                </div>\n+\n+                <div class=\"col col-F\">\n+                    <span class=\"example-label\">Post 6 Col</span>\n+                </div>\n+\n+                <div class=\"col col-G\">\n+                    <span class=\"example-label\">Post 7 Col</span>\n+                </div>\n+\n+                <div class=\"col col-H\">\n+                    <span class=\"example-label\">Post 8 Col</span>\n+                </div>\n+\n+                <div class=\"col col-I\">\n+                    <span class=\"example-label\">Post 9 Col</span>\n+                </div>\n+\n+                <div class=\"col col-J\">\n+                   <span class=\"example-label\">Post 10 Col</span>\n+                </div>\n+\n+                <div class=\"col col-K\">\n+                    <span class=\"example-label\">Post 11 Col</span>\n+                </div>\n+            </section>\n+        </div>\n+    </div>\n+</div>\n+\n+<h3 class=\"hd-6 example-set-hd\">Utility Class-based Grid</h3>\n+<div class=\"example-set\">\n+    <div class=\"example-grid example-grid-classes\">\n+        <div class=\"grid-container grid-manual\">\n+            <div class=\"row\">\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+\n+                <div class=\"col col-1\">\n+                    <span class=\"example-label\">col-1</span>\n+                </div>\n+            </div>\n+\n+            <div class=\"row\">\n+                <div class=\"col col-2\">\n+                    <span class=\"example-label\">col-2</span>\n+                </div>\n+\n+                <div class=\"col col-2\">\n+                    <span class=\"example-label\">col-2</span>\n+                </div>\n+\n+                <div class=\"col col-2\">\n+                    <span class=\"example-label\">col-2</span>\n+                </div>\n+\n+                <div class=\"col col-2\">\n+                    <span class=\"example-label\">col-2</span>\n+                </div>\n+\n+                <div class=\"col col-2\">\n+                    <span class=\"example-label\">col-2</span>\n+                </div>\n+\n+                <div class=\"col col-2\">\n+                    <span class=\"example-label\">col-2</span>\n+                </div>\n+            </div>\n+\n+            <div class=\"row\">\n+                <div class=\"col col-3\">\n+                    <span class=\"example-label\">col-3</span>\n+                </div>\n+\n+                <div class=\"col col-3\">\n+                    <span class=\"example-label\">col-3</span>\n+                </div>\n+\n+                <div class=\"col col-3\">\n+                    <span class=\"example-label\">col-3</span>\n+                </div>\n+\n+                <div class=\"col col-3\">\n+                    <span class=\"example-label\">col-3</span>\n+                </div>\n+            </div>\n+\n+            <div class=\"row\">\n+                <div class=\"col col-4\">\n+                    <span class=\"example-label\">col-4</span>\n+                </div>\n+\n+                <div class=\"col col-4\">\n+                    <span class=\"example-label\">col-4</span>\n+                </div>\n+\n+                <div class=\"col col-4\">\n+                    <span class=\"example-label\">col-4</span>\n+                </div>\n+            </div>\n+\n+            <div class=\"row\">\n+                <div class=\"col col-12\">\n+                    <span class=\"example-label\">col-12</span>\n+                </div>\n+            </div>\n+\n+            <div class=\"row\">\n+                <div class=\"col col-2 pre-5 post-5\">\n+                    <span class=\"example-label\">col-2</span>\n+                    <span class=\"example-label\">pre-5</span>\n+                    <span class=\"example-label\">post-5</span>\n+                </div>\n+\n+                <div class=\"col col-4 pre-4 post-4\">\n+                    <span class=\"example-label\">col-4</span>\n+                    <span class=\"example-label\">pre-4</span>\n+                    <span class=\"example-label\">post-4</span>\n+                </div>\n+\n+                <div class=\"col col-6 pre-3 post-3\">\n+                    <span class=\"example-label\">col-6</span>\n+                    <span class=\"example-label\">pre-3</span>\n+                    <span class=\"example-label\">post-3</span>\n+                </div>\n+\n+                <div class=\"col col-8 pre-2 post-2\">\n+                    <span class=\"example-label\">col-8</span>\n+                    <span class=\"example-label\">pre-2</span>\n+                    <span class=\"example-label\">post-2</span>\n+                </div>\n+\n+                <div class=\"col col-10 pre-1 post-1\">\n+                    <span class=\"example-label\">col-10</span>\n+                    <span class=\"example-label\">pre-1</span>\n+                    <span class=\"example-label\">post-1</span>\n+                </div>\n+            </div>\n+        </div>\n+    </div>\n+</div>\n+\n+<h3 class=\"hd-6 example-set-hd\">Utility Class-based Nested Grid</h3>\n+<div class=\"example-set\">\n+    <div class=\"example-grid example-grid-nested\">\n+        <div class=\"grid-container grid-manual\">\n+            <div class=\"row\">\n+                <div class=\"col col-8\">\n+                    <span class=\"example-label\">col-8</span>\n+\n+                    <div class=\"row\">\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+                    </div>\n+\n+                    <div class=\"row\">\n+                        <div class=\"col col-4\">\n+                            <span class=\"example-label\">col-4</span>\n+                        </div>\n+\n+                        <div class=\"col col-4\">\n+                            <span class=\"example-label\">col-4</span>\n+                        </div>\n+                    </div>\n+\n+                    <div class=\"row\">\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+\n+                        <div class=\"col col-4\">\n+                            <span class=\"example-label\">col-4</span>\n+                        </div>\n+\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+                    </div>\n+                </div>\n+\n+                <div class=\"col col-4\">\n+                    <span class=\"example-label\">col-4</span>\n+\n+                    <div class=\"row\">\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+\n+                        <div class=\"col col-2\">\n+                            <span class=\"example-label\">col-2</span>\n+                        </div>\n+                    </div>\n+\n+                    <div class=\"row\">\n+                        <div class=\"col col-4\">\n+                            <span class=\"example-label\">col-4</span>\n+                        </div>\n+                    </div>\n+                </div>\n+            </div>\n+        </div>\n+    </div>\n+</div>\n+\n+<h3 class=\"hd-6 example-set-hd\">Utility Class-based Responsive Grid</h3>\n+<div class=\"example-set\">\n+    <div class=\"example-grid example-grid-responsive grid-container\">\n+        <div class=\"grid-container grid-manual\">\n+            <div class=\"row\">\n+                <div class=\"col col-12 sm-col-6 md-col-4 lg-col-2 xl-col-2\">\n+                    <span class=\"example-label\">xl-col-2</span>\n+                    <span class=\"example-label\">lg-col-2</span>\n+                    <span class=\"example-label\">md-col-4</span>\n+                    <span class=\"example-label\">sm-col-6</span>\n+                    <span class=\"example-label\">col-12 (base)</span>\n+                </div>\n+\n+                <div class=\"col col-12 sm-col-6 md-col-4 lg-col-2 xl-col-2\">\n+                    <span class=\"example-label\">xl-col-2</span>\n+                    <span class=\"example-label\">lg-col-2</span>\n+                    <span class=\"example-label\">md-col-4</span>\n+                    <span class=\"example-label\">sm-col-6</span>\n+                    <span class=\"example-label\">col-12 (base)</span>\n+                </div>\n+\n+                <div class=\"col col-12 sm-col-6 md-col-4 lg-col-2 xl-col-2\">\n+                    <span class=\"example-label\">xl-col-2</span>\n+                    <span class=\"example-label\">lg-col-2</span>\n+                    <span class=\"example-label\">md-col-4</span>\n+                    <span class=\"example-label\">sm-col-6</span>\n+                    <span class=\"example-label\">col-12 (base)</span>\n+                </div>\n+\n+                <div class=\"col col-12 sm-col-6 md-col-4 lg-col-2 xl-col-2\">\n+                    <span class=\"example-label\">xl-col-2</span>\n+                    <span class=\"example-label\">lg-col-2</span>\n+                    <span class=\"example-label\">md-col-4</span>\n+                    <span class=\"example-label\">sm-col-6</span>\n+                    <span class=\"example-label\">col-12 (base)</span>\n+                </div>\n+\n+                <div class=\"col col-12 sm-col-6 md-col-4 lg-col-2 xl-col-2\">\n+                    <span class=\"example-label\">xl-col-2</span>\n+                    <span class=\"example-label\">lg-col-2</span>\n+                    <span class=\"example-label\">md-col-4</span>\n+                    <span class=\"example-label\">sm-col-6</span>\n+                    <span class=\"example-label\">col-12 (base)</span>\n+                </div>\n+\n+                <div class=\"col col-12 sm-col-6 md-col-4 lg-col-2 xl-col-2\">\n+                    <span class=\"example-label\">xl-col-2</span>\n+                    <span class=\"example-label\">lg-col-2</span>\n+                    <span class=\"example-label\">md-col-4</span>\n+                    <span class=\"example-label\">sm-col-6</span>\n+                    <span class=\"example-label\">col-12 (base)</span>\n+                </div>\n+            </div>\n+        </div>\n+    </div>\n+</div>\n+\n+<h3 class=\"hd-6 example-set-hd\">Semantic-based Grid</h3>\n+<div class=\"example-set\">\n+    <div class=\"example-grid example-grid-semantic\">\n+        <div class=\"wrapper-content\">\n+            <main class=\"content-main\">\n+\n+                <article class=\"story story-main\">\n+                    <h3 class=\"hd-4\">Example News Story</h3>\n+                    <p class=\"copy-large\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.</p>\n+\n+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, odio itaque, repudiandae voluptates vero velit possimus recusandae illum hic nobis doloribus assumenda laudantium. Nisi architecto eveniet, qui atque, maiores deleniti?</p>\n+                </article>\n+\n+                <article class=\"story story-secondary\">\n+                    <h3 class=\"hd-5\">Example News Story</h3>\n+                    <p class=\"copy-base\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.</p>\n+                </article>\n+\n+                <article class=\"story story-secondary\">\n+                    <h3 class=\"hd-5\">Example News Story</h3>\n+                    <p class=\"copy-base\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.</p>\n+                </article>\n+\n+                <article class=\"story story-secondary\">\n+                    <h3 class=\"hd-5\">Example News Story</h3>\n+                    <p class=\"copy-base\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.</p>\n+                </article>\n+\n+                <article class=\"story story-secondary\">\n+                    <h3 class=\"hd-5\">Example News Story</h3>\n+                    <p class=\"copy-base\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.</p>\n+                </article>\n+\n+                <article class=\"story story-secondary\">\n+                    <h3 class=\"hd-5\">Example News Story</h3>\n+                    <p class=\"copy-base\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus totam dolorum recusandae voluptate modi laboriosam laudantium? Consequuntur, ipsam autem, eveniet pariatur consectetur qui maiores nemo asperiores omnis obcaecati debitis. Vitae.</p>\n+                </article>\n+            </main>\n+\n+            <aside class=\"content-secondary\">\n+                <h4 class=\"hd-6\">See Also</h4>\n+\n+                <ul class=\"list-related copy-meta\">\n+                    <li class=\"related-item\">\n+                        <a href=\"\">Related Item</a>\n+                    </li>\n+                    <li class=\"related-item\">\n+                        <a href=\"\">Related Item</a>\n+                    </li>\n+                    <li class=\"related-item\">\n+                        <a href=\"\">Related Item</a>\n+                    </li>\n+                    <li class=\"related-item\">\n+                        <a href=\"\">Related Item</a>\n+                    </li>\n+                    <li class=\"related-item\">\n+                        <a href=\"\">Related Item</a>\n+                    </li>\n+                </ul>\n+            </aside>\n+        </div>\n+    </div>\n+</div>\n+\n+<h3 class=\"hd-6 example-set-hd\">Semantic Gallery</h3>\n+<div class=\"example-set\">\n+    <div class=\"example-grid example-grid-gallery-semantic\">\n+        <section class=\"photo-gallery photo-gallery-large\">\n+            <figure class=\"photo\">\n+                <img class=\"photo-source\" src=\"http://placehold.it/200x100\" alt=\"Puppies playing in a field\">","path":"_posts/elements/2015-07-01-grid.md","position":530,"original_position":530,"commit_id":"22111a3c62145461ebfe24612e303eafc238c16c","original_commit_id":"22111a3c62145461ebfe24612e303eafc238c16c","user":{"login":"frrrances","id":4327102,"avatar_url":"https://avatars.githubusercontent.com/u/4327102?v=3","gravatar_id":"","url":"https://api.github.com/users/frrrances","html_url":"https://github.com/frrrances","followers_url":"https://api.github.com/users/frrrances/followers","following_url":"https://api.github.com/users/frrrances/following{/other_user}","gists_url":"https://api.github.com/users/frrrances/gists{/gist_id}","starred_url":"https://api.github.com/users/frrrances/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/frrrances/subscriptions","organizations_url":"https://api.github.com/users/frrrances/orgs","repos_url":"https://api.github.com/users/frrrances/repos","events_url":"https://api.github.com/users/frrrances/events{/privacy}","received_events_url":"https://api.github.com/users/frrrances/received_events","type":"User","site_admin":false},"body":"[#gregeasteregg](http://www.boredpal.com/post_images/2015/May/1388-5550c64abb97d.gif)","created_at":"2015-07-14T02:51:27Z","updated_at":"2015-07-14T02:51:27Z","html_url":"https://github.com/edx/ux-pattern-library/pull/105#discussion_r34533556","pull_request_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105","_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/34533556"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/105#discussion_r34533556"},"pull_request":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105"}}},"pull_request":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105","id":38727154,"html_url":"https://github.com/edx/ux-pattern-library/pull/105","diff_url":"https://github.com/edx/ux-pattern-library/pull/105.diff","patch_url":"https://github.com/edx/ux-pattern-library/pull/105.patch","issue_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/105","number":105,"state":"open","locked":false,"title":"Elements: Grid","user":{"login":"talbs","id":163763,"avatar_url":"https://avatars.githubusercontent.com/u/163763?v=3","gravatar_id":"","url":"https://api.github.com/users/talbs","html_url":"https://github.com/talbs","followers_url":"https://api.github.com/users/talbs/followers","following_url":"https://api.github.com/users/talbs/following{/other_user}","gists_url":"https://api.github.com/users/talbs/gists{/gist_id}","starred_url":"https://api.github.com/users/talbs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/talbs/subscriptions","organizations_url":"https://api.github.com/users/talbs/orgs","repos_url":"https://api.github.com/users/talbs/repos","events_url":"https://api.github.com/users/talbs/events{/privacy}","received_events_url":"https://api.github.com/users/talbs/received_events","type":"User","site_admin":false},"body":"##### This work adds in a base grid system, including:\r\n* a [Susy](http://susy.oddbird.net/)-based set of fluid grid settings\r\n* theming/per-application settings\r\n* base grid styling and support\r\n* a reasonable manual grid (DOM class-based) support\r\n\r\nIn addition, I've created a new [Grid System Styleguide/Doc wiki page](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Grid-System).\r\n\r\nFor Usage-based reviewers and all, there's also a [grid.html example page](https://github.com/edx/ux-pattern-library/blob/talbs/elements-grid/examples/grid.html ) that you can play around with locally.\r\n\r\nThis work also has a few fixes (noted by the \"FIX: \" prefix) I found/needed along the way. I'll be placing inline \"NOTE:\" items shortly to give you folks a guided tour of the decisions and mechanics.\r\n\r\n- - -\r\n\r\n##### What this system/work does\r\n* Sets up a fluid 12 column layout that can be customized with pre-set Sass variables\r\n* Relies on Susy syntax for creating (future) semantic-based grids and layouts\r\n* Provides classes to apply to DOM elements for creating basic grids without knowing/touching Sass/CSS\r\n* Provides classes to apply to DOM elements for utilities such as galleries and shifting, responsive-support\r\n* Shows example markup/classes/cases of the above\r\n* Adds a ``/examples/grid.html`` separate page for playing and testing.\r\n\r\n- - -\r\n\r\n##### What this system/work does not do\r\n* Handle additional media queries, like retina displays and specific devices yet\r\n* Provide DOM-based classes for all of Susy's grid utilities (just the more common ones)\r\n\r\n- - -\r\n\r\n##### Loose Ends and Issues\r\n* Currently, nested manual grids are not pulling in the right Susy \"context\" (see [this article for more information on susy context](http://www.zell-weekeat.com/context-with-susy/))\r\n\r\n- - -\r\n\r\n##### Reviewers\r\n* [ ] FED - @frrrances \r\n* [ ] Documentation - @frrrances and @clrux \r\n* [ ] Usage - @andywaldrop and @AlasdairSwan \r\n\r\n- - - \r\n\r\nFYI, @dsjen, @marcotuts, @clrux.","created_at":"2015-06-28T15:29:50Z","updated_at":"2015-07-14T02:51:27Z","closed_at":null,"merged_at":null,"merge_commit_sha":"43ddcf0f7ddfa1dfdc60cc33b0ad57209b87f6dc","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105/commits","review_comments_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105/comments","review_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments{/number}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/105/comments","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/22111a3c62145461ebfe24612e303eafc238c16c","head":{"label":"edx:talbs/elements-grid","ref":"talbs/elements-grid","sha":"22111a3c62145461ebfe24612e303eafc238c16c","user":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":29666334,"name":"ux-pattern-library","full_name":"edx/ux-pattern-library","owner":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/ux-pattern-library","description":"The (working) Visual, UI, and Front End Styleguide for edX.","fork":false,"url":"https://api.github.com/repos/edx/ux-pattern-library","forks_url":"https://api.github.com/repos/edx/ux-pattern-library/forks","keys_url":"https://api.github.com/repos/edx/ux-pattern-library/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/ux-pattern-library/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/ux-pattern-library/teams","hooks_url":"https://api.github.com/repos/edx/ux-pattern-library/hooks","issue_events_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/events{/number}","events_url":"https://api.github.com/repos/edx/ux-pattern-library/events","assignees_url":"https://api.github.com/repos/edx/ux-pattern-library/assignees{/user}","branches_url":"https://api.github.com/repos/edx/ux-pattern-library/branches{/branch}","tags_url":"https://api.github.com/repos/edx/ux-pattern-library/tags","blobs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/ux-pattern-library/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/ux-pattern-library/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/ux-pattern-library/languages","stargazers_url":"https://api.github.com/repos/edx/ux-pattern-library/stargazers","contributors_url":"https://api.github.com/repos/edx/ux-pattern-library/contributors","subscribers_url":"https://api.github.com/repos/edx/ux-pattern-library/subscribers","subscription_url":"https://api.github.com/repos/edx/ux-pattern-library/subscription","commits_url":"https://api.github.com/repos/edx/ux-pattern-library/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/ux-pattern-library/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/ux-pattern-library/contents/{+path}","compare_url":"https://api.github.com/repos/edx/ux-pattern-library/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/ux-pattern-library/merges","archive_url":"https://api.github.com/repos/edx/ux-pattern-library/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/ux-pattern-library/downloads","issues_url":"https://api.github.com/repos/edx/ux-pattern-library/issues{/number}","pulls_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/ux-pattern-library/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/ux-pattern-library/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/ux-pattern-library/labels{/name}","releases_url":"https://api.github.com/repos/edx/ux-pattern-library/releases{/id}","created_at":"2015-01-22T07:19:42Z","updated_at":"2015-07-09T15:46:06Z","pushed_at":"2015-07-13T14:16:24Z","git_url":"git://github.com/edx/ux-pattern-library.git","ssh_url":"git@github.com:edx/ux-pattern-library.git","clone_url":"https://github.com/edx/ux-pattern-library.git","svn_url":"https://github.com/edx/ux-pattern-library","homepage":"http://ux.edx.org","size":6059,"stargazers_count":20,"watchers_count":20,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":5,"mirror_url":null,"open_issues_count":9,"forks":5,"open_issues":9,"watchers":20,"default_branch":"master"}},"base":{"label":"edx:master","ref":"master","sha":"2d714bf5dd288cd2fcb7c37b94fb9209ed1e7e75","user":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":29666334,"name":"ux-pattern-library","full_name":"edx/ux-pattern-library","owner":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/ux-pattern-library","description":"The (working) Visual, UI, and Front End Styleguide for edX.","fork":false,"url":"https://api.github.com/repos/edx/ux-pattern-library","forks_url":"https://api.github.com/repos/edx/ux-pattern-library/forks","keys_url":"https://api.github.com/repos/edx/ux-pattern-library/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/ux-pattern-library/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/ux-pattern-library/teams","hooks_url":"https://api.github.com/repos/edx/ux-pattern-library/hooks","issue_events_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/events{/number}","events_url":"https://api.github.com/repos/edx/ux-pattern-library/events","assignees_url":"https://api.github.com/repos/edx/ux-pattern-library/assignees{/user}","branches_url":"https://api.github.com/repos/edx/ux-pattern-library/branches{/branch}","tags_url":"https://api.github.com/repos/edx/ux-pattern-library/tags","blobs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/ux-pattern-library/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/ux-pattern-library/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/ux-pattern-library/languages","stargazers_url":"https://api.github.com/repos/edx/ux-pattern-library/stargazers","contributors_url":"https://api.github.com/repos/edx/ux-pattern-library/contributors","subscribers_url":"https://api.github.com/repos/edx/ux-pattern-library/subscribers","subscription_url":"https://api.github.com/repos/edx/ux-pattern-library/subscription","commits_url":"https://api.github.com/repos/edx/ux-pattern-library/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/ux-pattern-library/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/ux-pattern-library/contents/{+path}","compare_url":"https://api.github.com/repos/edx/ux-pattern-library/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/ux-pattern-library/merges","archive_url":"https://api.github.com/repos/edx/ux-pattern-library/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/ux-pattern-library/downloads","issues_url":"https://api.github.com/repos/edx/ux-pattern-library/issues{/number}","pulls_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/ux-pattern-library/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/ux-pattern-library/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/ux-pattern-library/labels{/name}","releases_url":"https://api.github.com/repos/edx/ux-pattern-library/releases{/id}","created_at":"2015-01-22T07:19:42Z","updated_at":"2015-07-09T15:46:06Z","pushed_at":"2015-07-13T14:16:24Z","git_url":"git://github.com/edx/ux-pattern-library.git","ssh_url":"git@github.com:edx/ux-pattern-library.git","clone_url":"https://github.com/edx/ux-pattern-library.git","svn_url":"https://github.com/edx/ux-pattern-library","homepage":"http://ux.edx.org","size":6059,"stargazers_count":20,"watchers_count":20,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":5,"mirror_url":null,"open_issues_count":9,"forks":5,"open_issues":9,"watchers":20,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/105"},"issue":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/105"},"comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/105/comments"},"review_comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105/comments"},"review_comment":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/105/commits"},"statuses":{"href":"https://api.github.com/repos/edx/ux-pattern-library/statuses/22111a3c62145461ebfe24612e303eafc238c16c"}}}}