grid.less

// Generatore della griglia
// 
// Genera una o più griglie, con caratteristiche diverse per numero di colonne e spaziatura, 
// ogni griglia è contraddistinta da una classe che funge da namespace.
// 
// Utilizzo:
// .make-grid( class{string}, colonne{int}, breakpoint{px}, margin{%}, padding{% | px} );
// 
// Parametri:
// - class: stringa che identifica la classe della riga
// - colonne: intero, è il numero di colonne per la riga con classe .row.@class
// - breakpoint: rappresenta il valore della larghezza dello schermo in px, al di sotto del quale le colonne vengono impilate (versione mobile)
// - margin: se vuoi che le colonne abbiano un margin, impostalo qui (in percentuale!!). Default 0
// - padding: se vuoi che le colonne abbiano un padding, impostalo qui. Default 0
// 
// --- ---
// 
// Genera le seguenti classi:
// .row: definisce una riga
// .row.center: riga centrata
// .col-{n}: definisce una colonna di dimensione {n}
// .col-{n}.right: fa flottare la colonna sulla destra
// .col-{n}.pad: utilizza il padding impostato nella griglia
// .push-{n}: sposta la colonna di una misura {n} (viene applicato specchiato per le colonne flottanti a destra)
// .center: centra una riga o una colonna (elimina il float)
// .clearfix: da applicare ai contenitori di elementi flottanti per correggere il dimensionamento
// 
// --- ---
// 
// Il codice html per utilizzare la griglia è del tipo:
// 	<div class="row {class}">
// 		<div class="col-{n}">
// 			{n} Rappresenta la grandezza della colonna, da 1 a n, in base a quante colonne sono impostate in {class}
// 		</div>
// 		<div class="col-{n} push-{m}">
// 			Qui la colonna è spostata di {m} rispetto alla sua posizione normale
// 		</div>
// 	</div>
//  
// Griglia flexbox

// Utilizzo:
// .make-grid-flex( class{string}, breakpoint{px}, margin{%}, padding{% | px} )
// (è identico alla griglia normale, ma senza il parametro che indicail numero di colonne)

// Parametri:
// - class: stringa che identifica la classe della riga
// - breakpoint: rappresenta il valore della larghezza dello schermo in px, al di sotto del quale le colonne vengono impilate (versione mobile)
// - margin: se vuoi che le colonne abbiano un margin, impostalo qui (in percentuale!!). Default 0
// - padding: se vuoi che le colonne abbiano un padding, impostalo qui. Default 0
// 
// 
// --- ---
// 
// Genera le seguenti classi:
// .row: definisce una riga
// .row.center: riga centrata
// .row.reverse: ordina le colonne in ordine inverso
// .row.vertical-top: allinea le colonne in alto
// .row.vertical-bottom: allinea le colonne in basso
// .row.vertical-center: allinea le colonne al centro
// .row.equal-height: rende uguale l'altezza di tutte le colonne della riga
// .col: definisce una colonna
// .col.pad: utilizza il padding impostato nella griglia
// .col.size-1,
// 	.col.size-2,
// 	.col.size-3,
// 	.col.size-4,
// 	.col.size-5: genera colonne con larghezza proporzionale
// .center: centra una riga o una colonna
// 
// --- ---


// -----------------------------------------------------
//  Non modificare qui sotto
// -----------------------------------------------------

/* Clearfix */
.clearfix {
	&:before,
	&:after {
		content: ' ';
		visibility: hidden;
		display: table;
	}
	&:after {
		clear: both;
	}
	*zoom: 1;
}

// Genera la griglia
.make-grid (@class, @columns, @breakpoint, @mar: 0, @pad: 0) {
	/* Grid.less */
	.make-base (@class);	
	.row.@{class} {
		.col-@{columns} {
			clear: both;
			width: auto;
			.make-margin (@mar);
		}
		.make-cols (@columns, @columns - 1, @mar, @pad);
		.make-stack (@breakpoint, @columns - 1, @mar, @pad);
	}
}

.make-grid-flex (@class, @breakpoint, @mar: 0, @pad: 0) {
	.row.@{class} {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		justify-content: space-around;

		flex-direction: row;

		-webkit-flex-wrap: row wrap;
		flex-wrap: wrap;


		&.center,
		.center {
			float: none !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}
		.col {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			.make-margin(@mar);
			.make-padding(@pad);
			&.size-1 {
				flex-grow: 1;
			}
			&.size-2 {
				flex-grow: 2;
			}
			&.size-3 {
				flex-grow: 3;
			}
			&.size-4 {
				flex-grow: 4;
			}
			&.size-5 {
				flex-grow: 5;
			}
		}

		// vertical align		
		&.vertical-top {
			align-items: flex-start;
		}
		&.vertical-center {
			align-items: center;
		}
		&.vertical-bottom {
			align-items: flex-end;
		}
		&.equal-height {
			align-items: stretch;
		}

		// order
		&.reverse {
			flex-direction: row-reverse;
		}

		.img();
	}
	@media (max-width: @breakpoint) {
		.row.@{class} {
			flex-direction: column;
			&.vertical-top,
			&.vertical-center,
			&.vertical-bottom,
			&.equal-height {
				align-items: initial;
			}
			&.reverse {
				flex-direction: column-reverse;
			}
		}
	}
}

// Genera le colonne e gli spaziatori
.make-cols (@total, @n, @mar: 0, @pad: 0) when (@n > 0) {

	// Colonna
	.col-@{n} {
		.col ();
		width: (100% / @total * @n) - (@mar * 2);
		.make-margin(@mar);
		.make-padding(@pad);
	}

	// Spaziatori a sinistra e a destra
	.push-@{n} when (@n < @total) {
		margin-left: (100% / @total * @n) + @mar;
	}
	&.right .push-@{n} when (@n < @total) {
		margin-right: (100% / @total * @n) + @mar;
	}

	// next
	.make-cols(@total, @n - 1, @mar, @pad);
}

.make-stack-cols (@total, @n, @mar: 0, @pad: 0) when (@n > 0) {

	// Colonna
	.col-@{n} {
		float: none;
		width: 100% - (@mar * 2);
		.make-margin(@mar);
		.make-padding(@pad);
		&.right {
			float: none;
		}
	}

	// Spaziatori a sinistra e a destra
	.push-@{n} when (@n < @total) {
		.make-margin (@mar);
	}
	&.right .push-@{n} when (@n < @total) {
		.make-margin (@mar);
	}

	// next
	.make-stack-cols(@total, @n - 1, @mar, @pad);
}

.make-stack (@breakpoint, @columns, @mar, @pad) {
	@media (max-width: @breakpoint) {
		.make-stack-cols(@columns, @columns, @mar, @pad);
	}
}

// Riga + .center
.make-base (@class) {
	.row.@{class} {
		.clearfix();
		&.center,
		.center {
			float: none !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}
		.img();
	}
}

// Colonna
.col () {
	float: left;
	.box-sizing();
	min-height: 1px;
	&.right {
		float: right;
	}
}

// Box sizing
.box-sizing () {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

// Image max width
.img () {
	img {
			max-width: 100%;
		}
}

// Margin
.make-margin (@mar) when (ispercentage(@mar)) {
	margin-left: @mar;
	margin-right: @mar;
}

// Padding
.make-padding (@pad) when (ispixel(@pad)) {
	&.pad {
		padding-left: @pad;
		padding-right: @pad;
	}
}
.make-padding (@pad) when (ispercentage(@pad)) {
	&.pad {
		padding-left: @pad;
		padding-right: @pad;
	}
}