Risolvere problemi di incapsulamento con Ninesixty - Tips & Tricks - Ninesixty Theming

Il primo "fastidioso" problema che ho incontrato nell'utilizzare Ninesixty come framework per realizzare temi in Drupal è il fatto che i margini dei DIV di Ninesxty non sono pensati per un icapsulamento, a meno di modificare manualmente i margini tramite CSS.

In altre parole potrei avere la necessità di incapsulare ad esmpio un "grid-5" e un "grid-4" all''interno di un "grid-9", ma a questo punto nasce un problema di margini. Infatti tutti i "grid-x" hanno "10px" di margine sia a destra che a sinistra, vedi codice del file "960.css":

/* `Grid >> Global
-------------------*/

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-13,
.grid-14,
.grid-15,
.grid-16 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

La questione diventa problematica appena si tenta di fare una cosa come sopra descritto, infatti con un semplice calcolo matematico possiamo accorgerci che i DIV "grid-4" "grid-5" produrranno ognuno "20xp" di margine in complessivo, ma ci troviamo già all'interno di un DIV "grid-9" che ha una largezza fissa e a sua volta possiede altri "20px" di margini in complessivo. In definitva si avrà uno sforamento di margini all'interno di "grid-9".

Per ovviare a questo inconveniente ho realizzato il file "960-inner.css" ed incluso nel framework 960 al cui interno ho steso alcune righe di semplice CSS per annullare o dimezzare i margini a seconda del livelli di incapsulamento, facciamo un sempio:

Esempio utilizzando un "16 Column Grid"

Grid-2 =
100px di larghezza
+ 10 px di margine destro
+ 10 px di margine sinistro
= 120px

Grid-1 =
40px di larghezza
+ 10 px di margine destro
+ 10 px di margine sinistro
= 60px

Normalmente se effettuiamo un incapsulamento nel seguente modo:

Bla bla bla ...
 
Blu blu blu ...

Avremo come risultato che "Grid-2" avrà uno spazio utilizzabile di "100px" mentre i due DIV "Grid-1" ne occupano (2*60)px = 120px, abbiamo sforato di "20px".

Come ovviare a questo?

Utilizzando il file da me creato (960-inner.css, prelevaibile a fondo pagina) ancora in fase "beta", potrete correggere il problema ed incapsulare a vostro piacimento semplicemente aggiungendo una classe, ecco gli utilizi possibili:

<div class=" grid-x zero-five> [...] </div> // Applica al grid-x un margine laterale di 5px, utile se si è al "PRIMO" livello di incapsulamento e se i di incapsulati sono al più 2;

<div class=" grid-x zero-tfive> [...] </div> // Applica al grid-x un margine laterale destro di 3px e un margine laterale sinistro di 2px con un complessivo di 5px, utile se si è al "PRIMO" livello di incapsulamento e se i di incapsulati sono al più 4;

<div class=" grid-x zero> [...] </div> // Azzera i margini;

Sono benvenuti critiche, consigli, aiuti, patch, aggiunte ecc...