1140px CSS Grid Layout e ancora SCSS/SASS

Se una volta quasi tutti navigavano attraverso monitor 14'' 4:3 a 1024x768, ora la situazione è totalmente variegata. Gli schermi hanno risoluzione e dimensioni diversissime tanto da giustificare differenti versioni dello stesso sito (mobile, desktop, ipad, ie,..).

Ovviamente non tutti sono Twitter o Facebook che possono permettersi questo lusso di progettazione (e manutenzione), quindi ecco a voi il "male minore" o pattern o Best Practice 1140px CSS Grid.

L'idea di base è analoga a quella del noto layout 960gs, ovvero considerare la pagina una web una sorta di griglia fatta da righe e colonne. Il vantaggio di questa soluzione è che non sarà più necessario specificare le dimensioni manualmente per ogni elemento, ma basterà chiamarlo con la classe appropriata.

Il layout 1104px scritto da Andy Taylor funziona allo stesso modo ed è strutturato da poter funzionare dalla larghezza di 1280px fino alle risoluzione dei dispositivi mobili, come fa?
Avevo fatto anch'io un esempio semplice in passato (provate a ridimensionare la pagina):

• Schermo x > 1140px: la parte principale di 1140px viene centrata
• Schemo x < 1140px: le colonne si riadattano tutte alla dimensione del dispositivo e formano una colonna unica

Le classi div principali sono:

• container: contenitore fisso che racchiude e centra nella pagina i 1140px di righe (row)
• row: sono righe orizzontali che contengono le colonne (col-N)
• col-N: sono le colonne da 1 a 12 che si trovano in una riga e la loro combinazione deve dare per somma 12.
• last: la classe aggiuntiva che deve avere l'ultima colonna della riga.

Esempio

riga (col-11 + col-1)
riga (col3* + col3** + col3 + col3)
* nidificazione di colonne
** nidificazione di righe

Le zone che vedete in giallo sono le colonne dove effettivamente va il contenuto, il rosso sono le righe (o se preferite la spaziatura flessibile tra colonne), il blu è il container.

1044s SCSS

Se guardate la versione in 1140px in CSS vedrete che ci sono tanti numeri fissi nel codice, inoltre siete a vincolati ad usare 12 colonne. Quindi se volete più flessibilità, per esempio modificare i 1140px o avere un numero di colonne diverso da 12, vi consiglio di usare il mio porting 1140s.
Basta che cambiate i valori e rigenerate il vostro CSS.

/* 1044s.scss */
/* Config */
$num-cols:                                     12;
$row-width:                               1140px;
$container-lateral-padding:                 20px;
$col-margin-right:                         3.8%;
$col-unit: (100% + $col-margin-right) / $num-cols;
[..]
 
.container {
padding-left: $container-lateral-padding;
padding-right: $container-lateral-padding;
}
.row {
width: 100%;
max-width: $row-width;
margin: 0 auto;
overflow: hidden;
}
.col{
margin-right: $col-margin-right;
float: left;
}
@for $i from 1 through $num-cols {
  .col-#{$i} { @extend .col;
    width: $col-unit * $i - $col-margin-right; }
}
.col-#{$num-cols} {
margin-right: 0px;
}
.last {
margin-right: 0px;
}
img, object, embed {
max-width: 100%;
}

Mi sono permesso di evidenziare le parti più interessanti. Nel primo blocco si possono definire le variabili a proprio piacimento e nel secondo c'é il ciclio @for che genera tutte le misure delle classi in automatico. Fate riferimento alla versione di Github per altri dettagli.
Buon divertimento :P