Manage Your CSS in MODX with cssSweet

Oct 9, 2013

Use Case

You like using CSS variables a la Sass, LESS and whatever-else preprocessor of choice. Who wouldn't? Those tools are awesome. If you're working on a team, you need to ensure everyone's working off the same libraries, and using some version-controlled workflow, etc. It's a bit more work to setup but in the end it's worth it.

What if you've inherited a site, and the .scss files are no good to you cause you don't have any of the dependencies? Or what if you have to hand off the site to some yet-to-be-identified client/end-user and they can't use Sass? These "edge" cases end up being the norm in freelance-developer life, but you don't want to give up using variables in your CSS, right? That just wouldn't be fair :(

Well, here's where MODX comes to save the day...cue heroic music!

Sweet Action

cssSweet is a suite of tools for managing CSS in your MODX sites. You can use MODX placeholders similarly to how you would use Sass variables, and with the included snippets (or ones you write yourself) you can modify and manipulate those values. The values can be stored anywhere in MODX: system settings, context settings, or even ClientConfig settings with Mark Hamstra's ClientConfig component.

The beauty of cssSweet is that it doesn't come with the same performance cost as publishing a Resource set to the CSS content type. Instead, cssSweet comes with a plugin that parses your CSS (saved in a Chunk) and writes it to a flat CSS file at the filesystem location of your choosing. The result is a minified, static CSS file that won't demand any additional overhead from PHP, but has the benefits of PHP "preprocessing".

How To Get It

cssSweet is available in the MODX Extras Repo. You can also install it via Package Management in any MODX Revolution site. The documentation lives here. Vive la MODX!