40-layouts.less

/**
 * "such.less" CSS boilerplate framework
 * 40-layouts.less
 * https://github.com/MarcDiethelm/such.less
 * License: MIT
 * Copyright 2014 Marc Diethelm, Simon Harte
 */

// Dependencies:
// - 00-variables.les
// - lib/spartan.less

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// BASE LAYOUT

#layout {
	// fallback values if mixins get called without params
	@min-width-default: 0;
	@max-width-default: @max-content-width;

	.content-boundaries(@min-width: @min-width-default, @max-width: @max-width-default) {
		min-width: @min-width;
		max-width: @max-width;
	}

	.center() {
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// RESPONSIVE LAYOUTS

// You can use the following mixins to easily set up responsive layouts.
// For grid layouts with non-equal span sizes use incrementing col-[integer] classes and apply sizes to each of these classes.
//
// .col-set([colum name], [column span width], [offset], [order]):
// Standard mixin to set up a column in a responsive layout.
// You can optionally pass an offset and reorder parameter to apply indentation or use push and pull on a column.
//
// To set up layouts with equal width columns you only specify the width in `.col-set-equal`.
//
// .col-set-equal([column span width]):
// Extended mixin to set up equal width columns and properly clear them at the same time
//
// Note: Every use of .col-set-equal() must be wrapped in a media query (even for smallest "mobile first" viewport).
//       Because else the `nth-child` selectors used in ` .col-set-equal()` for proper clearing would be passed on to all
//       other viewports/media queries in the layout.
//
// .col-clear([colums per line]):
// Use this to manually clear every nth column if columns differ in height.
// This ensures that a grid layout can have only [colums per line] columns on one horizontal grid line.

.g-layout-1 {
	/**
	* small: 12
	* medium: 6
	* large: 4
	**/

	@media @m-medium {
		.grid-col-set-equal(@grid-cols/2);
	}

	@media @m-large-up {
		.grid-col-set-equal(@grid-cols/3);
	}
}

.g-layout-2 {
	/**
	* small: 12
	* medium: 12
	* large: 6
	**/

	@media @m-large-up {
		.grid-col-set-equal(@grid-cols/2);
	}
}

.g-layout-3 {
	/**
	* small: 12
	* medium: 8/4
	* large: 8/4
	**/
	@third: @grid-cols/3;

	@media @m-medium-up {
		.grid-col-set('col-1', @third*2);
		.grid-col-set('col-2', @third);
	}
}

.g-layout-4 {
	/**
	* small: 12
	* medium: 6
	* large: 3
	**/

	@media @m-medium {
		.grid-col-set-equal(@grid-cols/2);
	}

	@media @m-large-up {
		.grid-col-set-equal(@grid-cols/4);
	}
}

.g-layout-nogrid-1 {
	/**
	* small: 5
	* medium: 7
	* large: 9
	**/

	@media @m-small {
		.grid-col-set('col', @grid-cols/5);
	}

	@media @m-medium {
		.grid-col-set('col', @grid-cols/7);
	}

	@media @m-large-up {
		.grid-col-set('col', @grid-cols/9);
	}
}