cssSweet
Last updated Dec 7th, 2019 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$311 per month—let's make that $500!
Learn moreWhat's it for?¶
cssSweet lets you manage your site's CSS within MODX. Why would you want to do that? Some use cases are described in the documentation on github. One example is if you're authoring a theme, and the end user of your site is of unknown technical experience. You can't rely on them learning Sass, but you want them to have control over certain aspects of their site's presentation. This is exactly what cssSweet was made for.
Version 2 incorporates many new features. The full documentation site has important information about upgrading from version 1.
What do I need?¶
Just install cssSweet via Package Manager in any MODX Revolution site, version 2.2.x or higher. You may also want to install ClientConfig, as it allows your end users to manage global settings without having to navigate the System Settings page in the Manager.
How do I use it?¶
The cssSweet package comes with 2 plugins and three snippets. You can find out about the snippets in the child pages herein. But before you do, there's a few System Settings you should be aware of.
IMPORTANT: As of version 2, the cssSweet system settings have been deprecated in favour of plugin properties. DO NOT use the system settings in version 2 or greater of cssSweet—they will have no effect.
cssSweet System Settings¶
Key | What it does | Default value |
---|---|---|
csss.custom_css_path | Sets the path where the saveCustomCss plugin will output the static CSS file. | {assets_path}components/csssweet/ |
csss.custom_css_chunk | Name of the chunk to parse for the contents of the CSS output file. | csss.custom.css |
csss.custom_css_filename | Name of the static CSS output file. | csss-custom.css |
csss.minify_custom_css | Enable or disable minification of the static CSS file contents. | true |
How the plugin uses these settings¶
Assuming the default values shown above, whenever the Site » Clear Cache menu item in the Manager is clicked, the plugin will parse the contents of the 'csss.custom.css' Chunk and write the contents to a file at: '{assets_path}components/csssweet/csss-custom.css'. To call this file into your template, you'll want to use the 'assets_url' system setting, like this:
<link rel="stylesheet" href="[[++assets_url]]components/csssweet/csss-custom.css" />
The contents of that file will have all spaces, tabs and line breaks stripped down to a single space, since the csss.minify_custom_css setting is 'true'.
I could really use this feature¶
cssSweet is open-source and free to use. If you'd like to chip in to the development, please submit issues or feature requests at the repo on GitHub or better yet fork it and code away! PRs are welcome and will be respectfully considered.