Search Descriptions Version
 
 
This article applies to:

Responsive Design Template - User's Guide


Table of Contents

Introduction

AspDotNetStorefront currently offers two responsive skins, one built with the Twitter Bootstrap framework, the other with the Foundation framework. Both skins share the same structure and fundamentals, so this user guide provides a reference for both.

All links to framework specific documentation will include an icon, for quick reference:

Twitter Bootstrap

Foundation

If you aren't sure whether you have installed the Twitter Bootstrap or the Foundation Framework Skin, right click your web site and select "View Source." Scroll to the bottom of the page, and you will see the name of the framework in a comment.

NOTE: The Foundation platform does not support IE8 or lower. Sites with high volumes of early IE visitors should use the Bootstrap based responsive skin.

Log in to your AspDotNetStorefront Admin Console, and Navigate to Content--> Manage Topics. You can change your logo in the "Template.Logo" topic.

The Horizontal Menu

The horizontal menu with the search box and dropdown menus has been built using the responsive framework menu.

In the Foundation Skin:

In the Twitter Bootstrap Skin:

Configuration Options

By default, if you have more than six categories or manufacturers, only six will display. The display order you set in the admin console will be honored. If you would like to change the number of items that display in the dropdown menu, log in to the admin console and navigate to Configuration-->Advanced-->AppConfig Parameters. Search for "MaxMenuSize" and change the value.

Advanced

If you plan on modifying this menu beyond the configuration options, you should first familiarize yourself with the framework documentation for this feature.

For Twitter Bootstrap, this feature is called the Nav Bar and documentation can be found here.

For Foundation, this feature is called the Foundation Top Bar and documentation can be found here.

The structure of the menu can be modified in the Master Template for the skin, which can be found in the site files under ~/App_Templates/Skin_x/template.master (where x is the skin id).

To modify the menu items display, the XmlPackage can be found in the site files under ~/App_Templates/Skin_x/XmlPackages/entitymenu.xml.config (where x is the skin id).

The Entity List Page (from the dropdown menu "more..." link)

If you have more than six items under the dropdown for Category or Brand you will see a "more..." link. This link navigates to a page that will show all of your Entities (i.e. Categories or Brands).

Configuration Options

To change the labels on the menu items, Log in to the admin console and navigate to Content-->String Resource Manager. Search for "responsiveskin" to find the responsive skin labels.

The Entity List Page will display entities in a list or grid format, depending on the AppConfig Paramater "ShowSubcatsInGrid." To change this configuration, log in to the admin console and navigate to Configuration-->Advanced-->AppConfig Parameters. Search for "ShowSubcatsInGrid" and change the value.

Advanced

The Entity List Page runs off of an XmlPackage. This XmlPackage can be found in the site files under ~/App_Templates/Skin_x/XmlPackages/entitylist.xml.config (where x is the skin id).

If you are displaying the entity list in the grid format, and plan on modifying this, you should familiarize yourself with the responsive framework grid system.

For Twitter Bootstrap, the Grid system documentation can be found here.

For Foundation, the Grid system documentation can be found here.

The Product List Page

The Product List Page displays products assigned to an entity (i.e. Category or Manufacturer) in a grid format.

Configuration Options

If in the installation process you did not choose to assign all of your Categories, Departments and Manufacturers to the responsive XmlPackage, then you will need to assign the XmlPackage manually to each one. If you choose not to assign the responsive XmlPackage to your entities, then your product listing pages will not be responsive. The XmlPackage to assign is named "entity.responsive.xml.config."

NOTE: In versions 9.4.1.0+ the stock xml packages have been modified to function in either static or responsive skins, so the entity.responsive.xml.config package is only needed for 9.4.0.0.

Advanced

This XmlPackage can be found in the site files under ~/App_Templates/Skin_x/XmlPackages/entity.responsive.xml.config (where x is the skin id).

NOTE: In versions 9.4.1.0+ the stock xml packages have been modified to function in either static or responsive skins, so the entity.responsive.xml.config package is only needed for 9.4.0.0.

If you plan on modifying this XmlPackage, you should familiarize yourself with the responsive framework grid system.

For Twitter Bootstrap, the Grid system documentation can be found here.

For Foundation, the Grid system documentation can be found here.

The Product Details Page

The Product Details Page displays the image, title, description, price, etc. for a product.

Configuration Options

If in the installation process you did not choose to assign all of your Products to the responsive XmlPackage, then you will need to assign the XmlPackage manually to each one. If you choose not to assign the responsive XmlPackage to your products, then your product pages will not be responsive. The XmlPackage to assign is named "product.responsive.xml.config"

NOTE: In versions 9.4.1.0+ the stock xml packages have been modified to function in either static or responsive skins, so the product.responsive.xml.config package is only needed for 9.4.0.0.

Advanced

This XmlPackage can be found in the site files under ~/App_Templates/Skin_x/XmlPackages/product.responsive.xml.config (where x is the skin id).

NOTE: In versions 9.4.1.0+ the stock xml packages have been modified to function in either static or responsive skins, so the product.responsive.xml.config package is only needed for 9.4.0.0.

The footer menu with the links to about, contact, security and more has been built using the responsive framework menu.

To change the labels on the menu items, Log in to the admin console and navigate to Content-->String Resource Manager. Search for "responsiveskin" to find the responsive skin labels.

If you plan on modifying this menu beyond the configuration options, you should first familiarize yourself with the framework documentation for this feature.

For Twitter Bootstrap, this feature is called the Nav Bar and documentation can be found here.

For Foundation, this feature is called the Foundation Top Bar and documentation can be found here.

The structure of the menu can be modified in the Master Template for the skin, which can be found in the site files under ~/App_Templates/Skin_x/template.master (where x is the skin id).

Log in to your AspDotNetStorefront Admin Console, and Navigate to Content--> Manage Topics. You can change your copyright information in the "Template.SubFooter" topic.

Creating Responsive Content

If configured appropriately, all of your entity, product, account, checkout, and built in front end pages will be responsive. However, if the site has existing content, like the homepage, or an about page, you will need to follow some guidelines. Additionally, when creating new pages you will need to follow these guidelines.

  • Do not put fixed widths on elements (like width="850px" or style="width:500px"). Content with fixed widths will not be responsive. If you already have content like this, you will need to go in and remove that markup.
  • Avoid tables. Unless data needs to be in a table, avoid tables entirely. If you do need to display data in a table, avoid making tables with a ton of columns or text that will become difficult to read in smaller screen resolutions.
    • For Twitter Bootstrap, table documentation found here.
    • For Foundation, table documentation can be found here.
  • For inline lists, side navigation, images, and thumbnails, follow the documentation for the skin's responsive framework. If you utilize the existing framework capabilities for common features, you will not have to write your own media queries, or suffer from a lack of responsiveness.