Created
November 26, 2012 04:05
-
-
Save lesjames/4146557 to your computer and use it in GitHub Desktop.
A CodePen by Les James. Breakpoint Demo
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="wrapper"> | |
| <div class="grid"> | |
| <div class="grid-cell main"> | |
| <h2>A Big Piece of Garbage</h2> | |
| <p>You mean while I'm sleeping in it? And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! Bender, you risked your life to save me!</p> | |
| <h3>Leela's Homeworld</h3> | |
| <p>No! The cat shelter's on to me. Good news, everyone! I've taught the toaster to feel love! Would you censor the Venus de Venus just because you can see her spewers? Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain.</p> | |
| </div> | |
| <div class="grid-cell sidebar"> | |
| <h2>Kif Gets Knocked Up A Notch</h2> | |
| <p>Our love isn't any different from yours, except it's hotter, because I'm involved. Hey! I'm a porno-dealing monster, what do I care what you think? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? I barely knew Philip, but as a clergyman I have no problem telling his most intimate friends all about him. Throw her in the brig.</p> | |
| </div> | |
| </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
| @import "compass"; | |
| /* grid column size variables */ | |
| $grid-column: 60px; | |
| $grid-gutter: 20px; | |
| /* convert pixels to ems */ | |
| @function em($px, $base: $base-font-size) { | |
| @return ($px / $base) * 1em; | |
| } | |
| /* Grid based on https://github.com/necolas/griddle by Nicolas Gallagher (@necolas) */ | |
| .wrapper { | |
| margin-left: auto; margin-right: auto; | |
| padding-left: em($grid-gutter); | |
| padding-right: em($grid-gutter); | |
| } | |
| .grid { | |
| display: block; | |
| padding: 0; | |
| margin: 0 -0.5 * em($grid-gutter); | |
| text-align: left; | |
| letter-spacing: -0.31em; | |
| word-spacing: -0.43em; | |
| text-rendering: optimizespeed; | |
| } | |
| .grid-cell { | |
| width: 100%; | |
| @include inline-block; | |
| @include box-sizing(border-box); | |
| margin: 0; | |
| padding: 0 0.5 * em($grid-gutter); | |
| vertical-align: top; | |
| text-align: left; | |
| letter-spacing: normal; | |
| word-spacing: normal; | |
| text-rendering: auto; | |
| } | |
| /* find width of columns */ | |
| @function fixed($col) { | |
| @return $col * em($grid-column + $grid-gutter) | |
| } | |
| /* create mq to fit columns */ | |
| @mixin breakpoint($min) { | |
| @media (min-width: fixed($min) + em($grid-gutter)) { | |
| /* create a fixed width centered layout */ | |
| .wrapper { | |
| width: fixed($min) - em($grid-gutter); | |
| margin-left: auto; margin-right: auto; | |
| } | |
| /* css gradient overlay to help visualize columns */ | |
| body::after { | |
| content: ''; position: fixed; top: 0; bottom: 0; pointer-events: none; left: 50%; | |
| width: fixed($min) + em($grid-gutter); margin-left: fixed($min) / -2 - (em($grid-gutter)/2); | |
| @include background(linear-gradient(left, transparent $grid-gutter, transparentize(red, .8) $grid-gutter, transparentize(red, .8) $grid-gutter + $grid-column)); | |
| @include background-size($grid-gutter + $grid-column); | |
| } | |
| /* sass content block variable */ | |
| @content | |
| } | |
| } | |
| /* create layouts */ | |
| @include breakpoint(5) {} | |
| @include breakpoint(8) { | |
| .main { width: fixed(5); } | |
| .sidebar { width: fixed(3); } | |
| } | |
| @include breakpoint(12) { | |
| .main { width: fixed(8); } | |
| .sidebar { width: fixed(4); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment