Answered MODX and CSS design

Hi all,

We (as a company) are incredibly close (after a lot of research) to migrating all (most) of our projects to MODX.

We (as a company) are however best known for our creative CSS solutions.

While MODX is pretty much ideal in everything back-end, we're still sort of doubting on front-end development.

In most of the IDE's we use currently, we'd have live code editing next to live view.

I.e. our front-end devs have an instant response time between writing CSS and seeing the results.

Could anyone inform me on the easiest front-end work-flow using MODX?
Considering that we build everything from scratch, so blank html, css, etc.

We like MODX for giving us a blank canvas while still being an incredibly powerful MVC, we just don't want the front-enders to be left behind.

Thanks in advance, cheers!
Bob

Personally all my templates are built static and I don't put them into MODX until they are completed, then it's just a case off adding the chunks etc and removing the relevant code they are replacing

Thanks Paul. That's a work-flow I'm all too familiar with. Most of our more complex sites are built with .net mvc, which comes down to building static pages and then handing them over to the back-end developers who divide them up into relevant 'chunks'.

This would definitely be an option, but it does mean using a separate IDE, build the whole page, and only then go into MODX. I was mostly wondering how MODX serves as an IDE, i.e. how easy it would be to do front-end development in MODX.

All that would really be needed for that is a code editor and a live screen, which I guess would be a nice plug-in to request since I haven't found anything like it yet.

But even editing CSS, saving, and then refreshing a separate browser window with the relevant page open would be a good option.

Given what is available to MODX now, my question becomes: "How easy is it to use only the MODX interface to edit CSS?" and "What would the work-flow be when using only MODX?"

May be it's not easy at all and you're better off building static at first, in which case your answer is the correct one

Hi Sottwell,

I'm not familiar with MODX templates (not using MODX yet), but I got as much from researching MODX functionality.
It's a brilliant way of structuring content.

But the question about styling content in MODX remains.. Yes I know there's a linked .css file as always. And yes you can change the innards of the .css file which pertains to the styling of the HTML.

What I want to know is how easy it is to change the .css file inside of MODX. Is there a relatively easy work-flow? Say I've got this whole website set up, and then decide to add some new content. I add this content using MODX, without trying it out as static HTML first. Just add a simple <div> to a certain template for the sake of an example.

Now I want to style that new <div> with css. Try a couple of things, borders, bgr colors, etc. Does MODX support such a front-end oriented work-flow or is that outside of its scope?

And if it's outside of MODX's scope, what would you recommend as an alternative work-flow?

Thanks so much for your answer already, cheers!

If you install something like the Ace add-on ( theres others ) it will give you a code editor and then you can edit the css by using the file file tab in the manager and opening up the css file, personally thought I prefer to use good old FTP for that as I use sublime so have several add-ons installed in that

The best thing to do would be setup MODX and have a play to see how comfortable you feel with the different ways to do things

An indirect answer but a method that works for me...

I use WinSCP as an SFTP client for the single reason that I can use it to right click on any remote file and then edit it in my IDE (I happen to use Komodo). Click save in the IDE and WinSCP updates the remote file (CSS, HTML - any text based file).

Refresh the browser and "Bob's your uncle".

This I've found to be the most efficient way to use the tools that I'm used to. YMMV.

Quote from: paulp at Apr 16, 2015, 10:34 AM

The best thing to do would be setup MODX and have a play to see how comfortable you feel with the different ways to do things

I'll do just that, thanks for your replies!

Quote from: gissirob at Apr 16, 2015, 03:25 PM

An indirect answer but a method that works for me...

I use WinSCP as an SFTP client for the single reason that I can use it to right click on any remote file and then edit it in my IDE (I happen to use Komodo). Click save in the IDE and WinSCP updates the remote file (CSS, HTML - any text based file).

Thanks gissirob, looks like most answers lean towards some FTP solution, I'll give several a try and see where I end up.

Another way to go is to open the CSS file in the Manager, then look at the front-end page using Firebug in another window. You can make changes to the CSS in Firebug and see the effect immediatly, then duplicate any changes you like in the other window where you have the actual CSS file showing.