Design LiveCode layout with CSS Like style

In recent, I joined a interesting project which use LiveCode to develop some App. In the project a member responsible to design UI and the other one is in charge of coding. UI design and coding were done at the same time. It is very exhausted either that the coder set the UI properties or the coder wait UI designer to set UI properties.

So we developed a plugin to separate two kinds of job.

We can set the properties in text file, such as:

.oldc { -lc-foreground-color : YELLOW  ; -lc-background-color  :  green ; /* sss--;; */}
  #demoGroup {
  -lc-background-color: AliceBlue;
  -lc-foreground-color: pink;
  -lc-font-size:20;
  }

We can change image dynamicly：

  #demoImage { -lc-filename : "./Image/Brazil.png"; -lc-angle:60; }

It is alsosupport the pseduo-classes, such as：

 .glowMe:mouseEnter {
  -lc-outer-glow: graphicEffect(yellow,normal,191,gaussian,30,10);
  }
    .glowMe:mouseLeave {
  -lc-outer-glow: empty;
  }

The demo screen snapshots ：

(1) We can choose “ThemeA” :


(2) or switch to “Theme” :


(3) We can also combine “ThemeA,ThemeB” orderly or “ThemeB,ThemeA”.

The plugin is still in development. We need more help.

If you like LiveCode and need to seperate UI design and coding, we can share our experience.