-
-
Save JeongInyoung/2d71b4deeb145aadb0ca to your computer and use it in GitHub Desktop.
Revisions
-
Snugug created this gist
Feb 27, 2014 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,5 @@ <div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,74 @@ // ---- // Sass (v3.3.0.rc.5) // Compass (v1.0.0.alpha.18) // Breakpoint (v2.4.1) // Singularity.gs (v1.2.0.rc.6) // Singularity Extras (v1.0.0.alpha.3) // Toolkit (v2.0.0.alpha.10) // ---- @import "breakpoint"; @import "singularitygs"; @import "singularity-extras/outputs"; @import "toolkit"; @import "toolkit/kickstart"; body { margin: 0; padding: 0; } div { height: 50vh; } ////////////////////////////// // Grids ////////////////////////////// $my-awesome-breakpoint: 500px (orientation portrait), 'no-query' '.no-mq'; @include add-grid(1 2 1); @include add-grid(320px 1 2 at $my-awesome-breakpoint); @include add-gutter(1/3); @include add-gutter(1em at $my-awesome-breakpoint); @include add-gutter-style('split'); @include sgs-change('debug', true); .container { max-width: 700px; height: 100vh; // @include background-grid; margin: 0 auto; } .one { @include grid-span(1, 1); @include breakpoint($my-awesome-breakpoint) { @include layout($output-style: 'calc') { @include grid-span(1, 2); } height: 75vh; } background: rgba(red, .5); } .two { @include grid-span(1, 2); @include breakpoint($my-awesome-breakpoint) { @include layout($output-style: 'calc') { @include grid-span(1, 1); } } background: rgba(green, .5); } .three { @include grid-span(1, 3); @include breakpoint($my-awesome-breakpoint) { @include layout($output-style: 'calc') { @include grid-span(1, 3); } } background: rgba(blue, .5); } 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,85 @@ *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } img, video { max-width: 100%; height: auto; } body { margin: 0; padding: 0; } div { height: 50vh; } .container { max-width: 700px; height: 100vh; margin: 0 auto; } .one { -sgs-span-settings: ("span": 1, "location": 1, "grid": 1 2 1, "gutter": 0.3333333333, "style": "split", "start row": true, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null))); width: 20%; float: left; margin-right: -100%; margin-left: 3.3333333333%; clear: none; background: rgba(255, 0, 0, 0.5); } @media (min-width: 500px) and (orientation: portrait) { .one { -sgs-span-settings: ("span": 1, "location": 2, "grid": 320px 1 2, "gutter": 1em, "style": "split", "start row": false, "end row": false, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null))); width: -webkit-calc((((100% - (320px + 3em)) / (3))) * 1); width: calc((((100% - (320px + 3em)) / (3))) * 1); float: left; margin-right: -100%; margin-left: -webkit-calc(0.5em + (320px + 1em)); margin-left: calc(0.5em + (320px + 1em)); height: 75vh; } } .two { -sgs-span-settings: ("span": 1, "location": 2, "grid": 1 2 1, "gutter": 0.3333333333, "style": "split", "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null))); width: 40%; float: left; margin-right: -100%; margin-left: 30%; clear: none; background: rgba(0, 128, 0, 0.5); } @media (min-width: 500px) and (orientation: portrait) { .two { -sgs-span-settings: ("span": 1, "location": 1, "grid": 320px 1 2, "gutter": 1em, "style": "split", "start row": true, "end row": false, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null))); width: 320px; float: left; margin-right: -100%; margin-left: 0.5em; } } .three { -sgs-span-settings: ("span": 1, "location": 3, "grid": 1 2 1, "gutter": 0.3333333333, "style": "split", "start row": false, "end row": true, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null))); width: 20%; float: right; margin-left: 0; margin-right: 3.3333333333%; clear: none; background: rgba(0, 0, 255, 0.5); } @media (min-width: 500px) and (orientation: portrait) { .three { -sgs-span-settings: ("span": 1, "location": 3, "grid": 320px 1 2, "gutter": 1em, "style": "split", "start row": false, "end row": true, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null))); width: -webkit-calc((((100% - (320px + 3em)) / (3))) * 2); width: calc((((100% - (320px + 3em)) / (3))) * 2); float: right; margin-left: 0; margin-right: 0.5em; } } 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,5 @@ <div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div>