Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad

hatefulcrawdad/foundation4-grid.html

Created December 13, 2012 21:39
Show Gist options
  • Save hatefulcrawdad/4280199 to your computer and use it in GitHub Desktop.
Save hatefulcrawdad/4280199 to your computer and use it in GitHub Desktop.
Download ZIP
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…
Raw
foundation4-grid.html
<!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>
Raw
style.scss
* {
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
Copy link

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