Unpacking Utility Classes

One of the core functions of Selectoplasm is taking utility classes and unpacking their declarations into your components. While this is a simple enough concept, Selectoplasm offers some extra features, such as deciding whether you want a declaration to be Atomic, Semantic or Intrinsic. (You read the ASI section, right? Right?)

Say you have a utility class with a single declaration:

.p1 {
   padding: 1px;
}

When you type p1 into the Component Builder's Combo Input, Selectoplasm will detect the utility class and automatically provide realtime feedback on your page, showing how your page would look if you applied this utility class to all elements that match that component's selector.

When you press Enter, Selectoplasm will then unpack the utility class (and any others you've typed into the Combo Input) into the current component.

Selectoplasm's default behaviour is to unpack utility classes into the same declarations as they are. So the above would unpack to:

padding: 1px;

Next, let's look at stylesheets.