Home Blog Introducing our live LESS and CSS editor

Introducing our live LESS and CSS editor

Live CSS Box
Live CSS Box

Do you recall those moments when you wanted to make a small visual adjustment to a page and couldn’t do it fast and easy enough?

It was either because of the theme or plugin you were using that didn’t allow the customization. You were so frustrated trying, but in the end, you just gave up as you couldn’t find the solution. We have good news. It’s possible! The ionMag WordPress theme has a user-friendly Live CSS tool that lets you change the design on every little detail until it reaches the form you like.

It’s simple to make customizations with Live CSS on both pages and articles. On every post, you can easily insert code lines to adjust a specific section by changing fonts, colors, borders, backgrounds, alignments, opacity, and more. The tool is also available in tagDiv Composer to help you customize each element of the page.

 “Code is poetry”

Live CSS comes with an integrated compiler that reads both CSS and LESS formats, therefore you can write your syntax in any “language” you want. The tool will translate it, and you will get instant results!

LESS helps you write code in a more efficient way as it brings additional mechanisms like variables and mixins to extend your CSS. With LESS you can handle code repetitions better, as opposed to CSS, which only allows modifications if the code is repeated in each location. In a simplified way, you write the same functionality using fewer lines, making it easier to customize and debug.

Now that we know the difference, let’s see the Live CSS in action.

This tool is designed to help you make quick fixes to your website design. It supports syntax highlighting, so you have a clear view of what you are typing. This particularity displays the source code in distinctive colors and fonts according to the category of terms.

No more errors

If an error slipped through your fingers, this tool performs a static analysis of everything you write and lets you know if something’s wrong. It highlights the line where the error is located, so you can easily find and correct it.

The Live CSS has an auto-complete characteristic which automatically suggests the CSS properties. You only have to start writing, then press Ctrl + Space.


Wrapping up

  • Using this tool is a piece of cake once you have the basic knowledge of CSS and LESS.
  • Since Live CSS facilitates customization, you are now able to make modifications on both pages and posts in a way that just wasn’t possible before. Fine tune your website exactly the way you like it!
  • You can work faster and more efficient, by making the desired adjustments using the autocomplete function.
  • The Live CSS finds and highlights any error you might have missed, saving you the trouble of searching through full rows of code.

Stay tuned for next tips and tricks! Don’t forget to tell us what you’ve accomplished on your website in the comments below!