Fully Responsive and HTML5 version of osCommerce available

[♥mommaroodles]

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

[♥mommaroodles]

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.

 

[♥bruyndoncx]

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 ?

[burt]

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.

[♥mattjt83]

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.

[♥GLWalker]

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

[♥Loaded Commerce]

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/

[Roaddoctor]

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.

[Roaddoctor]

having only Heights set in configuration->images would seem to be my problem here. Any suggestions? thx

[Guest]

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

[♥mommaroodles]

github.com/mommaroodles/responsive-html5-oscommerce/archive/master.zip

[♥mommaroodles]

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.

[shafa1827]

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?