Adobe Business Catalyst Reset Project

This project aims to reset the default style sheet served for any Adobe Business Catalyst website.

The purpose of this is to reset all the pre-defined styles, fix incorrectly applied classes and methods and make minor changes to help to apply consistent custom styles for your own site which won't conflict with 3rd party style sheets and javascript.

How to use

Create a BC website using the "Start from scratch" option.

Then just upload or hotlink the latest reset style sheet inside your html file as the first CSS reference like the example below.

<link href="/StyleSheets/modulestylesheets.normalise.css" type="text/css" rel="StyleSheet" />

Demo

A working demo is currently in build to test this project at walkthrough.businesscatalyst.com

The Normalisation Sheet

This is now the preferred method to resetting a BC website. It preserves a range of default styles providing a better cross-browser consistency as well as being HTML5-ready.

Other Files

As this is still in Beta there are two other files.

• Reset Sheet: An alternative to normalising the styles. This will strip all styling out of your site allowing your to add your own custom base styles.
• Comparison Sheet: Lists all the default styles from the BC Sheet and the new style that is overridden.

A little background

Whenever you create a new Adobe Business Catalyst website you'll notice the following line of code gets added to any HTML file inside BC.

<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />

This style sheet is the default style sheet served by Business Catalyst in order to pre-style a basic website.

A major issue with this is that the styles often conflict with your own custom stylesheet and many "default" styles do not relect what you may want to appear in your website.

There is also very little consistency in font-sizes, line-heights, margins, padding which make it very difficult to create a website which conforms to basic design principles and make a site look its best.

Components

There are two alternative components to this project:

• The Normalisation Sheet (which is now the current standard)
• The Reset Sheet

The Normalisation Sheet

One of the major elements of the normalisation sheet is to preserve useful browser defaults rather than erasing them.

This sheet is based on the work by Nicolas Gallagher and Nathan Smith who both have spent considerable time researching and testing cross-browser compliant styles.

The normalisation sheet is now the preferred method for the project however the Reset Sheet will be kept as an alternative resource.

The Reset Sheet

This is an alternative approach and resets all pre-defined styles to Eric Meyer's CSS Reset Sheet.

This tool is a widely used stylesheet to resolve many browser inconsistencies. This has been used as the basis for much of this project but other issues and inconsistencies specific to Business Catalyst have also been addressed.

Optional Components

We've made the decision to add a portion of our own base sheet in order provide a more mature starting point. You can remove either of these components and replace with your own base sheet.

• Base Typography Styles have been added
• Cross Broswer Form Styles have been added

Current Fixes

To Date the following items have been addressed:

• Resolved incorrect use of .clear method and applied correct use of .clearfix
• Made all button styles consistent to match the default use of the images for the buttons in eCommerce template.
• Removed all default padding & margins.
• Reset all typography font-sizes, line-heights, colours.
• Allowed all inheritable elements to properly inherit from their parent objects.

Known Issues

There are still some issues being resolved in regards to CSS Specificity and Inheritance and still some functionality of BC that have yet to be tested such as the Forums, eCommerce Poplets, Photogallery and Dynamic Menus.

A complete list of the status of these items will be published during the next update of the Reset Sheet.

For more information about being an Adobe Business Catalyst Partner, visit our website.