Code friendly options

Author Posts

MAXp0wr March 13, 2020 at 9:38 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

I’ve just jumped back into trying to use MT after putting it aside a long while back. Things have come a long way! Great work 🙂

It would be awesome if we could change a few of the ace editor options. I’d like to be able to set the font size a bit smaller, as well as change the keybindings to sublime mode.

I pretty much use MT selectors as stylesheets more so than selectors. Managing the code of a feature split up into individual selectors is just way too hard to work with. This method works okay, but there are a couple of issues:

  • The main one is that media queries don’t work inside the “all devices” tab. Sometimes I need a one off query at a specific, non-standard, size.
  • And the code of only the main selector in synced up with the gui options. Not a big deal, but sometimes it’s nice to get a visual cheat for Flexbox and Grid when things get complex 😉

The Full Code Editor doesn’t work for me because it’s just a single sheet… would be a nightmare to manage anything more than a simple one-pager.

Oh, and is there a keyboard shortcut to toggle page builders on and off? I was testing with Elementor and it was becoming tedious going via the dropdown.

Sebastian March 16, 2020 at 3:03 pm

Hey,

Welcome back! In answer to your questions and comments:

  1. I’m happy to add configurable keyboard shortcuts and text size to the todo list. But it will follow lots of other features, unless it gets lots of up-votes on this thread.
  2. Regarding media queries, have you enabled Sass via General > Preferences > CSS/SCSS > Enable SCSS (at cost of syncing code with GUI fields). With Sass enabled, you can nest media queries inside your selectors and they will be formatted correctly when compiled to CSS. See the examples below. However, as the setting explains, no syncing with the GUI happens at all when Sass is enabled.
  3. MT may well support sub-selectors via the GUI in future.
  4. Also in future, it will be possible to add free form CSS snippets to the GUI folders. Along with variables, animations, mixins, etc. And so the responsive tabs will be available for free form CSS too. And this will provide a way to organise things better than a single CSS file.
  5. There isn’t currently a keyboard shortcut for toggling page builders. But I’m happy to add one. Ctrl + Alt + B perhaps?

Using media queries inside selectors e.g.

.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;
   }
}

Cheers,
Sebastian

MAXp0wr March 16, 2020 at 10:22 pm

Hey, thanks for the detailed reply.

I love SCSS! For some reason I thought that auto-completion was disabled with that option enabled, so I hadn’t even tried it. So that solves a few of my issues AND I get the benefits of sass. Awesome! you just made my day 🙂

I recently made a custom Elementor widget for myself that allows me to write markup with a setup that I’m familiar with – Ace editor with a dark theme, plus Emmet, and Sublime keybindings. That’s why I was asking about the keybindings, because one of my most used is to select the next occurrence of a word, which is CMD+D, which in Microthemer deletes the current line 🙂

I really like the sound of the freeform snippets/variables/mixins being worked into the gui. Can’t wait for that.

Ctrl + Alt + B sounds great. I go back and forth constantly, so that will save a bunch of pain.

BTW: Switching to Elementor when working on an area of the site that uses a theme template (like a Woo product category), rather than a page, results in being put back to the dashboard instead of going straight into the editor.

Sebastian March 18, 2020 at 5:29 pm

Hey,

I’ve just released version 6.1.1.6 which includes the Ctrl + Alt + B keyboard shortcut for Elementor, Beaver Builder, and Oxygen (whichever builder is installed and activated).

Great to hear Sass solves some of your issues 🙂

I will check on that template loading issue. And re the sublime keyboard shortcut, I have added configurable keys to the todo list. As I mentioned before, it will follow some other updates.

Cheers,
Sebastian

You must login or register to reply to this topic.