Forums / Addon Templates / Responsive DIY Template Default for v1.5.x

Responsive DIY Template Default for v1.5.x

Views: 48,346

Results 21 to 40 of 332
7 Oct 2013, 9:35 PM
#21
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Responsive DIY Template Default for v1.5.x

dw08gm:

  1. Where are the .offset css classes used?

They are not used in my free templates.

dw08gm:

  1. I see your /common/tpl_main_page.php retains the original table structure for its layout, whereas if the table layout was converted into divs and a fluid design approach adopted (see attached), much of the responsive code could be removed.

In my example,

  • column left floats left with width prescribed in %
  • column right floats right with width prescribed in %
  • centre column does not need a prescribed width as it is determined by % margins equal to the side column % widths.

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column. Notwithstanding that this critical width can be made to vary by manipulating the screen display using Ctrl - or + on a PC, the implication is that responsive code only has to test for a single critical width. At default Ctrl 0 display, my critical width is 575px for my three column fluid layout (before the horizontal scrollbar appears or overlapping occurs), which means all css @media (min-widths > 600px) could be dispensed with. Meanwhile I have max width set in the body tag at 1200px.

Hope this helps.

The code I provide in /common/tpl_main_page.php doesn't retain the original (table) structure for its layout in responsive mode. It retains the original (table) structure if one chooses to use it instead of the responsive layout (divs).

I added too not removed any CORE CODE for a reason, so the code could be easily adapted (merged) with existing templates (seeing how their are 1000's of them) instead of reinventing.

I haven't looked at your changes for I have been pressed for time, if it work, submit it for community consumption.

9 Oct 2013, 9:56 AM
#22
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

I am replying now that I have downloaded and tested.

dw08gm:

  1. Where are the .offset css classes used?

Not used in my free templates.

dw08gm:

  1. I see your /common/tpl_main_page.php retains the original table structure for its layout,

This template retains the original table structure for its layout ONLY if the admin configuration VALUE is 0 = Use Default Template Settings

dw08gm:

whereas if the table layout was converted into divs and a fluid design approach adopted

Did you even look at the code before you removed it?

Changing the admin configuration VALUE to anything other than 0 converts the original table structure to a div structure (responsive NOT fluid)

dw08gm:

(see attached), much of the responsive code could be removed.

With the file you attached, all the responsive code can be removed for the template is no longer responsive.

dw08gm:

In my example,

  • column left floats left with width prescribed in %
  • column right floats right with width prescribed in %
  • centre column does not need a prescribed width as it is determined by % margins equal to the side column % widths.

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column. Notwithstanding that this critical width can be made to vary by manipulating the screen display using Ctrl - or + on a PC, the implication is that responsive code only has to test for a single critical width. At default Ctrl 0 display, my critical width is 575px for my three column fluid layout (before the horizontal scrollbar appears or overlapping occurs), which means all css @media (min-widths > 600px) could be dispensed with. Meanwhile I have max width set in the body tag at 1200px.

Hope this helps.

No, it does not help and it is going to confuse the hell out of everyone.

FIRST

The main difference of a Fluid Layout (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.

I uploaded your file to 6 different dev templates MAINLY FOCUSED ON THIS TEMPLATE PACKAGE but the others (ranging from ZC Classic to my most modified one).

I even gave the body tag a max-width of 1200px (not even sure why that is needed, would make more sense to apply it to the mainWrapper).

RESULT: ONLY 1

1.) Each and every dev template BROKE, I want to say at every level imaginable but NONE got past the upload most likely due to the fact that all the responsive code in your file was GONE.

@dw08gm
The idea of a responsive 3 column layout (included side columns) that retain a specific % of the screens width is very doable and I am confident that you have it working but you most definitely left out the critical parts.

This templates package is for the conversion of one's existing template or a starting point for design a template using ZC stock code (including the HTML tables).

** CONTRIBUTORS NOTE **

**Uploading the attached file is done at your own accord.

I will not SUPPORT, TROUBLESHOOT, EXPLAIN or ENGAGE in reasons of why or why not. Please use a different support thread for IMO this file contradicts and is not compatible of the Original Template Package.**

9 Oct 2013, 5:01 PM
#23
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

No, it does not help and it is going to confuse the hell out of everyone.

FIRST

The main difference of a Fluid Layout (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.Excellent succinct explanation..

Before using this package, I had been working on a tableless/imageless Zen Cart template with admin controls to set the column widths, and with the help of the venerable niccol, it even included code to recalculate the column widths if either the left or right template was set to not display on certain pages. It worked great.. Except for one thing.. It's definitely a FLUID template, but it was NOT a RESPONSIVE template.. so on mobile devices it looked like many other fluid layouts do.. (mostly awful)

My point is that when I was working on this tableless/imageless masterpiece I was under the mistaken impression that many others are apparently still under.. Many still assume (incorrectly) that fluid design = responsive design.. Thanks to your EXCELLENT DIY Template Default package, I discovered that NOTHING could be further from the truth.. Fluid design is NOT the same thing as responsive.. Not by a LONG SHOT.. and if you start viewing some of these responsive templates in action, you can totally SEE the difference..

Responsive design is not shrinking the content to the screen size, it's about presenting a DIFFERENT layout optimized for mobile views..

Here's are some less succinct definitions

The main difference is that Fluid Layouts (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen. For some examples of both kinds of design, see Inspiration: Fluid & Responsive Design.

Fluid's intent is to keep the same spatial weighting to all elements, and works okay on different sizes of screens of the same sort. They tend to look okay on a 32", high resolution monitor and a 12" lower resolution laptop. They're pretty easy to implement.

Responsive design's intent is to serve different devices layouts tailored specifically for the type of screen. Your site's layout will generally be cut down to a single column on a smartphone for example.

For a deeper look, check out Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? by Smashing Magazine, which goes in depth on the primary changes in Fluid design. They also have Responsive Web Design Guidelines and Tutorials for an overview of responsive (with plenty of links should you want to dig deeper into Responsive Design).

Responsive Design is very much "in" at the moment thanks to Mobile, Smashing actually has a whole tag for responsive design.

Fluid Design means that different sections of the site are defined relatively (eg, an element is 50% of the page width). No matter what browser you're using: Smartphone, Tablet, Desktop, the site will look (mostly) the same and have the same proportions (this element will take up half the screen). This is because in your CSS, everything is defined in terms of percent, or ems, or some other metric that scales nicely from device to device (Whereas defining fixed sizes in pixels might make and element take up half the screen on a desktop, the whole screen on a tablet, and be bigger than the screen on a smartphone).

Responsive design is usually more on the programming side, where you detect the user's browser (via useragent) or the size of their screen, and actually show them a different view based on the size of their device. For example, you might use a three column layout for desktops, a two column layout for tablets, and a single column layout on smartphones. In this case, the view on each device looks very different, because you are actually changing the view based on the device.

(added these for those who, as my daddy used to say, still "don't believe that fat meat is greasy" and who will still want to INSIST that fluid=responsive:laugh:)

rbarbour:

I uploaded your file to 6 different dev templates MAINLY FOCUSED ON THIS TEMPLATE PACKAGE but the others (ranging from ZC Classic to my most modified one).

I even gave the body tag a max-width of 1200px (not even sure why that is needed, would make more sense to apply it to the mainWrapper).

RESULT: ONLY 1

1.) Each and every dev template BROKE, I want to say at every level imaginable but NONE got past the upload most likely due to the fact that all the responsive code in your file was GONE.

@dw08gm
The idea of a responsive 3 column layout (included side columns) that retain a specific % of the screens width is very doable and I am confident that you have it working but you most definitely left out the critical parts.

This templates package is for the conversion of one's existing template or a starting point for design a template using ZC stock code (including the HTML tables).And it works BEAUTIFULLY too!!!

One of these days I will attempt to make my tableless/imageless template responsive as well by applying your Responsive DIY Template to my tableless/imageless template.

rbarbour:

** CONTRIBUTORS NOTE **

**Uploading the attached file is done at your own accord.

I will not SUPPORT, TROUBLESHOOT, EXPLAIN or ENGAGE in reasons of why or why not. Please use a different support thread for IMO this file contradicts and is not compatible of the Original Template Package.**I do not blame you for posting this disclaimer..:no:

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

10 Oct 2013, 8:02 AM
#24
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,019
Plugin Contributions:
2

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

Not used in my free templates.

So why provide it without adequate explanatory notes.

rbarbour:

This template retains the original table structure for its layout ONLY if the admin configuration VALUE is 0 = Use Default Template Settings

Yes I understood as much.

rbarbour:

Did you even look at the code before you removed it?

I have looked at your code to considerable depth but have not removed anything from your code. The file I provided is my own working file exemplifying fluid design but has yet to incorporate anything like your code.[/QUOTE]

rbarbour:

Changing the admin configuration VALUE to anything other than 0 converts the original table structure to a div structure (responsive NOT fluid)

Yes I understood as much.

rbarbour:

With the file you attached, all the responsive code can be removed for the template is no longer responsive.

Not at all. The point I was making is that only the parts of the responsive code relating to screen widths above a certain critical value, as determined on a site by site basis, can be treated as superfluous (no pun intended).[/QUOTE]

rbarbour:

No, it does not help and it is going to confuse the hell out of everyone.

The file was not intended for anyone but yourself, as OP and author of the mod. Maybe I should have prefaced my post "Dear RBarbour - for your eyes only." You asked for feedback and I gave you some. You want some more, I will endeavour to give you more.[/QUOTE]

rbarbour:

The main difference of a Fluid Layout (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen.

Are you definitely saying here that Responsive Design cannot be used with Fluid Design? My point is that it can and that to do so would be more economical code-wise. However, it is early days yet and we have yet to see what zc1.60 has in store.

rbarbour:

I even gave the body tag a max-width of 1200px (not even sure why that is needed, would make more sense to apply it to the mainWrapper).

Because mainwrapper can and is used by myself otherwise. I will look into this further however.

rbarbour:

CONTRIBUTORS NOTE

For someone experienced in layouts as yourself, I am surprised that you chose to load it rather than only read or compare my file with others of its kind. Of course it would have caused the errors it did if loaded, especially since it was not supported by other files on which it relies, particularly its css file. I could have written copiously providing all sorts of disclaimers upon uploading the file, thereby sparing you from having to break out the red and bold black paint, however, as I have been discussing fluid code with you for many months now and have posted sizeable chunks of my fluid code on this forum since 2010, it is not like venturing onto new ground.

10 Oct 2013, 8:20 AM
#25
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

dw08gm:

Are you definitely saying here that Responsive Design cannot be used with Fluid Design? My point is that it can and that to do so would be more economical code-wise. However, it is early days yet and we have yet to see what zc1.60 has in store.

I don't think this was being stated or implied.. I think the only point rbarbour was making is that fluid design is not the same as responsive design.. The whole purpose of the Responsive DIY Template Default package is to provide a starting point to either create a responsive template or to convert a non responsive template into a responsive one..

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

10 Oct 2013, 8:29 AM
#26
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,019
Plugin Contributions:
2

Re: Responsive DIY Template Default for v1.5.x

DivaVocals:

(added these for those who, as my daddy used to say, still "don't believe that fat meat is greasy" and who will still want to INSIST that fluid=responsive:laugh:)

So am I to understand that you sincerely believe one cannot have a fluid design operating to a certain screen size and then a combined fluid-responsive design operating below that certain screen size.

DivaVocals:

I don't think this was being stated or implied.. I think the only point rbarbour was making is that fluid design is not the same as responsive design.. The whole purpose of the Responsive DIY Template Default package is to provide a starting point to either create a responsive template or to convert a non responsive template into a responsive one..

Added after seeing Post #25.

But that is exactly my point. If you read my posts carefully, surely you will have noticed my support for a combined fluid-responsive design, not one or the other.

10 Oct 2013, 9:29 AM
#27
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

dw08gm:

So am I to understand that you sincerely believe one cannot have a fluid design operating to a certain screen size and then a combined fluid-responsive design operating below that certain screen size.Not sure where you think I SAID this.. (because I didn't make any statement to this effect) so let me clarify what I am saying.. responsive design is more than just simple "fluid design". A simple (traditional) fluid design is not responsive since there are no media queries to "serve different devices layouts tailored specifically for the type of screen".. And a purely traditional fluid design will not look good at all screen sizes.. There is no combined "fluid-responsive design".. Responsive design meant to deliver a layout based on the device size, and this cannot happen unless the responsive layout is fluid to begin with.. Responsive design is MUCH MORE than just a simple (traditional) fluid layout..
Fluid Design means that different sections of the site are defined relatively (eg, an element is 50% of the page width). No matter what browser you're using: Smartphone, Tablet, Desktop, the site will look (mostly) the same and have the same proportions (this element will take up half the screen).

dw08gm:

But that is exactly my point. If you read my posts carefully, surely you will have noticed my support for a combined fluid-responsive design, not one or the other.If you look at ANY responsive template and in particular the subject of this support thread, the Responsive DIY Template package, you would see that responsive templates ARE fluid layouts..
Responsive design's intent is to serve different devices layouts tailored specifically for the type of screen. Your site's layout will generally be cut down to a single column on a smartphone for example.
It does this using CSS and media queries, and none of this works unless the base layout is fluid to begin with.. So speaking as if a responsive template is somehow not a fluid layout is a fallacy..

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

10 Oct 2013, 10:40 AM
#28
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

dw08gm:

Bottom line as stated earlier the code provided in the file you provided does nothing when uploaded as is and breaks the current template package at every level.

If this was intended for my eyes only, then perhaps is should have been PM'ed to me instead of posting for community consumption with the impressions that it would do what you stated it would.

According to the I R S, last year my time was valued at $198 per hour so any time I spend on free contributions is a huge loss to me so if I incorporate code that that has no purpose in it's release, I reassure you it will in future releases. I am already collaborating with ZC's largest and most talented free template contributor in doing so.

I stand by my contributors note and if you decide to include the code that makes this work, do it in your own thread for it alters this templates in a way that contradicts what its purpose is.


** CONTRIBUTORS NOTE **


Uploading the attached file is done at your own accord.

I will not SUPPORT, TROUBLESHOOT, EXPLAIN or ENGAGE in reasons of why or why not. Please use a different support thread for IMO this file contradicts and is not compatible of the Original Template Package.

10 Oct 2013, 5:36 PM
#29
sph avatar

sph

Totally Zenned

Join Date:
Jan 2006
Posts:
1,556
Plugin Contributions:
0

Re: Responsive DIY Template Default for v1.5.x

rbarbour:


** CONTRIBUTORS NOTE **

I think that most understand that dw08gm's file is a different animal. dw08gm may have a competeting system for responsive design, but I agree it should be a different thread...or private msg between you two if you have any further interest.

Steve
prommart.com

10 Oct 2013, 7:52 PM
#30
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

SPH:

I think that most understand that dw08gm's file is a different animal. dw08gm may have a competeting system for responsive design, but I agree it should be a different thread...or private msg between you two if you have any further interest.

I do have interest and dw08gm knows this, I have expressed that many times and I am always open to easier, less and more flexible code.

My point is exactly what you stated, it is a different animal but I'm not sure if dw08gm understands that himself.

And I quote:

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column.

This tells me that the attachment will work and does what dw08gm states it will when in fact it does not. Thats the point I was trying to make.

In my previous post the point was that everyone's time has a value hence the reason for the contributors note. I do not have the time to explain or walk people through why it doesn't work.

I stated it doesn't work as is and I quote

Of course it would have caused the errors it did if loaded, especially since it was not supported by other files on which it relies, particularly its css file.

Not only were the files it relies on not included, none of this templates configuration or structure were intact.

10 Oct 2013, 8:52 PM
#31
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

DivaVocals:

I don't think this was being stated or implied.. I think the only point rbarbour was making is that fluid design is not the same as responsive design.. The whole purpose of the Responsive DIY Template Default package is to provide a starting point to either create a responsive template or to convert a non responsive template into a responsive one..

Thank you

dw08gm:

So am I to understand that you sincerely believe one cannot have a fluid design operating to a certain screen size and then a combined fluid-responsive design operating below that certain screen size.

I quote myself:

@dw08gm
The idea of a responsive 3 column layout (included side columns) that retain a specific % of the screens width is very doable and I am confident that you have it working but you most definitely left out the critical parts.

dw08gm:

Added after seeing Post #25.

But that is exactly my point. If you read my posts carefully, surely you will have noticed my support for a combined fluid-responsive design, not one or the other.

Provide it and submit it for community consumption. It would be great for the community to have multiple choices.

12 Oct 2013, 3:25 PM
#32
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

VERSION 2.0 is going through some final testing and sent to a collaborator for testing as well.

What to expect:

This new version will be a little more advanced and flexible for the developers out there with a few more admin features for the shop owners.

1.) First and foremost:
1.a) A well documented responsive.css file.
1.b) An EXAMPLE responsive.css file showing some different tricks to alter the layout.
1.c) Added CSS Media Queries with lists of the most popular mobile phones and tablets (portrait and landscape) widths (about 75).

2.) Includes unused original responsive.css id's and classes such as (.offset) to:
2a.) Set different side column widths.

3.) Added new col (px and %)'s calculations for more side column width choices.
3a.) Altered ADMIN Side column choices to include: 75px 120px 150px 180px 225px 240px
3b.) ZC stock ADMIN configurations for Column Width - Left/Right (Boxes) will be disabled and unusable in responsive mode.

4.) Added ADMIN configuration to:
4a.) Use as template default (HTML Tables). Not responsive.
4b.) Use as template responsive (Div;s). Responsive where side columns shrink with re-sizing of screen and where center column clears left column and right column clears center column so they are stacked at chosen CSS Media Queries. (Current releases layout).
4c.) Use as template responsive-fluid (Div;s). Responsive where side columns retain the fluid side column widths (75px 120px 150px 180px 225px 240px) without shrinking until the (critical) width you set in appropriate CSS Media Query at which point the center column clears left column and right column clears center column so they are stacked at chosen CSS Media Queries.

(4c.) Is a RESPONSIVE-FLUID design not a FLUID-RESPONSIVE design for the left, center and right columns are wrapped in the responsive code where the center content will still shrink with re-sizing of screen.

This means the as a developer or shop owner you consider your side column content to be of more value than the center column content (product info).

5.) Included some responsive.css Bug fixes

6.) Included popup window bug fixes so that, example would be the popup image window. Has yet to be reported but currently without an appearance plugin such as light-box or jQZoom it does not display image at large widths or heights.

12 Oct 2013, 5:02 PM
#33
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

Fantastic! I assume for those of us using v1.0 that upgrading will be fairly painless... right???:D > rbarbour:

VERSION 2.0 is going through some final testing and sent to a collaborator for testing as well.

What to expect:

This new version will be a little more advanced and flexible for the developers out there with a few more admin features for the shop owners.

1.) First and foremost:
1.a) A well documented responsive.css file.
1.b) An EXAMPLE responsive.css file showing some different tricks to alter the layout.
1.c) Added CSS Media Queries with lists of the most popular mobile phones and tablets (portrait and landscape) widths (about 75).

2.) Includes unused original responsive.css id's and classes such as (.offset) to:
2a.) Set different side column widths.

3.) Added new col (px and %)'s calculations for more side column width choices.
3a.) Altered ADMIN Side column choices to include: 75px 120px 150px 180px 225px 240px
3b.) ZC stock ADMIN configurations for Column Width - Left/Right (Boxes) will be disabled and unusable in responsive mode.

4.) Added ADMIN configuration to:
4a.) Use as template default (HTML Tables). Not responsive.
4b.) Use as template responsive (Div;s). Responsive where side columns shrink with re-sizing of screen and where center column clears left column and right column clears center column so they are stacked at chosen CSS Media Queries. (Current releases layout).
4c.) Use as template responsive-fluid (Div;s). Responsive where side columns retain the fluid side column widths (75px 120px 150px 180px 225px 240px) without shrinking until the (critical) width you set in appropriate CSS Media Query at which point the center column clears left column and right column clears center column so they are stacked at chosen CSS Media Queries.

(4c.) Is a RESPONSIVE-FLUID design not a FLUID-RESPONSIVE design for the left, center and right columns are wrapped in the responsive code where the center content will still shrink with re-sizing of screen.

This means the as a developer or shop owner you consider your side column content to be of more value than the center column content (product info).

5.) Included some responsive.css Bug fixes

6.) Included popup window bug fixes so that, example would be the popup image window. Has yet to be reported but currently without an appearance plugin such as light-box or jQZoom it does not display image at large widths or heights.

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

12 Oct 2013, 5:41 PM
#34
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

DivaVocals:

Fantastic! I assume for those of us using v1.0 that upgrading will be fairly painless... right???:D

Nope it will be like upgrading Zen Cart from 1.3.x to 1.5.x (JUST KIDDING)

Painless indeed:

Simply coping your custom css rules to the new CSS Media Queries and overriding responsive.css.

Only 3 changes (additions) made, merges needed to the tpl_main_page.php file.

Running a simple sql query to ADD and ALTER current ADMIN Configurations.

12 Oct 2013, 6:40 PM
#35
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

Outstanding! Any ETA on when this will be available for public consumption??

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

14 Oct 2013, 3:59 AM
#36
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

DivaVocals:

Outstanding! Any ETA on when this will be available for public consumption??

Kind of in a different country at the moment. Soon :smile:

22 Oct 2013, 4:51 PM
#37
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

VERSION 2.0 is going through some final testing and sent to a collaborator for testing as well.

What to expect:

This new version will be a little more advanced and flexible for the developers out there with a few more admin features for the shop owners.

1.) First and foremost:
1.a) A well documented responsive.css file.
1.b) An EXAMPLE responsive.css file showing some different tricks to alter the layout.
1.c) Added CSS Media Queries with lists of the most popular mobile phones and tablets (portrait and landscape) widths (about 75).

2.) Includes unused original responsive.css id's and classes such as (.offset) to:
2a.) Set different side column widths.

3.) Added new col (px and %)'s calculations for more side column width choices.
3a.) Altered ADMIN Side column choices to include: 75px 120px 150px 180px 225px 240px
3b.) ZC stock ADMIN configurations for Column Width - Left/Right (Boxes) will be disabled and unusable in responsive mode.

4.) Added ADMIN configuration to:
4a.) Use as template default (HTML Tables). Not responsive.
4b.) Use as template responsive (Div;s). Responsive where side columns shrink with re-sizing of screen and where center column clears left column and right column clears center column so they are stacked at chosen CSS Media Queries. (Current releases layout).
4c.) Use as template responsive-fluid (Div;s). Responsive where side columns retain the fluid side column widths (75px 120px 150px 180px 225px 240px) without shrinking until the (critical) width you set in appropriate CSS Media Query at which point the center column clears left column and right column clears center column so they are stacked at chosen CSS Media Queries.

(4c.) Is a RESPONSIVE-FLUID design not a FLUID-RESPONSIVE design for the left, center and right columns are wrapped in the responsive code where the center content will still shrink with re-sizing of screen.

This means the as a developer or shop owner you consider your side column content to be of more value than the center column content (product info).

5.) Included some responsive.css Bug fixes

6.) Included popup window bug fixes so that, example would be the popup image window. Has yet to be reported but currently without an appearance plugin such as light-box or jQZoom it does not display image at large widths or heights.

Change of plans - (SORRY)

I have been playing with 2.0 for about a week now, holding back from my co-collaborators (SORRY).

As I continue to see what other contributors, 3rd party template providers and "shop owners" are altering and trying to accomplish using the current version I have decided that adding more options would be a vain attempt.

So instead, I have decided to:

Alter the /tpl_main_page.php
1.) Removes all the if statements that call the center column responsive css col classes and added a simple calculation function.

Altered the responsive CSS code
1.) I cleaned this up so only the wrapper & col classes are used now
2.) I broke the px & % calculation into 10th;s (code includes 120-10px columns)
3.) I included detailed touch and don't touch instructions
4.) I included examples using different media query expressions
4.a) Media Types (screen and handheld)
4.b) Orientation (landscape or portrait)
4.c) Aspect Ratio
4.d) Pixel Ratio
4.e) Resolution
5.) I included over 100 different (popular) media queries with attached devices (phones, tablets, laptops, desktops)

Altered the ADMIN configurations
1.) Now the Activation for the responsive code will be 0=no and 1=yes, removing the preset widths
2.) Adding the px & % calculation to include 120-10px columns allows us to use ZC;s stock Column Width - Left and Column Width - Right configurations adding are own side column widths (whatever we choose) in 10px increments of course. 50px, 70px, 120px, 150px, 180px, ect. and can now have different values for left and right.

I removed the option for a RESPONSIVE-FLUID design. This will be offered separate as it's own template and will be available soon.

22 Oct 2013, 4:55 PM
#38
uswebworx avatar

uswebworx

Zen Follower

Join Date:
Sep 2006
Location:
USA
Posts:
297
Plugin Contributions:
0

Re: Responsive DIY Template Default for v1.5.x

Can't wait to see it. Thanks for your hard work! I made the mistake of buying a responsive template.

Signature not needed

22 Oct 2013, 5:01 PM
#39
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

uswebworx:

Can't wait to see it. Thanks for your hard work! I made the mistake of buying a responsive template.

I'm sorry to hear that!

22 Oct 2013, 5:21 PM
#40
uswebworx avatar

uswebworx

Zen Follower

Join Date:
Sep 2006
Location:
USA
Posts:
297
Plugin Contributions:
0

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

I'm sorry to hear that!

Me too, but that's another thread or I will PM you and not clutter the thread

Signature not needed