960 for XOOPS 2.0: Mobile Support
Category : Themes
Published by insraq on 27-Nov-2010 14:35
I've been so busy recently and disappeared from the XOOPS community for some time. I haven't released any new theme for a few months and the XOOPS on my lap top was still 2.4.x. Up till last week, I first busy checking out XOOPS 2.5 and I am very impressed. The new backend rocks! I especially like the new block manager.
X3 Alpha has been released. The code is still in its germ but the architecture is very promising. I will definitely look at theme engine if I have time.
Meanwhile, I release 960 for XOOPS 2.0. The most significant change in this version is the mobile support. I've got a Android handset and I very often surf the Web with it since I have full WiFi coverage here. Many websites have a mobile version which makes things much better: It is simply killing me to browse a complicated web page using mobile browsers.
However, it seems that XOOPS themes still lack mobile support (or there might have been some solutions but I am not aware of them since I was away for some time). So I've rewritten 960 for XOOPS to add mobile support.
The mobile support is kind of "automatic". Let me first explain how it works.
It is based on CSS3 Media Queries. In usual case, the web page looks like normal layout:
However, if the screen max-width is less than 960px (might not be exact due to different browser rendering), the layout will automatically changed to "mobile version".
The above screenshots are captured in Firefox, you should notice there is no horizontal scroll bar and there is only one column: all the other columns are "squeezed" down to the one column, which suits the screen size of mobile devices. The images will also be "squeezed" to the max-width of screen to avoid some large pictures breaking the layout.
There is a demo here. In order to achieve the best result. You might need to reorganized the blocks to make sure that when reduced to mobile version, the most important blocks are shown at the top and the web page will not be too long.
I get inspiration from Less Framework 3 and 1140px GSS Grid. I originally wanted to port one of them to XOOPS but I've noticed that those two frameworks are licensed under CC. In order not to cause license problems, I rewrite my own version based on 960 for XOOPS. So the license is GPL, which I believe will not cause any problem.
Also, in this version, I add some styles too make the default style does not look too bad. I remove 16-column, prefix, postfix, push related code (They are never supported but I retain the code in previous version to keep compatibility with 960 official version).
The stable version can be found here. And of course you can check out SVN for latest unstable version.
I might not have time to check out the comments, so if you find any bugs, please report to me by filling this form or email to insraq.org AT gmail DOT com
I don't have time to prepare a full tutorial. But the code is very well commented and it is no difference from using original 960. So you can find a tutorial for 960 framework for reference. And if you derive a theme based on this, I'd be very happy to know. Feel free to send me an email.
Hope you have fun!
X3 Alpha has been released. The code is still in its germ but the architecture is very promising. I will definitely look at theme engine if I have time.
Meanwhile, I release 960 for XOOPS 2.0. The most significant change in this version is the mobile support. I've got a Android handset and I very often surf the Web with it since I have full WiFi coverage here. Many websites have a mobile version which makes things much better: It is simply killing me to browse a complicated web page using mobile browsers.
However, it seems that XOOPS themes still lack mobile support (or there might have been some solutions but I am not aware of them since I was away for some time). So I've rewritten 960 for XOOPS to add mobile support.
The mobile support is kind of "automatic". Let me first explain how it works.
It is based on CSS3 Media Queries. In usual case, the web page looks like normal layout:
However, if the screen max-width is less than 960px (might not be exact due to different browser rendering), the layout will automatically changed to "mobile version".
The above screenshots are captured in Firefox, you should notice there is no horizontal scroll bar and there is only one column: all the other columns are "squeezed" down to the one column, which suits the screen size of mobile devices. The images will also be "squeezed" to the max-width of screen to avoid some large pictures breaking the layout.
There is a demo here. In order to achieve the best result. You might need to reorganized the blocks to make sure that when reduced to mobile version, the most important blocks are shown at the top and the web page will not be too long.
I get inspiration from Less Framework 3 and 1140px GSS Grid. I originally wanted to port one of them to XOOPS but I've noticed that those two frameworks are licensed under CC. In order not to cause license problems, I rewrite my own version based on 960 for XOOPS. So the license is GPL, which I believe will not cause any problem.
Also, in this version, I add some styles too make the default style does not look too bad. I remove 16-column, prefix, postfix, push related code (They are never supported but I retain the code in previous version to keep compatibility with 960 official version).
The stable version can be found here. And of course you can check out SVN for latest unstable version.
I might not have time to check out the comments, so if you find any bugs, please report to me by filling this form or email to insraq.org AT gmail DOT com
I don't have time to prepare a full tutorial. But the code is very well commented and it is no difference from using original 960. So you can find a tutorial for 960 framework for reference. And if you derive a theme based on this, I'd be very happy to know. Feel free to send me an email.
Hope you have fun!