Selectoplasm Logo

Selectoplasm is a design tool made for developers. You can set it up with your favourite utility classes and css generators, and then design your app in the browser with realtime feedback.

To begin, try pressing e to bring up the Elements Menu. Hover over one of these paragraphs, and click. You will get a choice of selector to use, based on the element's classes and ids. Choose a selector. This will open the component builder.

In the Component Builder, you can type utility classes which are available. You can check which utility classes are available using the Stylesheets view. Do not type the period! (i.e. for ".p1" just type "p1")

Try playing with the padding, margin, and borders.

Then, try adding the "primary" class and using the colors plugin configuration to change the color hue.

Finally, open the Colors Plugin dialog to see just how easy it is to create dynamic plugins in Selectoplasm!

Oh, open a second browser window (not tab) and load this page. Then set that window's mode to Passive (using the island there; it says Mode: Active probably). Now the active window will send realtime updates to the passive window so you can design for multiple layouts at once!

Colors Plugin

config.html
<input name="hue" type="range" min="0" max="359" value="120" />
<input name="saturation" type="range" min="0" max="100" value="60" />
<input name="lightness" type="range" min="0" max="100" value="60" />
utility.css
.primary {
  color: var(--color);
}
worker.js
self.onmessage = (event) => {
   const result = run(event.data);
   self.postMessage(result);
}

function run(config) {
   const { hue, saturation, lightness } = config
   const root = {
      selector: ":root",
      declarations: [
         ["--color", `hsl(${hue}, ${saturation}%, ${lightness}%);`]
      ]
   }

   return {
      rulesets: [ root ]
   }
}

That's how simple it is to create your own dynamic workflow with Selectoplasm!