Jump to content


Photo
- - - - -

960 Grid System overlay


  • Please log in to reply
5 replies to this topic

#1 studio8c

studio8c

    Advanced Member

  • Members
  • 96 posts
  • Country: Country Flag

Posted 19 April 2011 - 10:50 AM

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
  • suzyo likes this

#2 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 19 April 2011 - 07:24 PM

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

#3 studio8c

studio8c

    Advanced Member

  • Members
  • 96 posts
  • Country: Country Flag

Posted 21 April 2011 - 09:13 AM

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

#4 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 21 April 2011 - 07:52 PM

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.

#5 studio8c

studio8c

    Advanced Member

  • Members
  • 96 posts
  • Country: Country Flag

Posted 22 April 2011 - 06:40 AM

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>
	  <a href="http://960.gs/">960 Grid System</a>
	</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 -->

  • suzyo likes this

#6 studio8c

studio8c

    Advanced Member

  • Members
  • 96 posts
  • Country: Country Flag

Posted 22 April 2011 - 06:44 AM

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