How to organize CSS code in the Full Code Editor?

Hey Martin,

Just to let you know, my new content editing plugin (Amender) is now available to try.

https://themeover.com/amender/

Regarding your original question about applying CSS that does not get modified during syncing with the visual fields, Amender offers a solution to this via the add: css option.

Set “action” to “add” and “aspect” to “css”. Or use the default add:css option.

You can enter any CSS you like in the editor below, you are not constrained to the single selector format. And your code will be left as is.

You can also use the media query tabs to add code inside @media breakpoints. Or just stick to the All Devices tab if you want to write your own media query code.

You can set the folders to target specific pages, as with Microthemer. Amender shares much of the same interface.

Does that help at all?

Cheers,
Sebastian

Hey Martin,

No problem at all. This functionality will come to Microthemer, but I plan to do away with the full code editor view so that folders can be used, with the conditional loading they deliver.

I can keep the full code view as a non-default option that must be enabled in the legacy preferences, but I don’t really want to create a dual system of conditionally loading full code view files, or even having a system for multiple files.

The full code editor view was something I added a long time ago in response to a user request. But it feels a bit out of kilter with the rest of Microthemer. That’s why combing the ability to enter any raw CSS code with folders feels like the best plan.

Instead of just being able to add single UI selectors to folders, you will be able to add CSS, Sass, JS, snippets. And probably other types like keyframes, variables, etc. But, supporting this will involve quite a bit of code refactoring in Microthemer, which is why I keep putting it off.

I was developing Amender when you initially posted, and it occurred to me that the add:css system already meets the basic requirements of adding multiple raw CSS stylesheets, with a single stylesheet per folder (the level asset loading is set). I understand if you don’t to want to have to learn a new system though.

Also, another thought occurred to me while writing this. If you enable Sass support via the Preferences, Microthemer will stop trying to sync the CSS with the visual controls. It will still synchronise the first selector across the different responsive tabs, but if you stick to the All Devices tab that issue can be avoided. The Sass syntax that will save you from repeating selector code is:

.some-element {
  background: yellow;
  @media (max-width: 767px) {
    background: pink;
  }
}
/* Or using a variable for the breakpoint e.g. */
.some-element {
  background: yellow;
  @media ($tablet) {
    background: pink;
  }
}
/* Sass will auto-convert this to: */
.some-element {
  background: yellow;
}
@media (min-width: 767px) {
  .some-element {
    background: pink;
  }
}

It may not be an ideal solution, but it’s available now and could be worth a try.