New

Uniform CSS has now been officially released!
Read more


Extracting Components

Dealing with common utility patterns.


Extracting Components

Uniform encourages the extraction of components when clear and repeating design patterns emerge. The following guide will cover the various ways you can extract components.


Using API Functions

You can build custom components and still get access to theme variables using API Functions. To learn more, refer to the page on API Functions.

// main.scss
.custom-element {
display: block;
padding: size(20);
font-family: font-family(sans);
border-radius: radius(md);
box-shadow: shadow(sm);

&:hover {
box-shadow: shadow(md);
}
}

Using @apply mixin Beta

The apply() mixin allows you to apply properties directly using shorthand utility class names. Behind the scene, it parses through the list of arguments and extends placeholder selectors that match the name.

.element {
@include apply(
'mb-24',
'hover.mb-32',
'p-20',
'bg-white',
)
}

To enable this feature, placeholders must be set to true in your configuration.

@use "uniform" as * with (
$config: (
placeholders: true,
)
);