Last active
October 1, 2015 09:42
-
-
Save conormcafee/00d22aaad2b9c17ae295 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
| // Define Max-Width & Margin | |
| $max-width: 1200px; | |
| $gutter: 50px; | |
| $padding: 50px; | |
| // Margin Percentage | |
| $gutter-p: percentage($gutter / $max-width); | |
| $padding-p: percentage($padding / $max-width); | |
| $grid: ( | |
| full: $max-width, | |
| half: (($max-width - ((1) * $gutter)) / 2), | |
| third: (($max-width - ((2) * $gutter)) / 3), | |
| quarter: (($max-width - ((3) * $gutter)) / 4), | |
| fifth: (($max-width - ((4) * $gutter)) / 5), | |
| sixth: (($max-width - ((5) * $gutter)) / 6), | |
| //seven-col: (($max-width - ((6) * $gutter)) / 7), | |
| //eight-col: (($max-width - ((7) * $gutter)) / 8), | |
| //nine-col: (($max-width - ((8) * $gutter)) / 9), | |
| //ten-col: (($max-width - ((9) * $gutter)) / 10), | |
| //eleven-col: (($max-width - ((10) * $gutter)) / 11), | |
| //twelve-col: (($max-width - ((11) * $gutter)) / 12) | |
| ); | |
| @function columns($key) { | |
| @if map-has-key($grid, $key) { | |
| @return map-get($grid, $key); | |
| } | |
| } | |
| @mixin grid-no-gutter($args1) { | |
| width: percentage(columns($args1) / $max-width); | |
| } | |
| @mixin grid($args1) { | |
| width: percentage(columns($args1) / $max-width); | |
| margin-right: $gutter-p; | |
| } |
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
| <!doctype html> | |
| <html class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>Lookbook</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="apple-touch-icon" href="apple-touch-icon.png"> | |
| <!-- Place favicon.ico in the root directory --> | |
| <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,600' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="css/main.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <!-- One Col --> | |
| <div class="col one-col"> | |
| <p>1/1</p> | |
| </div> | |
| <!-- End One Col --> | |
| <!-- Two Col --> | |
| <div class="col two-col"> | |
| <p>1/2</p> | |
| </div> | |
| <div class="col two-col-ng"> | |
| <p>1/2</p> | |
| </div> | |
| <!-- End Two Col --> | |
| <!-- Three Col --> | |
| <div class="col three-col"> | |
| <p>1/3</p> | |
| </div> | |
| <div class="col three-col"> | |
| <p>1/3</p> | |
| </div> | |
| <div class="col three-col-ng"> | |
| <p>1/3</p> | |
| </div> | |
| <!-- End Three Col --> | |
| <!-- Four Col --> | |
| <div class="col four-col"> | |
| <p>1/4</p> | |
| </div> | |
| <div class="col four-col"> | |
| <p>1/4</p> | |
| </div> | |
| <div class="col four-col"> | |
| <p>1/4</p> | |
| </div> | |
| <div class="col four-col-ng"> | |
| <p>1/4</p> | |
| </div> | |
| <!-- End Four Col --> | |
| <!-- Five Col --> | |
| <div class="col five-col"> | |
| <p>1/5</p> | |
| </div> | |
| <div class="col five-col"> | |
| <p>1/5</p> | |
| </div> | |
| <div class="col five-col"> | |
| <p>1/5</p> | |
| </div> | |
| <div class="col five-col"> | |
| <p>1/5</p> | |
| </div> | |
| <div class="col five-col-ng"> | |
| <p>1/5</p> | |
| </div> | |
| <!-- End Five Col --> | |
| <!-- Six Col --> | |
| <div class="col six-col"> | |
| <p>1/6</p> | |
| </div> | |
| <div class="col six-col"> | |
| <p>1/6</p> | |
| </div> | |
| <div class="col six-col"> | |
| <p>1/6</p> | |
| </div> | |
| <div class="col six-col"> | |
| <p>1/6</p> | |
| </div> | |
| <div class="col six-col"> | |
| <p>1/6</p> | |
| </div> | |
| <div class="col six-col-ng"> | |
| <p>1/6</p> | |
| </div> | |
| <!-- End Six Col --> | |
| </div> | |
| </body> | |
| </html> |
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 'grid'; | |
| body { | |
| background-color: #f6f6f6; | |
| } | |
| .wrapper { | |
| @include grid-no-gutter(full); | |
| display: block; | |
| max-width: $max-width; | |
| background-color: #ffffff; | |
| border: 1px solid #e6e6e6; | |
| margin: 30px auto; | |
| padding: $padding-p; | |
| overflow: hidden; | |
| } | |
| .col { | |
| display: block; | |
| background-color: #f6f6f6; | |
| height: 100px; | |
| line-height: 100px; | |
| text-align: center; | |
| margin-bottom: $gutter-p; | |
| } | |
| .one-col { | |
| @include grid-no-gutter(full); | |
| } | |
| .two-col { | |
| @include grid(half); | |
| float: left; | |
| &-ng { | |
| @include grid-no-gutter(half); | |
| float: left; | |
| } | |
| } | |
| .three-col { | |
| @include grid(third); | |
| float: left; | |
| &-ng { | |
| @include grid-no-gutter(third); | |
| float: left; | |
| } | |
| } | |
| .four-col { | |
| @include grid(quarter); | |
| float: left; | |
| &-ng { | |
| @include grid-no-gutter(quarter); | |
| float: left; | |
| } | |
| } | |
| .five-col { | |
| @include grid(fifth); | |
| float: left; | |
| &-ng { | |
| @include grid-no-gutter(fifth); | |
| float: left; | |
| } | |
| } | |
| .six-col { | |
| @include grid(sixth); | |
| float: left; | |
| &-ng { | |
| @include grid-no-gutter(sixth); | |
| float: left; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment