1140 Grid System

Nachdem ich vergeblich nach einer vernünftigen Lösung für das 1140px Grid gesucht habe, bin ich einfach selber tätig geworden. Ganz simples Script, das nur genau diesen einen Zweck erfüllt: Ein Hilfsgrid zur Ausrichtung über die Seite legen (wobei es hier – erst mal – einzig um die Desktopansicht geht!). Es nutzt exakt die Werte vom 1140px Grid, positioniert schlicht und ergreifend per jQuery 12 Div´s im Page-Container nebeneinander und fertig. Das Ganze ist natürlich per Trigger am rechten Rand ein- wie auszublenden.

Die bereits angebotenen Helper, sei es die Firefox Extension „GridFox“ oder auch diverse Bookmark- und Insitescripts, hatten alle Ihre Probleme mit diesem flexiblen Grid. Wenn sie mitunter auch noch so schön gemacht waren.

 

#grid-helper{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:none;
}
#grid-helper .grid-row{ 
  float:left;
  height:100%;
  width:4.85%;
  margin-right:3.8%;
  background-color:rgba(185,255,110,0.5);  
}
#grid-helper .grid-row.last{
  margin-right:0; 
} 

#grid-trigger{
  position:fixed;
  top:50%;
  right:0;
  margin-top:-50px;
  background:#000;
  color:#fff;
  padding:20px;
  cursor:pointer;
  opacity:0.1;
}
#grid-trigger:hover{
  opacity:1.0; 
}

function webks_customer_theme_grid_helper() {
  (function($) {

    $('#page').css('position','relative')
		$('#page').append('
');
		//Trigger
		$('body').append('
Show / Hide
');
		$("#grid-trigger").click(function() {
		  $('#grid-helper').toggle();
		});
		//Load Stylesheets
    $('').appendTo("head");
   
  })(jQuery);
}