Col_* definitions and Skin.aspx layout

Apr 1, 2012 at 1:26 AM

G'day,

I see that the you have a set of definitions for column widths in kickstart-grids.css.  Now one of the first things I've noted is that there are 12 column width options here and by changing the col_# reference in Skins.aspx, you can adjust the width of the content section as required. Is this how those column widths are used within a page style. In the case of the 960-1080width default layout that has been configured I would imagine that we need to ensure that the column configuration we setup needs to uses those column sizes to sum up to <=100%. Is that how you expected people to edit the Skin.aspx?

Skin.aspx

 <div class="col_11"> <div id="ContentPane" runat="server" class="inner" ></div>
 </div>   
 <div class="col_4">    <div id="RightPane" runat="server" class="inner"></div></div>

KickStart-grids.css

/* & Columns : 12  & Gutter %: 20%  & MinWidth: 960px & MaxWidth: 1080px */
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

Dec 20, 2012 at 2:01 PM
Edited Dec 20, 2012 at 2:12 PM

What I do when editing the skin.aspx is think of rows that need to add up to 12 and then clear after each one. So I will do something like: 6+6 or 3+3+3+3 or 4+4+4 or 8+4 etc

<div class="col_12">
	<div id="TopFullPane" runat="server" class="inner" >
	</div>
</div>
<div class="clear"></div>
<div class="col_8">
	<div id="ContentPane" runat="server" class="inner" >
	</div>
</div>    
<div class="col_4">
	<div id="RightPane" runat="server" class="inner">
	</div>
</div>
<div class="clear"></div>
<div class="col_3">
	<div id="Q1Pane" runat="server" class="inner">
	</div>
</div>
<div class="col_3">
	<div id="Q2Pane" runat="server" class="inner">
	</div>
</div>
<div class="col_3">
	<div id="Q3Pane" runat="server" class="inner">
	</div>
</div>
<div class="col_3">
	<div id="Q4Pane" runat="server" class="inner">
	</div>
</div>
<div class="clear"></div>

 

 

also this: http://www.99lime.com/blog/learn-how-to-rock-your-templates-with-html-kickstart-columns/