Jump to content


Welcome to DevFuse Forums


Sign In  Log in with Facebook

Create Account
Welcome to DevFuse Forums, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of DevFuse Forums by signing in or creating an account.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get email updates
  • Get your own profile page and make new friends
  • Send personal messages to other members.
 
Guest Message by DevFuse

(View All Products)Featured Products

  • Donations


    Help fund your forum with donations, setup goals and track member donations. Offer rewards for members donating.
  • Timeslips


    Have your members submit their race times and share with others.
  • Videos


    Allows your members to submit their own videos for community viewing. Support is included for all the major video sites.
  • Forms


    Build your own forms for your members without coding experience. Support included for pm, email and topics.
  • Collections


    Build a community database of items for your members. Full features custom fields included.

Photo

[IPS] Extended ipsLayout Grid


This topic has been archived. This means that you cannot reply to this topic.
No replies to this topic

#1 News Bot

News Bot

    Dedicated Member

  • Members
  • PipPipPipPipPip
  • 1,909 posts
  • IP.Board Version:N/A

Posted 19 January 2013 - 07:53 AM

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='http://img541.images...ndexphppage.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'>
&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='http://img96.imagesh...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 !

View Resource