Last active
August 29, 2015 14:15
-
-
Save tsmith512/352e2db3382d1c306cbf to your computer and use it in GitHub Desktop.
Examples for Presentation: Advanced Responsive Web Design
Part 5C: Overriding the global context with layout()
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <span>Container</span> | |
| <div id="main"> | |
| <span>Main</span> | |
| <div class="left"><span>Left</span></div> | |
| <div class="right"><span>Right</span></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.12) | |
| // Compass (v1.0.3) | |
| // Breakpoint (v2.5.0) | |
| // Singularity Extras (v1.0.0) | |
| // Singularity.gs (v1.5.1) | |
| // ---- | |
| /** | |
| * Examples for Presentation: Advanced Responsive Web Design | |
| * Part 5C: Overriding the global context with layout() | |
| * For More Information: http://github.com/tsmith512/arwd | |
| */ | |
| @import "compass"; | |
| @import "singularitygs"; | |
| @import "singularity-extras"; | |
| @import "breakpoint"; | |
| @include add-grid(12); | |
| @include add-gutter(1/3); | |
| // To see this grid using background-grid, we need debugging options: | |
| @include sgs-change('debug', true); | |
| div { | |
| border: 1px solid red; | |
| span { | |
| display: block; | |
| clear: both; | |
| padding: 1em; | |
| } | |
| } | |
| #container { | |
| @include clearfix; | |
| @include background-grid($color: #ddd); | |
| } | |
| #main { | |
| @include grid-span(8, 1); | |
| @include layout(snap((6 2), 1/3)) { | |
| @include background-grid($color: #ccc); | |
| .left { | |
| @include grid-span(1, 1); | |
| } | |
| .right { | |
| @include grid-span(1, 2); | |
| } } } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Examples for Presentation: Advanced Responsive Web Design | |
| * Part 5C: Overriding the global context with layout() | |
| * For More Information: http://github.com/tsmith512/arwd | |
| */ | |
| div { | |
| border: 1px solid red; | |
| } | |
| div span { | |
| display: block; | |
| clear: both; | |
| padding: 1em; | |
| } | |
| #container { | |
| overflow: hidden; | |
| *zoom: 1; | |
| background-image: linear-gradient(to right, #ddd 0%, #ddd 6.38298%, #e5e5e5 6.38298%, #e5e5e5 8.51064%, #ddd 8.51064%, #ddd 14.89362%, #e5e5e5 14.89362%, #e5e5e5 17.02128%, #ddd 17.02128%, #ddd 23.40426%, #e5e5e5 23.40426%, #e5e5e5 25.53191%, #ddd 25.53191%, #ddd 31.91489%, #e5e5e5 31.91489%, #e5e5e5 34.04255%, #ddd 34.04255%, #ddd 40.42553%, #e5e5e5 40.42553%, #e5e5e5 42.55319%, #ddd 42.55319%, #ddd 48.93617%, #e5e5e5 48.93617%, #e5e5e5 51.06383%, #ddd 51.06383%, #ddd 57.44681%, #e5e5e5 57.44681%, #e5e5e5 59.57447%, #ddd 59.57447%, #ddd 65.95745%, #e5e5e5 65.95745%, #e5e5e5 68.08511%, #ddd 68.08511%, #ddd 74.46809%, #e5e5e5 74.46809%, #e5e5e5 76.59574%, #ddd 76.59574%, #ddd 82.97872%, #e5e5e5 82.97872%, #e5e5e5 85.10638%, #ddd 85.10638%, #ddd 91.48936%, #e5e5e5 91.48936%, #e5e5e5 93.61702%, #ddd 93.61702%, #ddd); | |
| } | |
| #main { | |
| -sgs-span-settings: ("span": 8, "location": 1, "grid": 12, "gutter": 0.33333, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null)); | |
| width: 65.95745%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| background-image: linear-gradient(to right, #ccc 0%, #ccc 74.19355%, #d8d8d8 74.19355%, #d8d8d8 77.41935%, #ccc 77.41935%, #ccc); | |
| } | |
| #main .left { | |
| -sgs-span-settings: ("span": 1, "location": 1, "grid": 7.66667 2.33333, "gutter": 0.33333, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null)); | |
| width: 74.19355%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| } | |
| #main .right { | |
| -sgs-span-settings: ("span": 1, "location": 2, "grid": 7.66667 2.33333, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null)); | |
| width: 22.58065%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <span>Container</span> | |
| <div id="main"> | |
| <span>Main</span> | |
| <div class="left"><span>Left</span></div> | |
| <div class="right"><span>Right</span></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment