Responsive Framework

[Ajouz ♞]

File Name: Responsive Framework

File Submitter: Ajouz ♞

File Submitted: 19 Jan 2013

File Category: Look and Feel

news: License update

this is a package with (Skin/Hook)
1-Default Skin :
a- convert ipslayout to be fluid
b- add a 12 column Grid
c-responsive skin layout

2-Responsive Hook:
A Hook can make your custom skin responsive.
to do this : install the hook and in your custom skin open the template global-templates -->responsive_js and find

$this->settings['enable-responsive-in-this-skin']=0

replace it by

$this->settings['enable-responsive-in-this-skin']=1

Demo :http://www.ips-skins.com/skinchange.php?id=116Some information regarding the package /**************************/ 12 column ipsLayout Grid : 1-we convert current ipsLayout to be fluid ( percentage not by PX ) 2- includes extended 12 column ipsLayout 3- includes media queries to make default skin responsive as possible without any html edit 4-includes one mini js to make the nav tiny in small browserswhat is the benefit ? 1-you still can use the default ipsLayout html structure ,so no confilct with the ips addon's or third-party apps , moreover fluid layout is better for large screens . 2-you can use the extended ipsLayout grid and create many many different layouts basic HTML Markup

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

you can also use the classes margin-left-x or margin-right-x to add margin to each col in right or left

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

you can still use default IPS Layout Html Markup like

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

where in this case
tiny = one block
small=two block
large=three block
big= four block
huge=five block


License :
you can use this for Free/Paid projects only in IPS MarketPlace under these condition:
1-please do not remove my copyright in my css
2- please add in your file description a link to this file

We Support You Using:
The support topic .

You Support Us Using:
every magic comes with a price !


Enjoy !

here to download this file

[Jimi Wikman]

Very nice :)

I will test it and see if I can find any way to improve your hard work :)

Thank you for taking time to do this, it is much appreciated.

[StefanV]

There is a small bug on OSX + Chrome. It seems like ipsLayout_content is not styled correctly

[Ajouz ♞]

skin updated .
best regards

[teez]

Really good! (w00t)

[PrettyPixels]

Thanks for doing this -- it looks great! :)

One thing I did notice. The menu / navigation bar shrinks correctly when the browser is minimized, but it doesn't expand again once the browser window is expanded. The last menu item is first, followed by a menu that says "Navigation."

[Ajouz ♞]

Really good! (w00t)

Thanks for doing this -- it looks great! :smile:

One thing I did notice. The menu / navigation bar shrinks correctly when the browser is minimized, but it doesn't expand again once the browser window is expanded. The last menu item is first, followed by a menu that says "Navigation."

Many Thanks.

the skin use the build-in shrank/minimize by the default skin . I tried to keep things simple as possible .My target is to make it with zero edits , just by adding extra css file . the shrank/ minimize function is by loading the page not by re-size the browser .

anther possibility to do this as you like is to use custom nav js like this one

http://tinynav.viljamis.com/ .

Thanks for your feedback and bug report .

[PrettyPixels]

I tried to keep things simple as possible .My target is to make it with zero edits , just by adding extra css file . the shrank/ minimize function is by loading the page not by re-size the browser .

anther possibility to do this as you like is to use custom nav js like this one

http://tinynav.viljamis.com/ .

Thanks for your feedback and bug report .

The idea of doing this without file edits is brilliant. Thanks also for the menu idea -- I'll look into it! :)

[najaru_1]

simply fantastic work

[salma al3labi]

is this can be work with my custom skin?

[Ajouz ♞]

yes it can be work with custom skins. you need just to copy the css into your skin.

if your custom skin is going to be post for sale in "invision market" then also you can use my css for free, you need only to keep my copyright in my css .

[Diana101]

I've sent you PMs 3 weeks ago to let you know that you need to make your skin compatible to 3.4 - because I've been having some issues with it on my board. I've even left you a post on your board regarding the problem, but you haven't gotten back to me yet. I've contacted IPS about the issues I've been having on my board, and they said that you need to make the skin compatible with their 3.4 version. How long more do you plan to have me waiting around for you to do something about the skin?

[StefanV]

It's just me or there is a scaling issue in osx + chrome (see screenshot)? Please note that browser scaling is 100% (I've double checked). Everything looks bigger.

[edit] first screenshot is with the responsive theme and the second one with the default skin

[Ajouz ♞]

It's just me or there is a scaling issue in osx + chrome (see screenshot)? Please note that browser scaling is 100% (I've double checked). Everything looks bigger.

[edit] first screenshot is with the responsive theme and the second one with the default skin

the skin is powered by percentage layout grid. if the screen is big the skin try to scale to fit it .

if you want only the responsive css without percentage layout.grid then use the responsive hook in the package.

Best regards.

[joelle]

Is is also possible to have a responsive theme with a maximum width size e.g 1000px?

This way we could use the responsive theme adjustments when users browse the site with a tablet or a mobile device and also have better ad conversions having a max. width size for users who have 21.5 to 30 inch monitors.

Or should the ads then also be responsive?

[Ajouz ♞]

responsive also for large screens, not only for small tablets. this is why I added a percentage layout .
you can generally choose responsive breakpoints to be suitable for your site.
for responsive ads: ads can be changed to be responsive, but you should be carefull since some ads company do not accept modifying ads.
recently google accept modifying it
http://adsense.blogspot.de/2013/05/updates-to-our-modifying-ad-code-policy.html

[sunnmagic]

Hi,

How can I do to automatically set this skin only for the mobile skin ?

[Ajouz ♞]

Hi,

How can I do to automatically set this skin only for the mobile skin ?

not sure if I understand the question?

if you mean using it instead of the mobile skin then you can use

Manage User Agent Mapping from skin settings.

also this can be also done with a small hook (two php lines hook), any coder can do this for you .

[sunnmagic]

not sure if I understand the question?
if you mean using it instead of the mobile skin then you can use
Manage User Agent Mapping from skin settings.
also this can be also done with a small hook (two php lines hook), any coder can do this for you .

Yes, I mean using it instead of the mobile skin :smile:

I've changed the user agents, even on the IPB default mobile skin, but it's still the IPB default mobile skin that is displayed on a mobile... :/

If someone can help me with this hook, that will be nice !...

Edit : It seems to work, thanks !

[sunnmagic]

There is a small problem. When you are on a mobile device, watching a topic, each posts keep a margin left to 185px, and I can't find where I can change this settings... in the css files, nothing :/

[Ajouz ♞]

There is a small problem. When you are on a mobile device, watching a topic, each posts keep a margin left to 185px, and I can't find where I can change this settings... in the css files, nothing :/

I did not noticed this , what is the mobile device you use?

[sunnmagic]

I did not noticed this , what is the mobile device you use?

If you just try to resize your browser on your computer, you can see this :)

[Ajouz ♞]

it is not work like this. some css load in page loading.after resizing the page reload the page and check the problem. if it is still exist then please post a screenshot .
bests

[sunnmagic]

Here you can see the problem on a iPhone :

[sunnmagic]

it is not work like this. some css load in page loading.after resizing the page reload the page and check the problem. if it is still exist then please post a screenshot .
bests

Do you have news for me ? :(