Перейти к содержимому


Фотография

Extended ipsLayout Grid


  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1 Оффлайн   IpbZona Bot

    Пользователь


  • Пользователи
  • Репутация
    1
    • Cообщений: 29

Отправлено 19 Январь 2013 - 17:53

Here is 12 column ipsLayout Grid :<br />1-this will convert current ipsLayout to be percentage not by PX <br />2- includes extended 12 column ipsLayout<br />3- includes media queries to make default skin responsive as possible without any html edit<br />4-includes one mini js to make the nav tiny in small browsers<br /><strong class='bbc'>what is the benefit ?</strong><br />1-you  still can use the default ipsLayout html structure ,so no confilct with the ips addon's or third-party apps<br />2-you can use the extended ipsLayout grid and create many many different layouts<br /> <br /><strong class='bbc'>basic HTML Markup </strong><pre class='prettyprint lang-css linenums:0'>
&lt;div class="ipsLayout"&gt;
&nbsp;&nbsp; &lt;div class="one block"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="ipsBox"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ipsBox_container ipsPad"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;one block
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &lt;div class="three block"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="ipsBox"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ipsBox_container ipsPad"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;three block
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &lt;div class="eight block"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="ipsBox"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ipsBox_container ipsPad"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eight block
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;
</pre> <br />you can also use the classes <strong class='bbc'>margin-left-x</strong> or<strong class='bbc'> margin-right-x</strong> to add margin to each col in right or left<pre class='prettyprint lang-css linenums:0'>
&lt;div class="ipsLayout"&gt;
&nbsp;&nbsp; &lt;div class="two block"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="ipsBox"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ipsBox_container ipsPad"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;two block
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &lt;div class="four block margin-left-two"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="ipsBox"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ipsBox_container ipsPad"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;four block margin-left-two
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &lt;div class="three block margin-right-one"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="ipsBox"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ipsBox_container ipsPad"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;three block margin-right-one
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;
</pre><span rel='lightbox'><span rel='lightbox'><img class='bbc_img' src='

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание

' alt='Posted Image' class='bbc_img' /></span></span><br /> <br />you can still use default IPS Layout Html Markup like<pre class='prettyprint lang-auto linenums:0'>
&lt;div class="ipsLayout ipsLayout_withleft ipsLayout_withright ipsLayout_largeleft ipsLayout_largeright clearfix" &gt;

&lt;div class="ipsLayout_left"&gt;
&lt;div class="general_box"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="ipsLayout_right"&gt;

&lt;div class="general_box"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; right
&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;

&lt;div class="ipsLayout_content" id="main-content"&gt;
&lt;div class="ipsBox"&gt;
&lt;div class="ipsBox_container ipsPad"&gt;
content
&lt;/div&gt;


&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;


</pre>where in this case<br />tiny = one block<br />small=two block<br />large=three block<br />big= four block<br />huge=five block<br /><br /><strong class='bbc'>responsive</strong> : here we are not creating a responsive theme ,here we trying to  make default ips skin<br />is responsive as possible without any html edit ,without modifying the<br />structure , so please do not consider this as a complete responsive<br />theme .<br />for now it is detect devices with min-width:480 px<br /><span rel='lightbox'><span rel='lightbox'><img class='bbc_img' src='

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание

' alt='Posted Image' class='bbc_img' /></span></span><br /> <br /><strong class='bbc'>License : </strong><br />normal License : you can use this for free in your own website .<br />(developer,skinner) License : you can use it for free in your paid projects in IPS Marketplace ,<br />you should only leave a link in your file description to this file  .<br /> <br /> <br /><strong class='bbc'>updates :</strong><br />this file may contain hundred of bugs , I will try always to fix bugs as soon as possible in my free time<br /><strong class='bbc'>Examples : </strong><br />soon<br /> <br /><strong class='bbc'>copyrights:</strong><br />tiny nav js by :<br /><a href='

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание

' class='bbc_url' title='External link' rel='nofollow external'>

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание

</a><br /> <br />Enjoy !

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание



Заработок и обучение заработку