“ Survival is the ability to swim in strange water.
Creating accessible, yet aesthetically pleasing form controls is not always easy. It often requires styling pseudo-elements as well as pseudo classes. MelangeCSS code, in theory, provide enough classes to make this possible, however it would baloon the size of the CSS.
Consider styling the :active state of a button. You might wish to change the border, background color, text color, or other styles to indicate an active state. This would require most of the classes to be duplicated to provide e.g. a active- version.
Form controls are situations where it's best to use MelangeCSS to create base styles, then write some actual CSS that uses the variables to maintain consistency with the design system.
Custom Checkboxes
Here is how you could use MelangeCSS to create a custom checkbox, following the guide by Stephanie Eckles. In her guide, standard HTML is used in combination with apearance: none and a pseudo :before element.
Here is the HTML, with all styling possible by MelangeCSS specified as classes:
<label class="f-3 fw-bold lh-copy flex gap-2 items-center mv-2">
<input type="checkbox" name="checkbox"
class="ma0 w-2 h-2 ba bw-1 br-1
flex items-center justify-center
appearance-none" />
Checkbox
</label>
<label class="f-3 fw-bold lh-copy flex gap-2 items-center mv-2">
<input type="checkbox" name="checkbox-checked"checked
class="ma0 w-2 h-2 ba bw-1 br-1
flex items-center justify-center
appearance-none" />
Checkbox - checked
</label>
We then write some CSS following Stephanie's guidelines, but using MelangeCSS variables where possible.
input[type="checkbox"]::before {
content: "";
width: var(--mg-sp-2); /* spacing for w-2 */
height: var(--mg-sp-2); /* spacing for h-2 */
background-color: var(--mg-purple-400); /* referencing any color we want to use */
transform: scale(0); /* unchecked styling has this pseudo-element
scaled down to 0 */
}
input[type="checkbox"]:checked::before {
transform: scale(1); /* When selected, scale to normal size */
}
This produces the following form controls:
So, yes, this is CSS. You need to know CSS to use MelangeCSS, and this demonstrates the balance between utility and size. The form elements conform to the design system since they reference the variables MelangeCSS provides.
Active States for Buttons
Styling active states for buttons can be extremely helpful for accessibility, especially if a button cannot be guaranteed to perform its function within a few hundred milliseconds. First, let's take the button from the home page:
<button class="dib ph-4 pv-3 tc f-3 ba br-3
bg-blue-900 blue-100
pointer">
Click Me
</button>
We'd like this button to show an inverse color scheme when active. We can do this using a filter:
button:active {
filter: invert(1);
}
This works:
Again, we can drop into CSS when needed. This is the balance struck by MelangeCSS. To allow even basic needs for styling active buttons using just classes would require many more classes, most of which would never be used. This would mean either having much larger-than-needed CSS or having a build step. Neither of this options is acceptable.
That said, MelangeCSS provides tools to create your own custom utility classes for when you need to iterate quickly on something not provided by default.