Skip to content

Commit

Permalink
document how to customize grid tiers
Browse files Browse the repository at this point in the history
  • Loading branch information
mdo committed Feb 6, 2016
1 parent bc45add commit fb4f5f0
Showing 1 changed file with 22 additions and 0 deletions.
22 changes: 22 additions & 0 deletions docs/layout/grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -452,3 +452,25 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
</div>
{% endexample %}
</div>

## 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.

1 comment on commit fb4f5f0

@cvrebert
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<3<3

Please sign in to comment.