Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
We've been going back and forth on how to best approach our grid for Foundation 4.0. We had a lot to consider since we're moving towards mobile-first with this release. After about 4 iterations, we wanted to post what we've got to get feedback from our beloved Scss community. This is the Scss version. From here we'll be building new semantic gri…
<!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>
* {
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;
// 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(767px)) {
/* 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(768px)) {
/* 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); }
}
}
@torkiljohnsen

This comment has been minimized.

Copy link

commented Dec 17, 2012

I think you said it best yourself… "all those ugly presentational classes in our markup". It's sad to read. :-/

I also see you're using at least one CSS3 selector [foo*=bar], which is not supported in IE8, but I think your docs state that you support IE8. I could not find out if you're using a polyfill to support that in IE8 either, so I might be wrong. Something to consider at least.

For attribute selectors, CSS2 brought [foo=bar], [foo~=bar] and [foo|=bar]. CSS3 expanded on this with [foo^=bar], [foo$=bar] and [foo*=bar]. More people need to start using these selectors, because they are awesome :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.