Last active
October 18, 2023 13:27
-
-
Save hatefulcrawdad/4497801 to your computer and use it in GitHub Desktop.
Our mobile first grid mixins for Foundation 4.0. Comments welcome.
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" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>Foundation Semantic Grid Testing</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <nav> | |
| <img src="http://placehold.it/300x100"> | |
| <ul> | |
| <li>Links</li> | |
| </ul> | |
| </nav> | |
| <section id="hero"> | |
| <div class="news"> | |
| <img src="http://placehold.it/330x300"> | |
| <p>News</p> | |
| </div> | |
| <div class="latest"> | |
| <img src="http://placehold.it/330x300"> | |
| <p>Latest</p> | |
| </div> | |
| <div class="promo"> | |
| <img src="http://placehold.it/330x300"> | |
| <p>Promos</p> | |
| </div> | |
| </section> | |
| <ul id="logos"> | |
| <li><img src="http://placehold.it/300x300"></li> | |
| <li><img src="http://placehold.it/300x300"></li> | |
| <li><img src="http://placehold.it/300x300"></li> | |
| <li><img src="http://placehold.it/300x300"></li> | |
| <li><img src="http://placehold.it/300x300"></li> | |
| <li><img src="http://placehold.it/300x300"></li> | |
| </ul> | |
| <section id="callUs"> | |
| <a href="#">1.800.888.1243</a> | |
| </section> | |
| </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
| * { box-sizing: border-box; } | |
| body { margin: 0; padding: 0; background: white; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 16px; line-height: 1.5; color: #222222; position: relative; -webkit-font-smoothing: antialiased; } | |
| ul { margin: 0; padding: 0; } | |
| img { max-width: 100%; height: auto; display: block; } | |
| p { margin-top: 0; } | |
| // Clearfix mixin | |
| @mixin clearfix() { *zoom:1; | |
| &:before, &:after { content: " "; display: table; } | |
| &:after { clear: both; } | |
| } | |
| // Grid Calculation for Percentages | |
| @function gridCalc($colNumber, $totalColumns) { | |
| @return percentage(($colNumber / $totalColumns)); | |
| } | |
| // Function for calculating em values | |
| @function emCalc($pxWidth) { | |
| @return ($pxWidth / $emBase) + em; | |
| } | |
| // Variables pertaining to Grid | |
| $emBase: 16px !default; | |
| $rowWidth: 62.5em !default; // 1000px / 16px = 62.5em | |
| $columnGutter: 1.875em !default; // 30px / 16px = 1.875em | |
| $totalColumns: 12 !default; | |
| $defaultFloat: left !default; | |
| $defaultOpposite: right !default; | |
| // Media Queries | |
| $largeScreen: emCalc(768px) !default; | |
| $smallScreen: emCalc(767px) !default; | |
| $smallBreakPoint: "only screen and (max-width:"#{$smallScreen}")" !default; | |
| $largeBreakPoint: "only screen and (min-width:"#{$largeScreen}")" !default; | |
| // | |
| // Semantic Grid | |
| // | |
| // For creating container, nested, and collapsed rows. | |
| @mixin gridRow($behavior: false) { | |
| // use @include gridRow(nest); to include a nested row | |
| @if $behavior == nest { | |
| width: auto; | |
| margin: 0 (-($columnGutter/2)); | |
| max-width: none; | |
| } | |
| // use @include gridRow(collapse); to collapsed a container row margins | |
| @else if $behavior == collapse { | |
| width: 100%; | |
| margin: 0; | |
| max-width: $rowWidth; | |
| } | |
| // use @include gridRow(nest-collapse); to collapse outer margins on a nested row | |
| @else if $behavior == nest-collapse { | |
| width: auto; | |
| margin: 0; | |
| max-width: none; | |
| } | |
| // use @include gridRow(); to use a container row | |
| @else { | |
| width: 100%; | |
| margin: 0 auto; | |
| max-width: $rowWidth; | |
| } | |
| // Clearfix for all rows | |
| @include clearfix(); | |
| } | |
| // For creating columns - @include these inside a media query to control small vs. large grid layouts | |
| @mixin gridCol($columns:false, $lastCol:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false) { | |
| // Default positioning | |
| position: relative; | |
| // Gutter padding whenever a column isn't set to collapse | |
| @if $collapse == false { | |
| padding-left: $columnGutter / 2; | |
| padding-right: $columnGutter / 2; | |
| } | |
| // If a column number is given, calculate width | |
| @if $columns { | |
| width: gridCalc($columns, $totalColumns); | |
| // If last column, float naturally instead of to the right | |
| @if $lastCol { float: $defaultOpposite; } | |
| // If centered, get rid of float and add appropriate margins | |
| @else if $center { float: none !important; margin: 0 auto; } | |
| // If offset, calculate appropriate margins | |
| @else if $offset { margin-#{$defaultFloat}: gridCalc($offset, $totalColumns); } | |
| // if collapsed, get rid of gutter padding | |
| @else if $collapse { padding-left: 0; padding-right: 0; } | |
| // Source Ordering, adds left/right depending on which you use. | |
| @else if $push { #{$defaultFloat}: gridCalc($push, $totalColumns); #{$defaultOpposite}: auto; } | |
| @else if $pull { #{$defaultOpposite}: gridCalc($pull, $totalColumns); #{$defaultFloat}: auto; } | |
| // default float for columns | |
| @else { float: $defaultFloat; } | |
| } | |
| // Mobile first columns | |
| @else { | |
| float: none; | |
| width: 100%; | |
| } | |
| } | |
| // Mobile First Styles | |
| nav, | |
| #hero, | |
| #logos, | |
| #callUs { | |
| @include gridRow; | |
| } | |
| nav { | |
| margin-bottom: 30px; | |
| img { | |
| @include gridCol; | |
| text-align: center; | |
| } | |
| ul { | |
| @include gridCol; | |
| list-style: none; | |
| li { background: #eee; } | |
| } | |
| } | |
| #hero { | |
| .news, .latest, .promo { | |
| @include gridCol; | |
| } | |
| } | |
| #logos { | |
| list-style: none; | |
| li { @include gridCol; } | |
| } | |
| #callUs { | |
| text-align: center; | |
| margin-top: 40px; | |
| a { @include gridCol; } | |
| } | |
| // Small Screens that support media queries | |
| @media #{$smallBreakPoint} { | |
| #hero { | |
| .news, .latest{ | |
| @include gridCol($columns:4); | |
| } | |
| .promo { | |
| @include gridCol; | |
| } | |
| } | |
| #logos li { | |
| @include gridCol($columns:2); | |
| } | |
| } | |
| // Large Screens that support media queries | |
| @media #{$largeBreakPoint} { | |
| nav { | |
| img { | |
| @include gridCol($columns:3); | |
| } | |
| ul { | |
| @include gridCol($columns:9); | |
| } | |
| } | |
| #hero { | |
| .news, .latest, .promo { | |
| @include gridCol($columns:4); | |
| } | |
| } | |
| #logos li { | |
| @include gridCol($columns:2); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have some questions about the semantic-grid approach in general, detailed here: foundation/foundation-sites#3049