Responsive DIY Template Default for v1.5.x

lat9:

Thanks a bunch for this! I just have a question and a suggestion regarding the Mobile_Detect.php script:

Question: Why did you choose to put the class file in the store's root directory instead of /includes/classes?

Their were several discussions regarding the placement of this file for many reasons (mainly automatic ftp updates) and at the end, in short "it just didn't" get moved.

Honestly I was more focused on making the conversion from 1.0 to 2.0 as easy and painless as possible.

Simplifying and commenting 2.0 was a full time job in it's own. lol

lat9:

Suggestion: For a future release, only load the class file if it hasn't already been loaded. There might be other plugins that need the mobile-detection script loaded during page-header processing.

if (!class_exists('Mobile_Detect')) {
include_once 'Mobile_Detect.php';
}

Already changed and commented in master for 2.1 :smile:

rbarbour:

Already changed and commented in master for 2.1 :smile:
Many thanks!

I'm geting:
"warning, an error occured, please refresh the page"

FYI
At first I had forgot the sql patch, and had uploaded the files, and changed template, after that I did the patch, but got same error; at this point I deleted everything, and restarted deom the patch, but still get the error.

I am sure it's something I am missing, would please give me a hint.

Thank you.

keneso:

I'm geting:
"warning, an error occured, please refresh the page"

FYI
At first I had forgot the sql patch, and had uploaded the files, and changed template, after that I did the patch, but got same error; at this point I deleted everything, and restarted deom the patch, but still get the error.

I am sure it's something I am missing, would please give me a hint.

Thank you.

What does the error in your error logs say?

Here is the error log:

PHP Fatal error: 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'sql statements only for a new responsive template install **********************' at line 1 :: USE these sql statements only for a new responsive template install
**************************************************************************************************************** ALTER TABLE layout_boxes ADD show_box_min_width TINYINT( 1 ) NOT NULL DEFAULT '1' AFTER layout_box_status_single; in /public_html/zencart/includes/classes/db/mysql/query_factory.php on line 120

Thank you

keneso:

I'm geting:
"warning, an error occured, please refresh the page"

FYI
At first I had forgot the sql patch, and had uploaded the files, and changed template, after that I did the patch, but got same error; at this point I deleted everything, and restarted deom the patch, but still get the error.

I am sure it's something I am missing, would please give me a hint.

Thank you.

keneso:

Here is the error log:

PHP Fatal error: 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'sql statements only for a new responsive template install **********************' at line 1 :: USE these sql statements only for a new responsive template install
**************************************************************************************************************** ALTER TABLE layout_boxes ADD show_box_min_width TINYINT( 1 ) NOT NULL DEFAULT '1' AFTER layout_box_status_single; in /public_html/zencart/includes/classes/db/mysql/query_factory.php on line 120

Thank you

You are getting the error because show_box_min_width exists from original install.

You would need to change ADD to DELETE to completely uninstall.

Comment out or remove that section from the query, and try running the install query again.

Nope, it wasn't what you suggested ... the problem was/is ME!

My bad!
First I forget the patch, then I miss reading the patch, and just select all, and copy/paste it.
So I go, and actually read, and I see:
USE these sql statements only for a new responsive template install
and
USE this sql if upgrading from 1.0 to 2.0

Ooohhhh ... I get it, I ONLY have to copy/paste the first part!

Thank you.

If I may suggest for the next version please make two files (new, and upgrade) for dummies like me. ;)

keneso:

Nope, it wasn't what you suggested ... the problem was/is ME!

My bad!
First I forget the patch, then I miss reading the patch, and just select all, and copy/paste it.
So I go, and actually read, and I see:
USE these sql statements only for a new responsive template install
and
USE this sql if upgrading from 1.0 to 2.0

Ooohhhh ... I get it, I ONLY have to copy/paste the first part!

Thank you.

If I may suggest for the next version please make two files (new, and upgrade) for dummies like me. ;)

Taken into consideration.

I'm glad you got it sorted out!

Hi rbarbour,
I'm nowhere close to understanding any of this, but what do you think about your responsive program being loaded into the new zencarts, so when someone first finds zencart and downloads it, they get a responsive zencart straight away.
If they want to change to another template, they would be welcome to, but the basic one would be a fully functioning responsive cart, just waiting for the people to add their categories and all the things you do to make a new website.
As mobiles are becoming the new way to do things, can you see Zencart going the same way?

From what I understand, you are the brains behind the whole responsive thing, and I thank you from the bottom of my heart for it. Maybe one day, I'll actually be able to understand it.

Thanks
Jenvin

Jenvin:

Hi rbarbour,
I'm nowhere close to understanding any of this, but what do you think about your responsive program being loaded into the new zencarts, so when someone first finds zencart and downloads it, they get a responsive zencart straight away.
If they want to change to another template, they would be welcome to, but the basic one would be a fully functioning responsive cart, just waiting for the people to add their categories and all the things you do to make a new website.
As mobiles are becoming the new way to do things, can you see Zencart going the same way?

From what I understand, you are the brains behind the whole responsive thing, and I thank you from the bottom of my heart for it. Maybe one day, I'll actually be able to understand it.

Thanks
Jenvin

You are aware that the plan for Zen Cart v1.6 IS that the default (AKA "Classic") template WOULD be a responsive template..

Off topic: this is OFFICIALLY my 8000th post on the forum!!!:clap:

DivaVocals:

You are aware that the plan for Zen Cart v1.6 IS that the default (AKA "Classic") template WOULD be a responsive template..

Off topic: this is OFFICIALLY my 8000th post on the forum!!!:clap:

LOL Congratulations on your 8000th Post.

No, I wasn't aware that was the plan. Sounds great! :D

Jenvin:

Hi rbarbour,
I'm nowhere close to understanding any of this, but what do you think about your responsive program being loaded into the new zencarts, so when someone first finds zencart and downloads it, they get a responsive zencart straight away.
If they want to change to another template, they would be welcome to, but the basic one would be a fully functioning responsive cart, just waiting for the people to add their categories and all the things you do to make a new website.
As mobiles are becoming the new way to do things, can you see Zencart going the same way?

From what I understand, you are the brains behind the whole responsive thing, and I thank you from the bottom of my heart for it. Maybe one day, I'll actually be able to understand it.

Thanks
Jenvin

As stated, v160 is slated to include a responsive template_default, not sure about the classic template. Not all templates are designed to be responsive so creating or incorporating the responsive code to transform all templates would be impossible.

This template was originally designed so one could merge it's responsive code with an existing template and to show how easy it really is. v160 template_default;s coding may not even be close to what you see within this template, still unsure what framework will be used if any and may make this template and any template prior to v160 void.

rbarbour:

As stated, v160 is slated to include a responsive template_default, not sure about the classic template. Not all templates are designed to be responsive so creating or incorporating the responsive code to transform all templates would be impossible.

This template was originally designed so one could merge it's responsive code with an existing template and to show how easy it really is. v160 template_default;s coding may not even be close to what you see within this template, still unsure what framework will be used if any and may make this template and any template prior to v160 void.

The roadmap says that the default "Classic" template will get a facelift and it will be responsive..

Jenvin:

LOL Congratulations on your 8000th Post.I was hoping for a cake.. (or some cool Zen Cart gear..) :laugh:

Jenvin:

No, I wasn't aware that was the plan. Sounds great! :D

From the official roadmap thread..

v1.6.0 - Primarily sporting A NEW TEMPLATE

** a) We are currently working on a whole new updated template for v1.6. **
We have long been aware that the look of our current "default" out-of-the-box "classic" template is old fashioned, rather drab, and doesn't present our core product in the best of light. Well, that's changing soon!

** The new template sports the following important features:**

• a new modern look and feel

• built specifically for HTML5, will be able to take advantage of CSS3 features where appropriate.

• responsive, and therefore works just as well on mobile/tablet displays as on desktops.

• easier to skin and adapt to custom requirements. There are even plans to prepare a style-guide to help designers put together their custom template updates more quickly and easily.

• lightbox for product images.

• jQuery support built-in.

• and much more.

I believe that the ordering of the media queries that are max-width-dependent are improperly ordered in the CSS files (see this article for more information: http://stackoverflow.com/questions/8790321/why-do-the-order-of-media-queries-matter-in-css).

For instance, in the responsive_default.css file for v2.0, the media queries are ordered as:

@media (max-width:480px){}
@media (max-width:767px){}
@media (min-width:768px) and (max-width:979px){}
@media (max-width:979px){}
@media (min-width:980px){}
@media (max-width:1200px){}

With this ordering, a 480px-wide screen will have **all **styling applied (except for the min:768/max:979 and the min:980 styles) since the width of the screen does not exceed those maximums. To have the screen-size-specific styling "cascade" properly, I think that the media queries should be reordered as:

@media (min-width:980px){}
@media (max-width:1200px){}
@media (max-width:979px){}
@media (max-width:767px){}
@media (max-width:480px){}
@media (min-width:768px) and (max-width:979px){}

lat9:

I believe that the ordering of the media queries that are max-width-dependent are improperly ordered in the CSS files (see this article for more information: http://stackoverflow.com/questions/8790321/why-do-the-order-of-media-queries-matter-in-css).

For instance, in the responsive_default.css file for v2.0, the media queries are ordered as:

@media (max-width:480px){}
@media (max-width:767px){}
@media (min-width:768px) and (max-width:979px){}
@media (max-width:979px){}
@media (min-width:980px){}
@media (max-width:1200px){}

> With this ordering, a 480px-wide screen will have **all **styling applied (except for the min:768/max:979 and the min:980 styles) since the width of the screen does not exceed those maximums.  To have the screen-size-specific styling "cascade" properly, I think that the media queries should be reordered as:
> ```
@media (min-width:980px){}
@media (max-width:1200px){}
@media (max-width:979px){}
@media (max-width:767px){}
@media (max-width:480px){}
@media (min-width:768px) and (max-width:979px){}

In 2.0, the responsive_default.css file media queries are for fallback and examples of common media queries only and have no effect on the mobile or tablet views and it doesn't matter the order of the media queries it returns true or false in any order.

Ah, OK. Unfortunately, I'm using a template based on v1.0 of this plugin ... so I'm guessing that order matters for those current templates?

lat9:

For instance, in the responsive_default.css file for v2.0, the media queries are ordered as:

lat9:

Ah, OK. Unfortunately, I'm using a template based on v1.0 of this plugin ... so I'm guessing that order matters for those current templates?

What ever the version, media queries do not NEED to be in any specific order, they return TRUE or FALSE based on the browsers viewpoint and returns CSS rules accordingly as long as the media queries do not overlap.

I must respectfully disagree, the ordering does matter. Here's a couple of teeny testcases that illustrate.

First, with the maximum-width queries in descending width order, you'll see that a 360x640 screen displays white text on a red background and a 640x360 screen displays red text on a white background.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A media query test</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta name="robots" content="noindex, nofollow" />
<style type="text/css">
body {
background-color: blue;
color: green;
}

@media (max-width: 767px) {
body { background-color: white; color: red; }
}

@media (max-width: 480px) {
body { background-color: red; color: white; }
}
</style>
</head>

<body>
<div>What background color am I?</div>
</body>

</html>

Now, reverse the order of the two maximum-width queries (so that they're in ascending order) and you'll see that there is no change in color/background-color between the 360x640 and 640x360 views. That's because the media-queries "cascade" down through the definition and since the query for the max:767 is later in the file, it takes precedence.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A media query test</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta name="robots" content="noindex, nofollow" />
<style type="text/css">
body {
background-color: blue;
color: green;
}

@media (max-width: 480px) {
body { background-color: red; color: white; }
}

@media (max-width: 767px) {
body { background-color: white; color: red; }
}

</style>
</head>

<body>
<div>What background color am I?</div>
</body>

</html>

lat9:

I must respectfully disagree, the ordering does matter. Here's a couple of teeny testcases that illustrate.

First, with the maximum-width queries in descending width order, you'll see that a 360x640 screen displays white text on a red background and a 640x360 screen displays red text on a white background.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A media query test</title> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta name="robots" content="noindex, nofollow" /> <style type="text/css"> body { background-color: blue; color: green; }

@media (max-width: 767px) {
body { background-color: white; color: red; }
}

@media (max-width: 480px) {
body { background-color: red; color: white; }
}
</style>

</head> <body> <div>What background color am I?</div> </body> </html> ``` > Now, reverse the order of the two maximum-width queries (so that they're in ascending order) and you'll see that there is no change in color/background-color between the 360x640 and 640x360 views. That's because the media-queries "cascade" down through the definition and since the query for the max:767 is later in the file, it takes precedence. > ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A media query test</title> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta name="robots" content="noindex, nofollow" /> <style type="text/css"> body { background-color: blue; color: green; }

@media (max-width: 480px) {
body { background-color: red; color: white; }
}

@media (max-width: 767px) {
body { background-color: white; color: red; }
}

</style> </head> <body> <div>What background color am I?</div> </body> </html> ```

767 overlaps 480

Add a min-width so they don't overlap and the order of the media queries will not matter.

@media (min-width:481px) and (max-width: 767px) {
body { background-color: white; color: red; }
}