</div>
</div>
```
+
+By default, the container will be centered and have a max-width equal to your
+`$max-width` setting (1200px by default), and be flush to the screen for widths
+below that. If you want to add padding below the `$max-width`, simply add the
+`.grid-container-padded` class to your grid container.
+
+```html
+<div class="grid-container grid-container-padded">
+ <div class="grid-x">
+ <div class="cell small-4">cell</div>
+ <div class="cell small-4">cell</div>
+ <div class="cell small-4">cell</div>
+ </div>
+</div>
+```
---
## Auto Sizing
@include xy-grid-container;
}
+ .grid-container-padded {
+ @include xy-grid-container-padding;
+ }
+
// Base grid styles
.grid-x {
@include xy-grid;
margin: 0 auto;
}
+/// Add padding to your container, up to a particular size
+///
+/// @param {Number} $width [$grid-container] - a width to limit the container to.
+@mixin xy-grid-container-padding(
+ $padding: $grid-container-padding,
+ $max: $grid-container-max
+) {
+ // Output our margin gutters.
+ @if (type-of($padding) == 'map') {
+ @include -zf-breakpoint-value(auto, $padding) {
+ padding-left: rem-calc($-zf-bp-value / 2);
+ padding-right: rem-calc($-zf-bp-value / 2);
+ }
+ }
+ @elseif (type-of($padding) == 'number') {
+ padding-left: rem-calc($padding) / 2;
+ padding-right: rem-calc($padding) / 2;
+ }
+ @include breakpoint($max) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
/// Creates a container for your flex cells.
///
/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
/// @type Map | Length
$grid-padding-gutters: $grid-margin-gutters !default;
+$grid-container-padding: $grid-padding-gutters !default;
+$grid-container-max: $global-width !default;
+
/// The maximum number of cells in a block grid.
/// @type Number
$block-grid-max: 8 !default;
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ <title>xy margin grid</title>
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <style>
+ .demo {
+ background: #1779ba;
+ }
+
+ .cell {
+ /*background: dodgerblue;*/
+ line-height: 50px;
+ height: 50px;
+ color: white;
+ text-align: center;
+ margin-bottom: 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Grid Container</h1>
+
+ <h2>With no `grid-container-padding` should be flush below 1200px, and bounded and centered above</h2>
+
+ <div class="grid-container">
+ <div class="grid-x grid-margin-x">
+ <div class="cell medium-12"><div class="demo">12/12</div></div>
+ </div>
+ </div>
+
+ <h2>With `grid-container-padded` should have padding below 1200px, corresponding to responsive gutters</h2>
+
+ <div class="grid-container grid-container-padded">
+ <div class="grid-x grid-margin-x">
+ <div class="cell medium-12"><div class="demo">12/12</div></div>
+ </div>
+ </div>
+
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+ </script>
+ </body>
+</html>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
