For the scale of sites I build I don’t want to go to the hassle of using a CSS preprocessor but I wanted a faster way to deal with CSS in Modx so I’ve created a static resource to which I’ve added several chunks containing CSS for just about everything I generally use. My plan is to build the site and then create an actual .css file from the all the chunks that Modx will have compiled. I can do this by copy and paste but I’m wondering if there is a better / more automated way of actually creating the .css file?
I have never used it myself, but I think this might be what you are looking for:
https://docs.modx.com/3.x/en/extras/csssweet
Thank you Andy - I’ll take a proper look at that.
If you’re on Windows, you can do something like this on the command line or put it in a batch file:
copy file1.css+file2.css+file3.css master.css
If you’re using PhpStorm, you can create a “file watcher” that runs that command when any of the files changes.
A pretty simple PHP script would also work (untested):
In a resource:
[[!CombineFiles]]]
In the snippet:
<?php
/* Combine Files snippet */
$final = 'path to final file';
$files = array(
'path/to/file1',
'path/to/file2',
'path/to/file3',
);
$content = '';
foreach ($files as $file)
$content .= file_get_contents($file);
}
file_put_contents($final, $file);
return "Done";
Then just view the resource to create or update the combined file.
If you want to get fancier, you can put all the files in one directory, then use DirWalker to get the paths for you, which would automatically detect new files there.
One question, though. Why have the chunks? Why not just use the files directly and edit them in place?.
Thanks Bob - some really interesting ideas there. I was experimenting as I want to speed up development of relatively small sites. I started with foundation.css (in a chunk) and replaced all colors with ‘sub chunks’ set up for primary, secondary, alert colors etc. I also did this for css that I commonly use for various elements such as a tinyslider.css and animate.css. There might be easier / more efficient ways of doing this but in my head it makes sense! I then put all the main css chunks in a resource and linked to it in the head - as you would normally with a stylesheet. It works well but I’d half expected that it would mean the server would take a hit in some way and sure enough ttfb is affected. I then tried moving the main css to a static resource and again, it works fine but still ttfb is affected. My thinking from there was to just copy the ‘parsed’ css to a ‘normal’ .css file once the site is complete, to avoid the hit on the db / server.
Sorry for the long story but I wanted to explain where I am with this. I’ve found it interesting and learned a great deal while certainly speeding up development. I’m just not certain about that last step.
Thanks for the explanation, but I’m still unclear on why you don’t just use files instead of chunks. You’d have a better code editor and save some steps. You could pull them into your pages with a simple snippet that calls $modx->regClientCSS().
You might also find SCSS/SASS useful (I much prefer SCSS). The best thing about it is that you can have variables at the top that are used throughout the CSS file, so if for example, you decide to change the color of a bunch of elements, you just change the variable value. It will also reorganize your CSS so it’s much easier to read.
Another plus is that it will pull in other files containing CSS code that you use often, like styling for boxes, lists, or anything else you want .
SCSS is converted to CSS when you run its compiler, which happens automatically whenever I save an SCSS file in PhpStorm.
I think I probably need to look into PhpStorm. I mainly build ‘on the fly’ i.e. on the remote server and in the past I’ve found SCSS cumbersome. Essentially I am using variable by replacing say #fefefe anywhere in the CSS with [[$col-white]].
Just to throw another idea out there, you could use the ClientConfig Extra and setup a whole bunch of Colour Pickers and then output that into your static css file. Eg. [[++primary-colour]] or [[++white]]. You could add those into variables in the css as well, so changing the primary colour from Lilac to Orange is just one field and it updates every element using the primary colour variable.
1 Like
Yes that is an option but for me it’s quicker during development to work with chunks and it’s one less Extra
Essentially I am using variable by replacing say #fefefe anywhere in the CSS with [[$col-white]]
If you do that a lot, each instance will make MODX load and parse that chunk. The cache will help, but it still takes time to process them, and any time you make a change somebody is going to suffer a slower page load. If it’s all in one CSS file with something like <span class="col-white">, the browser will load and cache that and everything will go faster.
Exactly bob and that’s why I’m doing this only during development and looking for an ‘easy’ way to convert the parsed css to a physical file.