Responsive Foundation 6.0.0

In Responsive, you can choose which breakpoints you want grid classes to support using the $grid-breakpoints map. You might want to do this to optimize your theme so that only the classes you need are generated, or you might want to add a new breakpoint to the stack that isn't supported by default.

The sm and md breakpoints are required by Responsive. All others are optional.

Examples

Basic usage

By default, grid classes for all breakpoints in Responsive except $xl are generated.

		$grid-breakpoints: (
			xs: $xs, // optional
			sm: $sm, // required for the framework
			md: $md, // required for the framework
			lg: $lg  // optional
		);
		

Prevent certain breakpoints from generating

You can optimize your theme by only choosing to generate the grid classes you need for that theme.

		$grid-breakpoints: (
			xs: $xs, // optional
			sm: $sm, // required for the framework
			md: $md // required for the framework
		);
		

Generate a new set of grid classes for a custom breakpoint

You can also add your own custom breakpoints for grid classes. For example, if you are working with a large screen TV for signage, you may want to add support to the grid for your TV breakpoint to make it easier to manage your TV-sized layout.

		$grid-breakpoints: (
			xs: $xs, // optional
			sm: $sm, // required for the framework
			md: $md, // required for the framework
			lg: $lg,  // optional
			tv: $your-tv-breakpoint // Your new breakpoint. Usage: %col-tv-third;
		);