Created
October 23, 2014 18:59
-
-
Save mannieschumpert/515ef5f52b8289e7c52d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
| <div class="container"> | |
| <div class="small"> | |
| Small | |
| </div> | |
| <div class="large"> | |
| Large | |
| </div> | |
| <div class="tiny"> | |
| Tiny | |
| </div> | |
| <div class="medium"> | |
| Medium | |
| </div> | |
| </div> |
This file contains 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.6) | |
| // Compass (v1.0.1) | |
| // Breakpoint (v2.5.0) | |
| // Susy (v2.1.3) | |
| // ---- | |
| @import "breakpoint"; | |
| @import "susy"; | |
| $susy: ( | |
| gutters: .0618, | |
| debug: ( | |
| image: show, | |
| color: rgba(orange,.1), | |
| output: background | |
| ) | |
| ); | |
| $small: ( | |
| columns: 1 1.618, | |
| container: 100% | |
| ); | |
| $medium: ( | |
| columns: 1 1.618 1 1.618, | |
| container: 100%, | |
| output: isolate | |
| ); | |
| $large: ( | |
| columns: 1 2.618 0.618 1.618, | |
| container: 1200px, | |
| output: isolate, | |
| ); | |
| @include layout($small); | |
| div { | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| @include container; | |
| @include show-grid; | |
| @include susy-breakpoint(720px, $medium) { | |
| @include show-grid; | |
| } | |
| @include susy-breakpoint(1200px, $large) { | |
| @include show-grid; | |
| } | |
| min-height: 96vh; | |
| font-size: 2em; | |
| div { | |
| padding: .5em; | |
| text-align: center; | |
| } | |
| } | |
| .small { | |
| @include span(1 first); | |
| @include susy-breakpoint(720px, $medium) { | |
| @include span(1 at 1); | |
| } | |
| @include susy-breakpoint(1200px, $large) { | |
| @include span(1 at 1); | |
| } | |
| } | |
| .large { | |
| @include span(1 last); | |
| @include susy-breakpoint(720px, $medium) { | |
| @include span(1 at 2); | |
| } | |
| @include susy-breakpoint(1200px, $large) { | |
| @include span(1 at 2); | |
| } | |
| } | |
| .tiny { | |
| @include span(1 first); | |
| @include susy-breakpoint(720px, $medium) { | |
| @include span(1 at 3); | |
| } | |
| @include susy-breakpoint(1200px, $large) { | |
| @include span(1 at 3); | |
| } | |
| } | |
| .medium { | |
| @include span(1 last); | |
| @include susy-breakpoint(720px, $medium) { | |
| @include span(1 at 4); | |
| } | |
| @include susy-breakpoint(1200px, $large) { | |
| @include span(1 at 4); | |
| } | |
| } |
This file contains 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
| div { | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| max-width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 37.31622%, transparent 37.31622%, transparent 39.62236%, rgba(255, 165, 0, 0.1) 39.62236%, rgba(255, 192, 77, 0.1)); | |
| background-origin: content-box; | |
| background-clip: content-box; | |
| background-position: left top; | |
| background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 37.31622%, transparent 37.31622%, transparent 39.62236%, rgba(255, 165, 0, 0.1) 39.62236%, rgba(255, 192, 77, 0.1)); | |
| background-origin: content-box; | |
| background-clip: content-box; | |
| background-position: left top; | |
| min-height: 96vh; | |
| font-size: 2em; | |
| } | |
| .container:after { | |
| content: " "; | |
| display: block; | |
| clear: both; | |
| } | |
| @media (min-width: 720px) { | |
| .container { | |
| background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 18.44542%, transparent 18.44542%, transparent 19.58535%, rgba(255, 165, 0, 0.1) 19.58535%, rgba(255, 192, 77, 0.1) 49.43004%, transparent 49.43004%, transparent 50.56996%, rgba(255, 165, 0, 0.1) 50.56996%, rgba(255, 192, 77, 0.1) 69.01538%, transparent 69.01538%, transparent 70.15531%, rgba(255, 165, 0, 0.1) 70.15531%, rgba(255, 192, 77, 0.1)); | |
| background-origin: content-box; | |
| background-clip: content-box; | |
| background-position: left top; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .container { | |
| background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 16.55794%, transparent 16.55794%, transparent 17.58122%, rgba(255, 165, 0, 0.1) 17.58122%, rgba(255, 192, 77, 0.1) 60.92989%, transparent 60.92989%, transparent 61.95317%, rgba(255, 165, 0, 0.1) 61.95317%, rgba(255, 192, 77, 0.1) 72.18598%, transparent 72.18598%, transparent 73.20926%, rgba(255, 165, 0, 0.1) 73.20926%, rgba(255, 192, 77, 0.1)); | |
| background-origin: content-box; | |
| background-clip: content-box; | |
| background-position: left top; | |
| } | |
| } | |
| .container div { | |
| padding: .5em; | |
| text-align: center; | |
| } | |
| .small { | |
| width: 37.31622%; | |
| float: left; | |
| margin-right: 2.30614%; | |
| } | |
| @media (min-width: 720px) { | |
| .small { | |
| width: 18.44542%; | |
| float: left; | |
| margin-left: 0; | |
| margin-right: -100%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .small { | |
| width: 16.55794%; | |
| float: left; | |
| margin-left: 0; | |
| margin-right: -100%; | |
| } | |
| } | |
| .large { | |
| width: 60.37764%; | |
| float: right; | |
| margin-right: 0; | |
| } | |
| @media (min-width: 720px) { | |
| .large { | |
| width: 29.84469%; | |
| float: left; | |
| margin-left: 19.58535%; | |
| margin-right: -100%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .large { | |
| width: 43.34868%; | |
| float: left; | |
| margin-left: 17.58122%; | |
| margin-right: -100%; | |
| } | |
| } | |
| .tiny { | |
| width: 37.31622%; | |
| float: left; | |
| margin-right: 2.30614%; | |
| } | |
| @media (min-width: 720px) { | |
| .tiny { | |
| width: 18.44542%; | |
| float: left; | |
| margin-left: 50.56996%; | |
| margin-right: -100%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .tiny { | |
| width: 10.2328%; | |
| float: left; | |
| margin-left: 61.95317%; | |
| margin-right: -100%; | |
| } | |
| } | |
| .medium { | |
| width: 60.37764%; | |
| float: right; | |
| margin-right: 0; | |
| } | |
| @media (min-width: 720px) { | |
| .medium { | |
| width: 29.84469%; | |
| float: left; | |
| margin-left: 70.15531%; | |
| margin-right: -100%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .medium { | |
| width: 26.79074%; | |
| float: left; | |
| margin-left: 73.20926%; | |
| margin-right: -100%; | |
| } | |
| } |
This file contains 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
| <div class="container"> | |
| <div class="small"> | |
| Small | |
| </div> | |
| <div class="large"> | |
| Large | |
| </div> | |
| <div class="tiny"> | |
| Tiny | |
| </div> | |
| <div class="medium"> | |
| Medium | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment