Sign in to follow this  
Followers 0

960 Grid System overlay

6 posts in this topic

Posted · Report post

Hi guys, Is there a easy way to overlay the 960 Grid System in my base theme So i can use this as temp overlay to lineout elements. May its is cool add for the new version of PP Cheers Dennis

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

I don't think so. Each element of PP is self contained in order to keep the markup clean when things get moved around.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Adam, I wanne use it for aligning sidebar and other small elements in the base theme Cheers Dennnis

Share this post


Link to post
Share on other sites

Posted · Report post

I wouldn't know where to start unfortunately...but you're welcome to give it a shot if you think you need it. You would probably have to disable the dynamic layout css that already exists.

Share this post


Link to post
Share on other sites

Posted · Report post

i would say add a custom function: Div layer that contain the 960gs linked style sheets so it a module that we can copy past into other projects. This is how they do it : http://960.gs/demo_24_col.html

<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/text.css" />
	<link rel="stylesheet" href="css/960_24_col.css" />
	<link rel="stylesheet" href="css/demo.css" />
	</head>
	<body>
	<h1>
	  960 Grid System
	</h1>
	
	<div class="container_24">
	  <h2>
	    24 Column Grid
	  </h2>
	  <div class="grid_24">
	    <p>
	      950
	    </p>
	  </div>
	  <!-- end .grid_24 -->
	
	  <div class="clear"></div>
	  <div class="grid_1">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1 -->
	  <div class="grid_23">
	    <p>
	
	      910
	    </p>
	  </div>
	  <!-- end .grid_23 -->
	  <div class="clear"></div>
	  <div class="grid_2">
	    <p>
	      70
	    </p>
	  </div>
	
	  <!-- end .grid_2 -->
	  <div class="grid_22">
	    <p>
	      870
	    </p>
	  </div>
	  <!-- end .grid_2 -->
	  <div class="clear"></div>
	  <div class="grid_3">
	
	    <p>
	      110
	    </p>
	  </div>
	  <!-- end .grid_3 -->
	  <div class="grid_21">
	    <p>
	      830
	    </p>
	  </div>
	
	  <!-- end .grid_21 -->
	  <div class="clear"></div>
	  <div class="grid_4">
	    <p>
	      150
	    </p>
	  </div>
	  <!-- end .grid_4 -->
	  <div class="grid_20">
	
	    <p>
	      790
	    </p>
	  </div>
	  <!-- end .grid_20 -->
	  <div class="clear"></div>
	  <div class="grid_5">
	    <p>
	      190
	    </p>
	
	  </div>
	  <!-- end .grid_5 -->
	  <div class="grid_19">
	    <p>
	      750
	    </p>
	  </div>
	  <!-- end .grid_19 -->
	  <div class="clear"></div>
	
	  <div class="grid_6">
	    <p>
	      230
	    </p>
	  </div>
	  <!-- end .grid_6 -->
	  <div class="grid_18">
	    <p>
	      710
	    </p>
	
	  </div>
	  <!-- end .grid_18 -->
	  <div class="clear"></div>
	  <div class="grid_7">
	    <p>
	      270
	    </p>
	  </div>
	  <!-- end .grid_7 -->
	
	  <div class="grid_17">
	    <p>
	      670
	    </p>
	  </div>
	  <!-- end .grid_17 -->
	  <div class="clear"></div>
	  <div class="grid_8">
	    <p>
	
	      310
	    </p>
	  </div>
	  <!-- end .grid_8 -->
	  <div class="grid_16">
	    <p>
	      630
	    </p>
	  </div>
	  <!-- end .grid_16 -->
	
	  <div class="clear"></div>
	  <div class="grid_9">
	    <p>
	      350
	    </p>
	  </div>
	  <!-- end .grid_9 -->
	  <div class="grid_15">
	    <p>
	
	      590
	    </p>
	  </div>
	  <!-- end .grid_15 -->
	  <div class="clear"></div>
	  <div class="grid_10">
	    <p>
	      390
	    </p>
	  </div>
	
	  <!-- end .grid_10 -->
	  <div class="grid_14">
	    <p>
	      550
	    </p>
	  </div>
	  <!-- end .grid_14 -->
	  <div class="clear"></div>
	  <div class="grid_11">
	
	    <p>
	      430
	    </p>
	  </div>
	  <!-- end .grid_11 -->
	  <div class="grid_13">
	    <p>
	      510
	    </p>
	  </div>
	
	  <!-- end .grid_13 -->
	  <div class="clear"></div>
	  <div class="grid_12">
	    <p>
	      470
	    </p>
	  </div>
	  <!-- end .grid_12 -->
	  <div class="grid_12">
	
	    <p>
	      470
	    </p>
	  </div>
	  <!-- end .grid_12 -->
	  <div class="clear"></div>
	  <div class="grid_1 suffix_23">
	    <p>
	      30
	    </p>
	
	  </div>
	  <!-- end .grid_1.suffix_23 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_1 suffix_22">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_1.suffix_22 -->
	
	  <div class="clear"></div>
	  <div class="grid_1 prefix_2 suffix_21">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_2.suffix_21 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_3 suffix_20">
	
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_3.suffix_20 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_4 suffix_19">
	    <p>
	      30
	    </p>
	
	  </div>
	  <!-- end .grid_1.prefix_4.suffix_19 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_5 suffix_18">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_5.suffix_18 -->
	
	  <div class="clear"></div>
	  <div class="grid_1 prefix_6 suffix_17">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_6.suffix_17 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_7 suffix_16">
	
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_7.suffix_16 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_8 suffix_15">
	    <p>
	      30
	    </p>
	
	  </div>
	  <!-- end .grid_1.prefix_8.suffix_15 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_9 suffix_14">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_9.suffix_14 -->
	
	  <div class="clear"></div>
	  <div class="grid_1 prefix_10 suffix_13">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_10.suffix_13 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_11 suffix_12">
	
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_11.suffix_12 -->
	  <div class="grid_1 prefix_12 suffix_11">
	    <p>
	      30
	    </p>
	  </div>
	
	  <!-- end .grid_1.prefix_12.suffix_11 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_13 suffix_10">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_13.suffix_10 -->
	  <div class="clear"></div>
	
	  <div class="grid_1 prefix_14 suffix_9">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_14.suffix_9 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_15 suffix_8">
	    <p>
	
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_15.suffix_8 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_16 suffix_7">
	    <p>
	      30
	    </p>
	  </div>
	
	  <!-- end .grid_1.prefix_16.suffix_7 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_17 suffix_6">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_17.suffix_6 -->
	  <div class="clear"></div>
	
	  <div class="grid_1 prefix_18 suffix_5">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_18.suffix_5 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_19 suffix_4">
	    <p>
	
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_19.suffix_4 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_20 suffix_3">
	    <p>
	      30
	    </p>
	  </div>
	
	  <!-- end .grid_1.prefix_20.suffix_3 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_21 suffix_2">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_21.suffix_2 -->
	  <div class="clear"></div>
	
	  <div class="grid_1 prefix_22 suffix_1">
	    <p>
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_22.suffix_1 -->
	  <div class="clear"></div>
	  <div class="grid_1 prefix_23">
	    <p>
	
	      30
	    </p>
	  </div>
	  <!-- end .grid_1.prefix_23 -->
	  <div class="clear"></div>
	  <div class="grid_12 push_12">
	    <div class="grid_6 alpha">
	      <p>
	        230
	      </p>
	
	    </div>
	    <!-- end .grid_6.alpha -->
	    <div class="grid_6 omega">
	      <p>
	        230
	      </p>
	    </div>
	    <!-- end .grid_6.omega -->
	    <div class="clear"></div>
	
	    <div class="grid_1 alpha">
	      <p>
	        30
	      </p>
	    </div>
	    <!-- end .grid_1.alpha -->
	    <div class="grid_11 omega">
	      <p>
	        430
	      </p>
	
	    </div>
	    <!-- end .grid_11.omega -->
	    <div class="clear"></div>
	  </div>
	  <!-- end .grid_12.push_12 -->
	  <div class="grid_12 pull_12">
	    <div class="grid_1 alpha">
	      <p>
	        30
	      </p>
	
	    </div>
	    <!-- end .grid_1.alpha -->
	    <div class="grid_11 omega">
	      <p>
	        430
	      </p>
	    </div>
	    <!-- end .grid_11.omega -->
	    <div class="clear"></div>
	
	    <div class="grid_6 alpha">
	      <p>
	        230
	      </p>
	    </div>
	    <!-- end .grid_6.alpha -->
	    <div class="grid_6 omega">
	      <p>
	        230
	      </p>
	
	    </div>
	    <!-- end .grid_6.omega -->
	    <div class="clear"></div>
	  </div>
	  <!-- end .grid_12.pull_12 -->
	  <div class="clear"></div>
	</div>
	<!-- end .container_24 -->
	[/code]

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Or maybe just add a iframe with there demo that we can disable wit CSS #390gs_iframe{display:none;}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0