From fb4f5f0bf1e22f707bdd16880fe19328df091bde Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 13:02:42 -0800 Subject: [PATCH] document how to customize grid tiers --- docs/layout/grid.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/layout/grid.md b/docs/layout/grid.md index d43f6e8abb..3a76a651b6 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -452,3 +452,25 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and ` {% endexample %} + +## Customizing the grid + +Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. + +For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: + +{% highlight scss %} +$grid-breakpoints: ( + sm: 480px, + md: 768px, + lg: 1024px +); + +$container-max-widths: ( + sm: 420px, + md: 720px, + lg: 940px +) !default; +{% endhighlight %} + +Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.