Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Flexbox Grid Layout con SASS e Compass: il contenitore

Costruiamo una griglia sfruttando il supporto che Compass ci offre per flexbox per ottenere un codice compatibile con le diverse versioni della specifica.
Costruiamo una griglia sfruttando il supporto che Compass ci offre per flexbox per ottenere un codice compatibile con le diverse versioni della specifica.
Link copiato negli appunti

Il modulo CSS3 Flexbox ha subito tre modifiche nel corso del tempo. La prima versione, del 2009, prevedeva la proprietà box; la seconda versione, del 2012, forniva la proprietà flexbox; finalmente, la terza versione, quella attualmente in fase di Candidate Recommendation, fornisce la proprietà flex.

Anche la libreria Compass dispone di un modulo Flexbox, e ne faremo uso per far evolvere la nostra griglia e renderla mantenibile ed estendibile senza alcuna difficoltà.

Ricostruiamo, quindi, la griglia presentata nelle pagine precedenti in puro stile SASS. Avviamo il terminale e collochiamoci nella directory myproject. Avviamo, poi, SASS e Compass:

$ compass watch

Apriamo il file grid.scss collocato nella cartella myproject/sass, e cominciamo con l'importare il modulo CSS3 di Compass:

@import "compass/css3";

Impostiamo, quindi, le dimensioni del contenitore, dichiarando le prime variabili:

// Dimensions
$container-width: 60%;
// Colors
$bg-dark: #CCC;
$bg-light: #EEE;
$border-dark: #CCC;

Scriviamo, poi, le dichiarazioni generali:

.flex-container,
.h-flex-container,
.v-flex-container,
.flex-cell {
	@include box-sizing; // defaults to border-box
}
.flex-container,
.h-flex-container,
.v-flex-container {
	background-color: $bg-dark;
	width: $container-width;
	margin: .4rem auto;
}
.flex-cell {
	margin: 0;
	background-color: $bg-light;
	text-align: center;
	min-width: 8rem;
	border: 1px solid $border-dark;
}

Abbiamo già messo in azione Compass, invocando il mixin box-sizing. Nei due blocchi successivi, abbiamo utilizzato le variabili definite più sopra. A questo punto ricorriamo al modulo del Flexbox:

.flex-container,
.h-flex-container,
.v-flex-container {
	@include display-flex;
	@include flex-wrap(wrap);
	margin: 0;
	padding: 0;
}
.flex-container,
.h-flex-container {
	@include flex-direction(row);
}
.v-flex-container {
	@include flex-direction(column);
}

Abbiamo utilizzato i mixin display-flex, flex-wrap e flex-direction.

Il passo successivo è la dichiarazione degli stili dei singoli elementi della griglia:

/* flexbox cells */
/*
 * flex-grow: 0;
 * flex-shrink: 0;
 * flex-basis: auto;
 */
.flex-none {
	@include flex(none);
}
/*
 * flex-grow: 1;
 * flex-shrink: 1;
 * flex-basis: auto;
 */
.flex-auto {
	@include flex(auto);
}
/*
 * automatically fits to element's content
 * flex-basis: content;
 */
.flex-content {
	@include flex(content);
}

Giusto per dare un'occhiata a cosa sta succedendo, salviamo il file grid.scss e apriamo il file grid.css. Se non abbiamo commesso errori, il listato ottenuto sarà un foglio di stile perfettamente x-browser.

Link utili

Ti consigliamo anche