ZCA Responsive CSS Template Framework (BETA)

[rbarbour]

I plan to release the following to the community but am asking for a few beta testers first.

This is a (improved) version of my previous DIY Responsive Templates.

What makes this package different?

This package was build with a Mobile First Design Approach

1.) Zen Cart stock CSS has been CONVERTED to a global CSS FRAMEWORK.

* This included altering several template override files.

2.) Additional CSS global rules have been ADDED to the stylesheet.css file.

* This seriously minimizes the (tablet/mobile) css files.

3.) An Additional (Styles) stylesheet has been added to separate colors/borders for ease of styling.
4.) A Font Awesome Addition was made to the stylesheet_css_buttons.css

* This included altering (1) CORE FUNCTIONS file (html_output.php).

5.) A Font Awesome Addition was made to the messagestack CSS.

* This included altering (1) CORE CLASS file (message_stack.php).

6.) I Included a product listing plugin to create consistency across all product listing pages (product listing, products_all, products_new, featured_products)

7.) I included a columns/rows product listing layout changer

8.) All listing pages (columnar view) and center-boxes have been converted to use the built in CSS blocks rules.

* The default layout allows for 3 columns on desktop, 2 columns on tablets and 1 column on phones but can go upto 9 columns

9.) I included jQuery to handle the blocks height to create a consistent height.

10.) I included jQuery stacktable to handle tables.

11.) I included jQuery to handle retrieving correct keypads on mobile devices.

12.) I added new code to exclude side-boxes on tablet/mobile devices (this is huge for we no longer have to load then hide), still loads and hides for the default responsive view though.

A demo can be found here.

Please PM me for package with a valid email to communicate testing results.

[picaflor-azul]

I plan to release the following to the community but am asking for a few beta testers first.

This is a (improved) version of my previous DIY Responsive Templates.

What makes this package different?

This package was build with a Mobile First Design Approach

1.) Zen Cart stock CSS has been CONVERTED to a global CSS FRAMEWORK.

* This included altering several template override files.

2.) Additional CSS global rules have been ADDED to the stylesheet.css file.

* This seriously minimizes the (tablet/mobile) css files.

3.) An Additional (Styles) stylesheet has been added to separate colors/borders for ease of styling.
4.) A Font Awesome Addition was made to the stylesheet_css_buttons.css

* This included altering (1) CORE FUNCTIONS file (html_output.php).

5.) A Font Awesome Addition was made to the messagestack CSS.

* This included altering (1) CORE CLASS file (message_stack.php).

6.) I Included a product listing plugin to create consistency across all product listing pages (product listing, products_all, products_new, featured_products)

7.) I included a columns/rows product listing layout changer

8.) All listing pages (columnar view) and center-boxes have been converted to use the built in CSS blocks rules.

* The default layout allows for 3 columns on desktop, 2 columns on tablets and 1 column on phones but can go upto 9 columns

9.) I included jQuery to handle the blocks height to create a consistent height.

10.) I included jQuery stacktable to handle tables.

11.) I included jQuery to handle retrieving correct keypads on mobile devices.

12.) I added new code to exclude side-boxes on tablet/mobile devices (this is huge for we no longer have to load then hide), still loads and hides for the default responsive view though.

A demo can be found here.

Please PM me for package with a valid email to communicate testing results.

So excited about this new package! I will definitely test it out.

Thanks,

Anne

[rbarbour]

Anne,

I'm sending you an update to the ZCA Responsive Template Default as well as this package.

Raymond

So excited about this new package! I will definitely test it out.

Thanks,

Anne

[rbarbour]

I forgot to mention I also added jquery to add an "active" class to (a href) links that match the URL. IMO this should be a built in php function, something I'll look at some other time.

I plan to release the following to the community but am asking for a few beta testers first.

This is a (improved) version of my previous DIY Responsive Templates.

What makes this package different?

This package was build with a Mobile First Design Approach

1.) Zen Cart stock CSS has been CONVERTED to a global CSS FRAMEWORK.

* This included altering several template override files.

2.) Additional CSS global rules have been ADDED to the stylesheet.css file.

* This seriously minimizes the (tablet/mobile) css files.

3.) An Additional (Styles) stylesheet has been added to separate colors/borders for ease of styling.
4.) A Font Awesome Addition was made to the stylesheet_css_buttons.css

* This included altering (1) CORE FUNCTIONS file (html_output.php).

5.) A Font Awesome Addition was made to the messagestack CSS.

* This included altering (1) CORE CLASS file (message_stack.php).

6.) I Included a product listing plugin to create consistency across all product listing pages (product listing, products_all, products_new, featured_products)

7.) I included a columns/rows product listing layout changer

8.) All listing pages (columnar view) and center-boxes have been converted to use the built in CSS blocks rules.

* The default layout allows for 3 columns on desktop, 2 columns on tablets and 1 column on phones but can go upto 9 columns

9.) I included jQuery to handle the blocks height to create a consistent height.

10.) I included jQuery stacktable to handle tables.

11.) I included jQuery to handle retrieving correct keypads on mobile devices.

12.) I added new code to exclude side-boxes on tablet/mobile devices (this is huge for we no longer have to load then hide), still loads and hides for the default responsive view though.

A demo can be found here.

Please PM me for package with a valid email to communicate testing results.

[ravynw34]

Is this still in Beta?

[rbarbour]

This was released commercially to existing clients and will be available via my website if I ever find the time to take it out of maintenance. The code in the demo link from this post has actually been severely minimized and cleaned up..

Zen Cart v1.5.5 includes a lesser version, this package would have been idea but I wasn't informed the DIY Responsive Components were being included in the responsive_classic till after the fact.

Is this still in Beta?

[ravynw34]

I saw your site was in maintainence. Not a problem. I would have loved to check it out as I have always enjoyed working with the DIY version.
Will the DIY version work with 155?

[rbarbour]

The DIY Version is built into v1.5.5 responsive_classic, I have not uploaded a v1.5.5 of the DIY Responsive Template Default. I will try to get packaged this weekend.

The DIY Responsive Template Default for 1.5.x from the downloads will work but some files and code have been changed to work with v1.5.5, you can check out this post to see what has changed.

I saw your site was in maintainence. Not a problem. I would have loved to check it out as I have always enjoyed working with the DIY version.
Will the DIY version work with 155?

[ravynw34]

Thanks a ton

[rbarbour]

The DIY Responsive Template Default for 1.5.5 is complete, I will be uploading to GIT today.

Just a few things:

This is New responsive CSS (cleaner and not the same as the responsive_classic) no more responsive.css file.

It uses a NEW Layout Grid of 12 columns for the main layout all ADMIN Controlled.

It uses NEW Columnar Blocks for all columnar output (specials page, center-boxes, additional images, categories), just set your MAX (categories or products) to display via existing admin configurations as normal.

I added CSS to manipulate the product listing page tables only. no selectors have been added to manipulate any content.

It includes a New admin/layout_controller.php file which controls your side-boxes on all devices. CSS hides on desktops and mobile detect disables these side-boxes on tablets and mobile devices.

I added a max-site configuration, this configuration is used to prevent your site from being responsive in the NEW mobile full site version. This feature only work on mobile devices where a UA is detected.

A demo of the DIY Responsive Template Default for 1.5.5

This is the base code for all my future free and commercial templates. It is basic for those of you still wanting to convert your template to a responsive one in v1.5.5.

Keep your eye out for the zca_responsive_default template (commercial), it is a real mobile-first bare-bones template, includes all the above + columnar listing pages, true tap targets, customized mobile-friendly tables, Section Grids with 20+ examples, a global built-4-zen CSS framework which will replace the ZCA Responsive CSS Template Framework (BETA)