griglia utilizzando less

[ballaweb]

Ciao a tutti, sto cercando di realizzare una griglia semplice utilizzando le peculirità di less, ho trovato molte info sulla rete ed ho realizzato questo semplice layout:

parte html all'interno del body:

<div class="wrapper">
	
	<div class="box full">box full</div>
	
	
	<div class="box half">box half</div>
	<div class="box half">box half</div>
	
	
	<div class="box third">box third</div>
	<div class="box third">box third</div>
	<div class="box third">box third</div>
	
	
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	
	
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	
        <div class="clearLeft"></div>
	</div>

parte less

// color
@backgroundColor:#FFF;
@mainColor: #333333;
@secondColor: #66bbe3;
@mainTextColor: lighten(@mainColor, 5%);
@headingColor: lighten(@mainColor, 100%);

// bordo

@colorBorder: #000;
@sizeBorder: 1px;
@styleBorder: solid;

// grid

/* larghezza colonna singola */

@columnWidth:60px;
@gutterWidth:10px;
@columnNumber:12; /* numero delle colonne da utilizzare */

/* larghezza totale delle colonne e del canaletto */
@columnWidthFull: @columnWidth * @columnNumber;
@gutterWidthFull: (@gutterWidth * @columnNumber) *2;
@fullWidth: @columnWidthFull+@gutterWidthFull;
.clearLeft{
	clear:left;
}
body{
	background-color:@backgroundColor;
	color:@mainTextColor;
		background:url(../images/grid.png) repeat-y center top;
	h1{
		color:@headingColor;
	}
	.box{
		/*border: @colorBorder @sizeBorder @styleBorder;*/
		float:left;
		min-height:100px;
	}
}
.wrapper{
		width:@fullWidth;
		margin:0 auto;
	}
.full{
	width:@fullWidth;
	background-color: lighten(@secondColor, 5%);
}
.half{
	width:@fullWidth/2;
	background-color: lighten(@secondColor, 10%);
}
.third{
	width:@fullWidth/3;
	background-color: lighten(@secondColor, 15%);
}
.forth{
	width:@fullWidth/4;
	background-color: lighten(@secondColor, 20%);
	}
.five{
	width:@fullWidth/5;
	color: lighten(@mainColor, 90%);
	background-color: lighten(spin(@mainColor, 8), 25%);
}

Fin qui tutto funziona bene, adesso vorrei inserire del margin, che sarebbe @gutterWidth, tra i box, ma qui la faccenda si complica un po, per me che non capisco nulla di programmazione, perché la larghezza dei box è data dalla variabile @fullWidth diviso quanti box si vogliono, ma quando voglio inserire il margine dato dalla variabile: @gutterWidthFull, il layout mi si incasina.
Ci vorrebbe un'espressione/funzione che calcola la larghezza totale delle colonne, del gutter sottraendo quello in eccesso ecc...
Insomma

Posto il link di riferimento:
link

Quest'altro
link
invece lo sto leggendo adesso e parla della semantica che al primo link manca, da qui la decisione di modificarlo leggermente.

Spero in un vostro aiuto, ciao

[lucavizzi]

prova ad aggiungere il margin alla classe box

	.box{
		/*border: @colorBorder @sizeBorder @styleBorder;*/
		float:left;
		min-height:100px;
                            margin:10px;
	}

poi, nelle classi: full, half, third, forth, five, sottrai alla larghezza 20px (i 10 di sinistra più i dieci di destra)

.full{
	width:@fullWidth-20;
	background-color: lighten(@secondColor, 5%);
}
.half{
	width: (@fullWidth/2)-20;
	background-color: lighten(@secondColor, 10%);
}
ecc. ...

[ballaweb]

Grande :-)
Grazie molte per l'aiuto, l'ho modificato in maniera da poter avere una variabile anche per il gutter (o spazio tra i box), riposto il codice:

// color
@backgroundColor:#FFF;
@mainColor: #333333;
@secondColor: #66bbe3;
@mainTextColor: lighten(@mainColor, 5%);
@headingColor: lighten(@mainColor, 100%);

// bordo

@colorBorder: #000;
@sizeBorder: 1px;
@styleBorder: solid;

// grid

/* larghezza colonna singola */

@columnWidth:60px; /* larghezza colonne */
@gutterWidth:5px; /* larghezza gutter o spazio tra i box */
@columnNumber:12;  /* numero delle colonne da utilizzare */

/* larghezza totale delle colonne e del gutter */
@columnWidthFull: @columnWidth * @columnNumber;
@gutterWidthFull: (@gutterWidth * @columnNumber) *2;
@fullWidth: @columnWidthFull+@gutterWidthFull;
.clearLeft{
	clear:left;
}
body{
	background-color:@backgroundColor;
	color:@mainTextColor;
		background:url(../images/grid.png) repeat-y center top;
	h1{
		color:@headingColor;
	}
	.box{
		/*border: @colorBorder @sizeBorder @styleBorder;*/
		float:left;
		min-height:100px;
		margin:@gutterWidth;
	}
}

.wrapper{
		width:@fullWidth;
		margin:0 auto;
	}
.full{
	width:@fullWidth - (@gutterWidth *2);
	background-color: lighten(@secondColor, 5%);
}
.half{
	width: (@fullWidth/2)-(@gutterWidth *2);
	background-color: lighten(@secondColor, 10%);
}
.third{
	width: (@fullWidth/3)-(@gutterWidth *2);
	background-color: lighten(@secondColor, 15%);
}
.forth{
	width: (@fullWidth/4)-(@gutterWidth *2);
	background-color: lighten(@secondColor, 20%);
	}
.five{
	width: (@fullWidth/5)-(@gutterWidth *2);
	color: lighten(@mainColor, 90%);
	background-color: lighten(spin(@mainColor, 8), 25%);
}

Codice html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>layout width less</title>
	<link rel="stylesheet" href="css/reset.css" type="text/css" />
	<link rel="stylesheet/less" href="less/style.less" type="text/css" />
	<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
</head>
<body>

<div class="wrapper">
	
	<div class="box full">box full</div>
	
	
	<div class="box half">box half</div>
	<div class="box half">box half</div>
	
	
	<div class="box third">box third</div>
	<div class="box third">box third</div>
	<div class="box third">box third</div>
	
	
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	
	
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	
	<div class="clearLeft"></div>
</div>

</body>
</html>

questo è il risultato:


Grazie a lucavizzi per aver risolto un grattacapo
Sarebbe fico se altri utenti della comunità di html potessero intervenire nel post migliorando il codice mostrato sopra