♥mommaroodles Posted February 12, 2014 Share Posted February 12, 2014 I've made osCommerce fully responsive and it is now available for the public at Github - the entire files are just to large to add to the Addons directory You can grab a copy here github.com/mommaroodles/responsive-html5-oscommerce. You can view a demo here: responsiveoscommerce.webwolf.co.za. Tbe best tool to use to view the demo is Malte Wassermann' Responsive Design Testing Tools lab.maltewassermann.com/viewport-resizer/ - Simply create yourself a set of bookmarklets and view the site. Basically what I've done is remove the standard Nathan Smith's 960gs.css and added his Unsemantic CSS Framework. Its only really the CSS that has changed - everything else is the same - so you should be able to continue adding addons to your store. Some of the html code has been changed in order for it to validate correctly as HTML5 - most of the pages do validate but there are some which still needs to be worked on. - Table attributes which are obsolete and for a few others - Ideally one should be able to convert any table to lists or divs so it shouldnt be such a major task if you css skills are above average. I'll write a tutorial outlining the changes to the applicable files for a clean vanilla install of osCommerce 2.3.3.4 and once I've completed that will add it as a add-on. I also have numerous cosmetic addons for this which i will make available free of charge, however there will be addons which will be premium. If anyone does have a look and plays around with it and like what they see, some positive feedback will go a long way, it keeps one motivated to continue with addons and developing the software. This is a great opportunity to learn something new and for those that like to DIY. I'm planning on making the admin section responsive and will release an Android application which will allow you to manage your admin area via your mobile device. Comments, suggestions, good or bad are welcome. Melanie "The doorstep to the temple of wisdom is a knowledge of our own ignorance." Link to comment Share on other sites More sharing options...
♥mommaroodles Posted February 12, 2014 Author Share Posted February 12, 2014 Just brief quote from Nathan Smith's web site - I'mn sure there are a lot of you that are already familiar with the 960gs.css Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages. "The doorstep to the temple of wisdom is a knowledge of our own ignorance." Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted February 12, 2014 Share Posted February 12, 2014 hello, congrats on this big effort ! I'ill be keeping an eye on github. I've done some customizations to my site to make it responsive. I have removed 960.gs and implemented a fluid system that doesn't require special css classes to set the width of different sections, rather it is done in the css. I just tried your site with my mini notebook (960 wide) and it triggers the mobile layout. So I wonder what would be required to make it so that you have a layout for small screens, medium (tablet) and desktop ? Or does this unsemantic system only supports 2 layouts ? KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
burt Posted February 12, 2014 Share Posted February 12, 2014 I like it. The "new products for" module definitely needs attention. The change from 3 columns to 1 column seems to happen at about 900px wide, where there is still enough space to have 3 wide (it defaults to 1 wide). Similar for the product listings in categories ate certain resolution - it gets very funky. I've been playing with grid layouts based on ul and li set to % of available resolution - this could be the way forward and dump the "standard" product listings. In the product page, there seems to be no "image" function in terms of colorbox or fancybox etc, I'm not sure if this is intended or an oversight ? In general, keep going with this and it might end up in a very good place. Link to comment Share on other sites More sharing options...
♥mattjt83 Posted February 13, 2014 Share Posted February 13, 2014 I really think the best way forward is to use a mobile-first approach as is done in the bootstrap 3 framework. It gives you 4 layout options, which can be used in conjunction with each other, starting with mobile sizes first. So imagine how everything just stacks on top of each other in certain responsive layouts but instead of that you can control if things should stack or just remain in their current location. I have tried several other options available on the web but bootstrap 3 has really just nailed it with their current release. You can just download the grid system and skip all the rest of their plugins and css if you'd like. Matt Link to comment Share on other sites More sharing options...
♥GLWalker Posted February 13, 2014 Share Posted February 13, 2014 @@mattjt83 100% Agreed. BS3 did nail it with this release, and it is much easier to work with than the framework that Foundation came out with in their "mobile first" release a year ago. Though BS3 may seem a bit large, as stated, you can run with it just using the css. They css is structured starting with a reset, so no need for addition resets. Buttons look great all around and are easily customized. My only real compliant is that I have to apply a class to the input fields in order to make them look nice - this is easily overcome by adding it to the input_field function, though it then becomes hardcoded into the osC function, which I would rather not see - so we can also add class using jQuery, but then we have to let it load first. Which way to go? @@mommaroodles Good job so far, what did you do to make the buttons as they are now? Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS! Link to comment Share on other sites More sharing options...
♥Loaded Commerce Posted February 14, 2014 Share Posted February 14, 2014 · Hidden by Jan Zonjee, February 14, 2014 - advertising? Hidden by Jan Zonjee, February 14, 2014 - advertising? Mobile responsive is very important. We have been working on mobile responsive for our oscommerce variant. we started with boilerplate and now rebuilt the front end template on BS 3 here is an example of our latest responsive template, which is free as well http://loadedlab.com/product/loaded7/current/ Best Regards, Salvatore Iozzia Loaded Commerce - Oscommerce - All Loaded Up. Link to comment
Roaddoctor Posted March 22, 2014 Share Posted March 22, 2014 building a 2.3.3.4 site using this Unsemantic CSS framework. For the most part it's going very well. This line in product_reviews.php, product_reviews_write.php, and product_reviews_info.php is problematic for me. The image and buynow button get forced into the column right. <div style="float: right; width: <?php echo SMALL_IMAGE_WIDTH+20; ?>px; text-align: center;"> Any guidance appreciated. -Dave Link to comment Share on other sites More sharing options...
Roaddoctor Posted March 22, 2014 Share Posted March 22, 2014 having only Heights set in configuration->images would seem to be my problem here. Any suggestions? thx -Dave Link to comment Share on other sites More sharing options...
Guest Posted April 22, 2014 Share Posted April 22, 2014 Hi Tried to download from github.com/mommaroodles/responsive-html5-oscommerce. but wouldn't work. Is this "locked" or is the address incorrect. Cheers Grandpa Link to comment Share on other sites More sharing options...
♥mommaroodles Posted April 22, 2014 Author Share Posted April 22, 2014 github.com/mommaroodles/responsive-html5-oscommerce/archive/master.zip "The doorstep to the temple of wisdom is a knowledge of our own ignorance." Link to comment Share on other sites More sharing options...
♥mommaroodles Posted April 22, 2014 Author Share Posted April 22, 2014 I've been hectically busy with a big project and i'm actually using the Unsemantic Framework in this project and as soon as I have time on my hands, I can devote more time to the html 5 responsive version. "The doorstep to the temple of wisdom is a knowledge of our own ignorance." Link to comment Share on other sites More sharing options...
shafa1827 Posted October 14, 2014 Share Posted October 14, 2014 Hi @@bruyndoncx I tried out the html5 responsive addon. it did work for me but the product listing is messed up and the columns go missing. I saw ur site and looks good. Can u help me with this? How did u manage to display it properly in a bigger screen? Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.