Created
January 26, 2015 16:55
-
-
Save richardbutler/fa330ccb3b156874ba54 to your computer and use it in GitHub Desktop.
Bricks grid system
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
| $numbers: one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen; | |
| $i: 0; | |
| .brick { | |
| background: rgba(255, 255, 255, 0.5); //rgba(0, 0, 0, 0.1); | |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
| box-sizing: border-box; | |
| float: left; | |
| height: 50px; | |
| margin-left: $brick-gap; | |
| margin-bottom: $brick-gap; | |
| @each $n in $numbers { | |
| $i: $i + 1; | |
| &.#{$n} { | |
| @include bricks($i); | |
| } | |
| } | |
| .brick { | |
| box-shadow: none; | |
| } | |
| } | |
| .bricks { | |
| @extend .brick; | |
| } |
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
| .building { | |
| //background: #f0f0f0; | |
| margin: auto; | |
| position: relative; | |
| width: map-get($sizes, xs); | |
| } | |
| .scaffold { | |
| border-right: 1px solid rgba(255, 255, 255, 0.75); | |
| box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| min-height: 300px; | |
| } | |
| @each $size, $px in $sizes { | |
| @media screen and (min-width: $px) { | |
| .building { | |
| width: $px; | |
| } | |
| } | |
| .scaffold.#{$size} { | |
| width: $px - 1; | |
| } | |
| } |
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
| body { | |
| background: #f0f0f0; | |
| margin: 0; | |
| } |
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
| //-------------------------------------------------------------------------- | |
| // | |
| // Tile sizing | |
| // | |
| //-------------------------------------------------------------------------- | |
| $brick-count: 16; | |
| $brick-width: 62px; // 68px; | |
| $brick-gap: 16px; // 12px; | |
| $half-brick-gap: $brick-gap / 2; | |
| //-------------------------------------------------------------------------- | |
| // | |
| // Sizing functions | |
| // | |
| //-------------------------------------------------------------------------- | |
| @function brick-width ($cols) { | |
| @return $cols * ($brick-width + $brick-gap) - $brick-gap; | |
| } | |
| @mixin bricks ($cols) { | |
| width: brick-width($cols); | |
| } | |
| // ------------------------------------- | |
| // Sizes: XS S M L XL | |
| // ------------------------------------- | |
| // 320 480 768 1024 1280 | |
| // 320 480 640 960 1280 | |
| @function size ($base) { | |
| $i: 0; | |
| $px: 0; | |
| @while $px < $base { | |
| $i: $i + 2; | |
| $px: brick-width($i); | |
| } | |
| @return brick-width($i - 2); | |
| } | |
| $sizes: ( | |
| xs: size(320px), | |
| s: size(480px), | |
| m: size(640px), | |
| l: size(1024px), | |
| xl: size(1280px) | |
| ); |
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
| .wall { | |
| margin-left: -$brick-gap; | |
| overflow: auto; | |
| } |
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
| @import 'bricks/variables'; | |
| @import 'bricks/grid'; | |
| @import 'bricks/building'; | |
| @import 'bricks/wall'; | |
| @import 'bricks/brick'; |
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> | |
| <head> | |
| <title></title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
| <link rel="stylesheet" href="css/bricks.css"> | |
| </head> | |
| <body> | |
| <div class="building"> | |
| <div class="wall"> | |
| <div class="four bricks"></div> | |
| <div class="one brick"></div> | |
| <div class="three bricks"></div> | |
| <div class="four bricks"> | |
| <div class="wall"> | |
| <div class="two bricks"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| </div> | |
| </div> | |
| <div class="two brick"></div> | |
| <div class="two brick"></div> | |
| </div> | |
| <div class="wall"> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| <div class="one brick"></div> | |
| </div> | |
| <div class="scaffold xs"></div> | |
| <div class="scaffold s"></div> | |
| <div class="scaffold m"></div> | |
| <div class="scaffold l"></div> | |
| <div class="scaffold xl"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment