-
-
Save gregone/4298802 to your computer and use it in GitHub Desktop.
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 lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Foundation 4 Grid Test</title> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
</head> | |
<body> | |
<!-- Disregard these styles, they are for giving rows and columns a temporary BG color for better visibility --> | |
<style type="text/css"> | |
.row.display { | |
background: #eee; | |
margin-bottom: 10px; | |
} | |
.row.display > div, .row.display > div, .block-grid li { | |
background: #ccc; | |
min-height: 50px; | |
} | |
h5 { margin-bottom: 0; } | |
h5 small { font-size: 10px; color: black; } | |
</style> | |
<!-- Test Grid HTML --> | |
<!-- block on small, Using only large grid --> | |
<div class="row display"> | |
<div class="large-4">Large 4</div> | |
<div class="large-4">Large 4</div> | |
<div class="large-4">Large 4</div> | |
</div> | |
<!-- block on small, large with offset --> | |
<div class="row display"> | |
<div class="large-4">Large 4</div> | |
<div class="large-6 large-offset-2">Large 6, Large Offset 2</div> | |
</div> | |
<!-- block on small, large with push/pull --> | |
<div class="row display"> | |
<div class="large-4 large-push-8">Large 4, Large Push 8</div> | |
<div class="large-8 large-pull-4">Large 8, Large Pull 4</div> | |
</div> | |
<!-- block on small, large centered --> | |
<div class="row display"> | |
<div class="large-4 large-centered">Large 4 Center</div> | |
</div> | |
<!-- small grid and large grid normal --> | |
<div class="row display"> | |
<div class="small-4 large-4">Small 4, Large 4</div> | |
<div class="small-4 large-4">Small 4, Large 4</div> | |
<div class="small-4 large-4">Small 4, Large 4</div> | |
</div> | |
<!-- small grid with offset, normal large grid --> | |
<div class="row display"> | |
<div class="small-2 large-2">Small 2, Large 2</div> | |
<div class="small-2 large-2">Small 2, Large 2</div> | |
<div class="small-6 small-offset-2 large-6 end">Small 6, Small Offset 6, Large 6</div> | |
</div> | |
<!-- small grid with push/pull, normal large grid --> | |
<div class="row display"> | |
<div class="small-4 small-push-8 large-4">Small 4, Small Push 8, Large 4</div> | |
<div class="small-8 small-pull-4 large-8">Small 8, Small Pull 4, Large 8</div> | |
</div> | |
<!-- small grid with center, normal large grid --> | |
<div class="row display"> | |
<div class="small-4 small-centered large-12">Small 4 Center, Large 12</div> | |
</div> | |
<!-- normal small grid, large with offset --> | |
<div class="row display"> | |
<div class="small-4 large-4">Small4, Large 4</div> | |
<div class="small-8 large-6 large-offset-2">Small8, Large 6, Large Offset 2</div> | |
</div> | |
<!-- normal small grid, large with push/pull --> | |
<div class="row display"> | |
<div class="small-4 large-4 large-push-8 ">Small 4, Large 4, Large Push 8</div> | |
<div class="small-8 large-8 large-pull-4 ">Small 8, Large 8, Large Pull 4</div> | |
</div> | |
<!-- small with offset, large with offset --> | |
<div class="row display"> | |
<div class="small-4 large-4">Small 4, Large 4</div> | |
<div class="small-6 small-offset-2 large-6 large-offset-2">Small 6 Offset 2, Large 6 Offset 2</div> | |
</div> | |
<!-- small with push/pull, large with push/pull --> | |
<div class="row display"> | |
<div class="small-8 small-push-4 large-4 large-push-8">Small 8 Push 4, Large 4 Push 8</div> | |
<div class="small-4 small-pull-8 large-8 large-pull-4">Small 4 Pull 8, Large 8 Pull 4</div> | |
</div> | |
<!-- small with center, large with center --> | |
<div class="row display"> | |
<div class="small-8 small-centered large-4 large-centered">Small 8 and Large 4 centered</div> | |
</div> | |
<!-- small block, small block with nested small grid, large grid (4+4+4 > 12,6+6) --> | |
<div class="row display"> | |
<div class="large-4">Large 4</div> | |
<div class="large-8"> | |
<div class="row"> | |
<div class="small-6 large-6">Nested 6</div> | |
<div class="small-6 large-6">Nested 6</div> | |
</div> | |
</div> | |
</div> | |
<!-- Mixed Nesting Example --> | |
<div class="row display"> | |
<div class="small-8 large-4"> | |
<div class="row"> | |
<div class="small-6 large-6"> | |
<div class="row"> <!-- Superfluous - This is a semantic.gs problem I can't figure out --> | |
<div class="small-6 large-6">Deep</div> | |
<div class="small-6 large-6">Deep</div> | |
</div> | |
</div> | |
<div class="small-6 large-6">Nested 6</div> | |
</div> | |
</div> | |
<div class="small-4 large-8">Large 8</div> | |
</div> | |
<!-- small grid block, large grid nested --> | |
<div class="row display"> | |
<div class="large-8"> | |
<div class="row"> | |
<div class="large-6">Nested 6</div> | |
<div class="large-6">Nested 6</div> | |
</div> | |
</div> | |
<div class="large-4">Large 4</div> | |
</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
* { | |
box-sizing: border-box; | |
} | |
div { | |
text-align: center; | |
line-height: 50px; | |
box-shadow: inset 0 0 15px 0 #555; | |
} | |
// 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; | |
$mobileBreakPoint: 768px !default; | |
// Grid Calculation for Percentages | |
@function gridCalc($colNumber, $totalColumns) { | |
@return percentage(($colNumber / $totalColumns)); | |
} | |
// Function for calculating em values | |
@function emCalc($pxWidth) { | |
@return ($pxWidth / $emBase) + em; | |
} | |
/* The Grid */ | |
/* -------- */ | |
/* Row styles: default, nested, collapse, centered */ | |
// Default Rows | |
.row { | |
width: 100%; | |
margin: 0 auto; | |
max-width: $rowWidth; | |
// Nested Rows | |
.row { | |
width: auto; | |
max-width: none; | |
min-width: 0; | |
margin: 0 (-($columnGutter/2)); | |
} | |
// Collapsed row, remove margin | |
.row.collapse { margin: 0; } | |
// Clearfix for Rows - had to use literal because the import wasn't working, suppose I need compass | |
overflow: hidden; | |
*zoom: 1; | |
} | |
/* Make sure images don't break the grid */ | |
img, | |
object, | |
embed { max-width: 100%; height: auto; } | |
object, | |
embed { height: 100%; } | |
img { -ms-interpolation-mode: bicubic; } | |
#map_canvas, | |
.map_canvas { | |
img, | |
embed, | |
object { max-width: none !important; | |
} | |
} | |
/* Mobile Grid for small devices that can handle media queries */ | |
@media only screen and (max-width: emCalc($mobileBreakPoint -1)) { | |
/* Shared column styles */ | |
.row { | |
[class*="small-"] { | |
float: $defaultFloat; | |
padding: 0 $columnGutter / 2; | |
position: relative; | |
} | |
[class*="large-"] { padding: 0 $columnGutter / 2; } | |
&.collapse { | |
[class*="small-"] { padding: 0; } | |
} | |
} | |
/* Floating for default last columns and overriding with .end class */ | |
[class*="small-"]:last-child { float: $defaultOpposite; } | |
[class~="end"] { float: $defaultFloat; } | |
/* Centered small columns */ | |
.small-centered { float: none !important; margin: 0 auto; } | |
/* Small column widths */ | |
@for $i from 1 through $totalColumns { | |
.row .small#{-$i} { width: gridCalc($i, $totalColumns); } | |
} | |
/* Offset columns */ | |
@for $i from 1 through $totalColumns - 2 { | |
.row .small-offset-#{$i} { margin-#{$defaultFloat}: gridCalc($i, $totalColumns); } | |
} | |
/* Push/Pull columns */ | |
@for $i from 2 through $totalColumns - 2 { | |
.small-push#{-$i} { #{$defaultFloat}: gridCalc($i, $totalColumns); } | |
.small-pull#{-$i} { #{$defaultOpposite}: gridCalc($i, $totalColumns); } | |
} | |
} | |
/* Styles for screens that are atleast 768px; */ | |
@media only screen and (min-width: emCalc($mobileBreakPoint)) { | |
/* Shared column styles */ | |
.row { | |
[class*="large-"] { | |
float: $defaultFloat; | |
padding: 0 $columnGutter / 2; | |
position: relative; | |
} | |
&.collapse { | |
[class*="large-"] { padding: 0; } | |
} | |
} | |
/* Floating for default last columns and overriding with .end class */ | |
[class*="large-"]:last-child { float: $defaultOpposite; } | |
[class~="end"] { float: $defaultFloat; } | |
/* Centered large columns */ | |
.large-centered { float: none !important; margin: 0 auto; } | |
/* Small column widths */ | |
@for $i from 1 through $totalColumns { | |
.row .large#{-$i} { width: gridCalc($i, $totalColumns); } | |
} | |
/* Offset columns */ | |
@for $i from 1 through $totalColumns - 2 { | |
.row { | |
.large-offset-#{$i} { margin-#{$defaultFloat}: gridCalc($i, $totalColumns); } | |
} | |
} | |
.row [class*="small-offset-"] { margin-#{$defaultFloat}: 0; } | |
/* Push/Pull columns */ | |
@for $i from 2 through $totalColumns - 2 { | |
.large-push#{-$i} { #{$defaultFloat}: gridCalc($i, $totalColumns); } | |
.large-pull#{-$i} { #{$defaultOpposite}: gridCalc($i, $totalColumns); } | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you're going to go mobile-first, using a variable for the breakpoint would make sense.