Contao Tipps

Eine Seite zurück
Reset Filterauswahl

Das 1140 Pixel-Gridsystem

Für Contao wird ein Gridsystem angeboten. Es gibt dieses als Pixel- und Prozent-Gridsystem. Das Pixel-Gridsystem basiert auf einer Gesamtbreite von 960 Pixel. Die 960 Pixel waren für Monitore mit 1024 Pixel Breite gedacht. In einem Foliensatz (PDF) auf dem Usertreffen 2009 wurde das Prinzip erläutert.

 

Mittlerweile sind die Monitore "gewachsen", daher wurde für 1280 Pixel Monitorauflösung ein 1140 Pixel-Gridsystem erdacht. Auf cssgrid.net wird ein 12 Spalten Fluid Prozent-Gridsystem für eine maximale Breite von 1140 Pixel vorgestellt.

Das Contao 960 Pixel-Gridsystem angepasst auf 1140 Pixel

Im Forum wurde das Contao 960 Pixel-Gridsystem angepasst auf 1140 Pixel veröffentlicht. Es unterstützt somit die Contao Vorgaben:

/* Basic configuration */
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 {
	float:left;
	display:inline;
	margin-right:10px;
	margin-left:10px;
}

/* Widths */
.g1 { width:75px; }
.g2 { width:170px; }
.g3 { width:265px; }
.g4 { width:360px; }
.g5 { width:455px; }
.g6 { width:550px; }
.g7 { width:645px; }
.g8 { width:740px; }
.g9 { width:835px; }
.g10 { width:930px; }
.g11 { width:1025px; }
.g12 { width:1120px; }

/* Apply margin to content elements by default */
.mod_article>.block {
	margin-right:10px;
	margin-left:10px;
}

/* Except if the article itself is floated  */
.g1 .block,.g2 .block,.g3 .block,.g4 .block,.g5 .block,.g6 .block,
.g7 .block,.g8 .block,.g9 .block,.g10 .block,.g11 .block,.g12 .block {
	margin-right:0;
	margin-left:0;
}

/* Reapply margin on nested grid elements */
.gr {
	margin-right:20px !important;
}