Category: Setup

Pro Mode

YouTube video

Advanced ACSS users know that the real power of the ACSS framework is accessible through variables and that building sites with custom classes (preferably using BEM methodology) that use ACSS variables is the most maintainable practice.

When advanced users primarily use variables with custom classes, the ACSS framework becomes unnecessarily heavy. All the utility classes are being loaded in the stylesheet, but aren’t getting used.

Enter Pro Mode.

ACSS Pro Mode
ACSS Pro Mode

Pro Mode is a new button inside the ACSS options panel that automatically turns off parts of the framework that our professional users have identified as being unnecessary to pro users who are committed to using variables and custom classes.

While the utility classes for these areas of the framework are turned off, the variables still work, giving Pro users the exact same level of power, but without the bloat of utilities that aren’t being leveraged.

When Pro Mode is activated, the ACSS framework is roughly 50% lighter. If you also turn off any colors or buttons you aren’t using, the framework can be up to 80% lighter.

If you are an advanced user, this is the way we recommend you work with the framework.

Before You Enable Pro Mode

Since Pro Mode deactivates large areas of the framework, it’s not reasonable to activate Pro Mode after a website is built. This will break anything that relies on utility classes from the parts of the framework that were turned off.

Pro Mode is best activated before beginning development on a new project. Or, early on in development when you can quickly fix anything that breaks and then make the transition to a custom class workflow.

How to Enable Pro Mode

Enabling Pro Mode is easy:

  1. Open the ACSS Dashboard
  2. Navigate to the Options Panel
  3. Scroll down to the Framework Settings section
  4. Click “Activate” on the Pro Mode option