Follow
       
Stay informed

Thanks. We've added you to our list.

Blog

Abobe Business Catalyst Parter specialising in Web Development and BC integration.

Go Back

Resetting Business Catalyst's ModuleStyleSheet

by Gary Swanepoel


Jun 21, 2012 Comments (2) share

How often will a BC website just not do what you want it to do and you spend hours debugging and fixing cross browser issues? Ever heard of the ModuleSyleSheet?

Resetting Business Catalyst's ModuleStyleSheet

We’ve started a community driven project to reset the default styles for a Business Catalyst website back to how the HTML is intended to be displayed. This makes it not only a consistent set of rules for cross browser styling, but it’s also a much better starting point to getting your BC site to behave the way you ask it to.

Every HTML element has a set of styling rules defined by the browsers to make it display in a certain way. Most are reasonably consistent, but some browsers (waving at your IE) are just plain difficult to work with. So making a website display the same way in all browsers can be a challenging and sometimes lengthy process, eating into our profit margin and making our hair turn grey.

Introducing the Reset Sheet

This is where a Reset Sheet comes in. A Reset Sheet is a CSS Style Sheet that makes all HTML elements display consistently across all browsers. It strips it back to its pure form, removes the nuances and renders each element with the minimal amount of styling necessary.

There are a range of reset sheets on the web but one of the most prominent and widely supported is Eric Meyer's CSS Reset Sheet which has been around since 2008.

Visit the project

So .. what’s this got to do with Business Catalyst?

In every Business Catalyst site you create, you’ll notice one line of code that gets automatically added into any page.

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

It’s the default stylesheet that’s automatically served with every BC website which adds its own styles like background colours, and sets font-sizes in an attempt to help create your BC website. 

The stylesheet however has a few issues (not even considering this file hasn’t been updated in nearly 5 years) and also places an assumption on Partners that this is how a BC site should look. Which means we have to override all the default styles. 

This wouldn't be too much of a problem (as we already have to write our own styles anyway) if styling standards and best practice had been applied. Finding the responsible Class or ID for our conflicts can be downright painful.

Plus you start adding third party scripts and start working on complicated sites with BC’s functionality and conflicts inevitably occur. This can mean hours of trawling over lines of code following specificity rules and inheritance chains, creation of additional unnecessary classes, heavy overuse of important declarations, which is all compounded even further with browser hacks and the like.

What about deleting the ModuleStyleSheet?

You can't delete the ModuleStyleSheet because you'll get a 404 error for the empty file when the site loads. You can hover upload an empty file, but then we have to re-style every single element in BC. Which is fine if your replacing all the BC html with your own but most Partners just don’t have time to do this, especially with small projects. And it also kind of defeats the purpose of using BC's built in functionality to help save you time re-inventing the wheel.

Plus we can’t really guarantee BC won't update how this works in the future. So you can't predict what impacts a system wide change might be.

Introducing the Business Catalyst Reset Sheet

So, based on the work by Eric Meyer, we’ve created a Business Catalyst Reset Sheet. 

This Reset Sheet overrides all the styles set by BC and strips it all back to bare basics. This means it’s much easier for you to update BC’s classes and ID with your own styles and avoid the conflicts, as the styles you see in your website are in fact your own without having to start from scratch.

All the features and functionality work. It’s just without all the bells and whistles.

All in all, this makes a much cleaner website that is easier to code and debug.

Download the files from GitHub and add them to your next BC website and see what you think.

Visit the website

We welcome any feedback, bugs or improvements.

Is there a better solution?

Yes, there is. Have BC update the stylesheet with better styling practises or give Partners the option to not generate the ModuleStyleSheet all together and allow us to insert our own.

This fix is a hack and does add additional and unnecessary load onto your website.

What’s next?

We’re currently working on a BC Normalisation Sheet. This is a “prettier” version of the Reset Sheet but conforms to best practice web standards.

More about this will be featured in the upcoming months so stay tuned.


2 Comments so far

fromSam 30-Jul-2012 10:25 AM

Great idea guys! Just one question. Could you just upload the file over the modules stylesheet file?
Hi Sam. Great point. You "can" upload this straight over the top of the generated stylesheet. The site will render the same and be a little faster. However, the only concern is you are updating a system issued file. You can't predict how an update
to BC could affect this.

To be safe you'd be better to upload an empty stylesheet and then reference the reset sheet after.

fromLuc 06-Aug-2012 06:58 PM

I thought I would have to perform this soon or later by myself... and here it comes, ready for use ! I put it immediately into practice. Yet, there are some other "hidden" stylesheets, like screen.css, box.css... what about those ?
Back to Top
Post your own comment


Captcha Image