-
-
Save xtrasmal/5652203 to your computer and use it in GitHub Desktop.
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Grid test</title> | |
| <link rel="stylesheet" href="css/example.css"> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="nav"> | |
| Some nav would go here | |
| </div> | |
| <div id="content"> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </div> | |
| <div id="sidebar"> | |
| This is the sidebar | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| ///// FRAMEWORK IMPORT ///// | |
| @import ../../framework/css/_core.sass // Just imports a few simple mixins and my grids file, below | |
| $base-font-size: 14px | |
| $base-line-height: 1.428em | |
| body | |
| background-color: #dfdfdf | |
| font-size: $base-font-size | |
| line-height: $base-line-height | |
| // First, the mobile layout (no columns) | |
| #wrapper | |
| +container | |
| #nav | |
| background-color: #333 | |
| color: #fff | |
| #content | |
| background-color: #fff | |
| #sidebar | |
| background-color: #ccc | |
| // When we get to a certain width, adjust the layout a bit | |
| @media only screen and (min-width: 480px) | |
| #content | |
| +column(6) | |
| #sidebar | |
| +column(4) | |
| // When we get to even wider, adjust it some more | |
| @media only screen and (min-width: 600px) | |
| #nav | |
| +column(2) | |
| #content | |
| +column(5) | |
| #sidebar | |
| +column(3) |
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
| // Settings | |
| $grid-columns: 10 !default | |
| $grid-column-width: 120 !default | |
| $grid-gutter-width: $base-line-height !default | |
| // You shouldn't need to touch anything below here | |
| @function column-width($span, $column-width:$grid-column-width) | |
| @return $span * $column-width | |
| @function percent-width($target, $context) | |
| @return ($target / $context) * 100% | |
| $grid-width: ($grid-columns * $grid-column-width) | |
| $grid-gutter-width-pixels: $grid-gutter-width * 1px | |
| =container($span:$grid-columns) | |
| +clearfix // Your typical clearfix mixin | |
| +centered // Just applies margin: 0 auto | |
| max-width: ($grid-column-width * $span) * 1px | |
| =span($span, $context:$grid-columns) | |
| +box-sizing(border-box) | |
| width: percent-width(column-width($span, $grid-column-width), column-width($context, $grid-column-width)) | |
| =column($span, $context:$grid-columns) | |
| +span($span, $context) | |
| float: left | |
| padding-right: $grid-gutter-width / 2 | |
| padding-left: $grid-gutter-width / 2 | |
| =box($span, $context:$grid-columns, $screen-color:transparent, $padding-multiplier:.5) | |
| +column($span, $context) | |
| border: $grid-gutter-width * $padding-multiplier | |
| border-style: solid | |
| border-color: $screen-color | |
| background-color: $screen-color | |
| =prepend($span, $context:$grid-columns) | |
| padding-left: percent-width(column-width($span, $grid-column-width), column-width($context, $grid-column-width)) | |
| =append($span, $context:$grid-columns) | |
| padding-right: percent-width(column-width($span, $grid-column-width), column-width($context, $grid-column-width)) | |
| =first | |
| padding-left: 0 !important | |
| =last | |
| padding-right: 0 !important |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment