How to Manage My CSS as Modx Resources

Can I manage my CSS as ModX Resources?

In previous versions of ModX (Evo and Revo), you used to have to go through tricks. Now with 2.2.2pl, it is possible with very few tricks. The information to do this is sparse and inaccurate any more. Here's how you do it:

Create Your Template

Create a new Template. I named mine CSS Stylesheet. (Simple as that)
For the content, simply put [[*content]].

Create Your CSS Page

Create a new resource. Name it whatever you would like.
Add your alias. Make sure you do not add the .css at the end. ModX should do this for you.
Now, make sure your new page is published. You may also want to hide from menus.
Add your CSS code. No funny tricks... Just copy and paste it like you normally would.

Test the Stylesheet

Simply navigate directly to your new page as if it were an html document. Don't forget the .css instead of .html. If you see the CSS code, then you've succeeded.

Add Your CSS to the Templates

This one is the tricky part. You won't be able to use the <link rel=></link>.

Simply go to your <head> element. Add the following code:
<style type="text/css">
@import url("");
</style>
Test the
Inside the url("");, just place the url to your new resource.

Advantages

Aside from the saving the uploading and downloading, you can now edit your CSS using any of the ModX tools. Additionally there are a few other perks:

If you're like me, file names are useful, but often not descriptive enough. You can name them whatever you like! Its the alias that is important anyway.
Handy tool-tips based on the Description of the resource.
You may also utilize the Summary of the resource for other things. I place the important file comments in here, so that my CSS is smaller.
Template Variables! In previous versions of ModX, you couldn't have a Template for your CSS.
Chunks and Snippets, if you so desire. You have to write them as plain text, rather than HTML, but it's still useful if you are creative.
Your CSS is now shared between all of your Contexts if you like. This is due to the nature of the @import statement.
You can edit your CSS from any computer. You may even set up your front-end for the editing.

Drawbacks

There's always trade-offs, and with this technique it is no different. A lot depends on how you have things set up for your site.

Your saving and editing is based on your server performance.
Your URL requests will be based even more on your ModX performance. For some, adding these extra resources could slow things down. Often, its not enough to worry about, but its worth mentioning.
It's now managed by the database, so its subject to database security. This can be good or bad. Even it is good, it probably will require extra set up from you.
Your Templates, Snippets and Plugins can break your CSS, if programmed incorrectly. This is something you really want to be careful with.
Each CSS request is treated as a separate request by ModX. The Template Variables and plugins do not apply to the web page you are viewing. They apply to the CSS content.

Conclusion

The whole process takes about 15 minutes. And ultimately, it's even faster to revert back if it doesn't work for you (just don't delete the raw files until you are sure). The added functionality is worth it to me.

My CSS is huge. Using ModX, can I split up a CSS into parts?

I guess the real question is what kind of parts are acceptable for you. If you follow this question, you can begin the process of allowing ModX to manage your CSS. Once this happens, your options open considerably. Your CSS editing will then become easier and less time consuming depending on your level of expertise with ModX. This answer will be pretty simple, as it will show simply how to add a given selector as a resource. Other further development can be intuited from here, though.

CSS as a Resource

Once your CSS is being managed as a Resource (which takes about 15 minutes), you may utilize Templates, Template Variables, Chunks, Snippets and Plugins. Thisis actually pretty amazing, but setup can be a bit of a pain. You will basically be investing some time to save a lot of time in the future. The next logical step is split your Selectors accordingly, but you don't want to break what currently works. Having a fluid understanding of the getResources addon will be crucial to further development.

How to do it:

1. Create a new chunk

Click the Elements tab, and click "New Chunk". Name it "css-selector". Set the content to:

[[+pagetitle]] {[[+content]]}

It's as simple as that. Don't forget to click "Save"! This will let you set a Selector as a resource. It will use the title for the selector and content for the rules. You can forget about using those braces any more. Your new chunk will handle those from now on.

2. Adjusting your Template

Now, we just have to convince the template that it nows how to read parts, as well as not forget the whole. Open your CSS Stylesheet template (the one that says [[*content]] for its content). Adjust the code so that it has the following:

[[!getResources?
  &parent=`[[*id]]`
  &depth=`1`
  &tpl=`css-selector`
  &includeContent=`1`
  &sortby=`menuindex`
  &sortdir=`ASC`
  &limit=`99`
]]
[[*content]]

Again, click "Save". Let me explain the Template real quick. If you have child, they'll get rendered first depending on their menu index. Further, it will render the contents of the document that are not children afterward. This will allow you to only make new resources for your most important selectors, while keeping the stuff that will never change in the main resource.

3. Create a new Template

This is so that your selectors don't do anything funny and just render the content. Create a new Template named "CSS Selector". Set its content to:

[[*content]]

4. Create a new Resource

Create a new Resource. Set the title to the selector for the css statement you want to manage. Then set the content to the rules without the braces. For instance, if your css statement is: div#header .logo {border:0;}, you'll set the title to div#header .logo and the content to border:0;. Set the resource alias to whatever you want. I use numbers for each one. Set the template to your new "CSS Selector". Important Now, set the Parent Document to your Stylesheet. Click Save.

5. Testing the Stylesheet

First, Right-click your new resource and choose "View Resource". This will just make sure that the statement was rendered correctly. It should simply say your rule in CSS format.

Next, Right-Click the Stylesheet resource and choose "View Resource". You should see the Selector at the top and all of the other rules below it.

Final Considerations

Observations

You'll notice that your child resources do not have to be changed to "CSS" for Document Type. Only the parent stylesheet has to be. This allows for some neat stuff as your expertise with ModX grows.
You can change the order of rules by simply changing the menu index of them.
The number of rules that can be done this way is based on the &limit variable in the getResources statement in your template. &limit applies to each stylesheet, so in this example you have 99 statements per stylesheet that may be separate resources.

A Note on Server Load

This will place load on the server as the number of resources goes up. For development, keep the "do not cache flag" (!) on your getResources statement. Once you are done, remove the exclamation mark and let it all be cached. This will save a ton of load.

Further Development

I added an isEnabled template variable to mine so I can turn on and off each rule as I pleased.
You may possibly begin to manage your CSS on the front-end utilizing FormIt.
Custom Manager Pages may even be a better option for you.
Further abstraction might allow you to create Groupings of statements for even further organization.

getResources to build top level menu

Build navigation on http://rtfm.modx.com/display/ADDON/Wayfinder he has a parameters to work with contexts.

Resources won't open at MODx manager

With something like this you can usually get to the bottom of the issue by:

disabling JS compression in the System Settings
opening your browser's inspector and looking in the console for any errors (could be a plugin/Template Variable or Extra that isn't loading)
re-run the MODX installer as an Update

MODX: How to insert links to other resources in TinyMCE

I figured it out, I was definitely missing something. The "Insert/edit link" dialog has a search box which auto completes as you type the name of existing documents into it. Selecting a document from there inserts the document's ID with the proper syntax.

Filter resources by template variable value with MODx Wayfinder

A little playing around led me to a solution: I needed to include the class name (not table name) when referring to the ID:

&where=`["modResource.id IN (SELECT contentid FROM modx_site_tmplvar_contentvalues WHERE tmplvarid=17 AND value LIKE '%Highlights%')"]`

a small test showed that even a simple

&where=`["id = 123"]`

does not work without modResource..

A look at wayfinder.class.php shows the following line, which seems to be the "culprit":

$c->select($this->modx->getSelectColumns('modResource','modResource'));

This method aliases the selected columns - relevant code is in xpdoobject.class.php. The first parameter is the class name, the second a table alias. The effect is that the query selects id AS modResource.id, and so on.

EDIT: final version of my query:

&where=`["modResource.id IN (
    SELECT val.contentid
    FROM modx_site_tmplvars AS tv
    JOIN modx_site_tmplvar_contentvalues AS val
     ON tv.id = val.tmplvarid
    WHERE tv.name = 'articlestags' AND (
        val.value = 'Highlights'
     OR val.value LIKE 'Highlights,%'
     OR val.value LIKE '%,Highlights'
     OR val.value LIKE '%,Highlights,%'
    )
)"]`

I don't claim this query is particularly efficient (I seem to recall that OR conditions are bad). Also, MODx won't work with this one if the newlines aren't stripped out. Still, I prefer to publish the query in its well-formatted form.