Responsive DIY Template Default for v1.5.x

[rbarbour]

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

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.

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.

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

[DivaVocals]

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

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.

[rbarbour]

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

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.

[DivaVocals]

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

[rbarbour]

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

Kind of in a different country at the moment. Soon

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

[uswebworx]

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

[rbarbour]

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!

[uswebworx]

I'm sorry to hear that!

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