[community.invisionpower.com - pliki] Extended ipsLayout Grid

[NewsBot]

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'>

<div class="ipsLayout">

   <div class="one block">

      <div class="ipsBox">

         <div class="ipsBox_container ipsPad">

            one block

         </div>

      </div>

   </div>

   <div class="three block">

      <div class="ipsBox">

         <div class="ipsBox_container ipsPad">

            three block

         </div>

      </div>

   </div>

   <div class="eight block">

      <div class="ipsBox">

         <div class="ipsBox_container ipsPad">

            eight block

         </div>

      </div>

   </div>

</div>

</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'>

<div class="ipsLayout">

   <div class="two block">

      <div class="ipsBox">

         <div class="ipsBox_container ipsPad">

            two block

         </div>

      </div>

   </div>

   <div class="four block margin-left-two">

      <div class="ipsBox">

         <div class="ipsBox_container ipsPad">

            four block margin-left-two

         </div>

      </div>

   </div>

   <div class="three block margin-right-one">

      <div class="ipsBox">

         <div class="ipsBox_container ipsPad">

            three block margin-right-one

         </div>

      </div>

   </div>

</div>

</pre><span rel='lightbox'><span rel='lightbox'><img class='bbc_img' src='http://img541.imageshack.us/img541/646/localhost33indexphppage.png' 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'>

<div class="ipsLayout ipsLayout_withleft ipsLayout_withright ipsLayout_largeleft ipsLayout_largeright clearfix" >

<div class="ipsLayout_left">

<div class="general_box">

               left

</div>

</div>

<div class="ipsLayout_right">

<div class="general_box">

               right

</div>

    </div>

<div class="ipsLayout_content" id="main-content">

<div class="ipsBox">

<div class="ipsBox_container ipsPad">

content

</div>

</div>

</div>

</div>

</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='http://img96.imageshack.us/img96/8110/localhost33.png' 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='http://tinynav.viljamis.com/' class='bbc_url' title='External link' rel='nofollow external'>http://tinynav.viljamis.com/</a><br /> <br />Enjoy !

Pobierz plik