New

Stable version of Uniform CSS now officially released! Release note

Custom Properties

Generating your own custom properties.


Custom Properties

The utilities map can also be used to generate your own custom properties.


Generating Custom Properties

You can use the same data structure of a utility setting to generate your own property.

// main.scss
@use "uniform" as * with (
$config: (
utilities: (
leading-trim: (
responsive: true,
shorthand: leading,
properties: (leading-trim),
variants: (
trimmer: both
)
),
text-edge: (
shorthand: text,
properties: (text-edge),
variants: (
cap: cap alphabetic
)
)
)
)
);
/* main.css */
.leading-trimmer { leading-trim: both; }
.text-cap { text-edge: cap alphabetic; }
...

Excluding Custom Properties

Any new utilities generated through the utilities settings map will behave like any other utility and can be included or excluded using the includes and excludes setting.

// default values
@use "uniform" as * with (
$config: (
utilities: (
leading-trim: (
responsive: true,
shorthand: leading,
properties: (leading-trim),
variants: (
trimmer: both
)
),
),
excludes: (
all
),
includes: (
leading-trim
)
)
);

Add to Core Library Advanced

Adding utilities through the utilities map in your configuration is a quick way to add new properties however when adding many, your Uniform configuration may become long. To avoid this problem custom properties can also be added natively to the core library.

1. Build out your data structure

Create a new sass document and use the following template to configure your own custom property.

// uniform/utilities/leading-trim.scss
@use "uniform/core";
@use "sass:map";

$name: leading-trim;
$shorthand: leading-trim;
$responsive: false;
$responsive-pseudos: false;
$extra-selector: null;

$properties: (leading-trim);
$static-properties: ();

$variants: ();

$pseudos: ();

$config: (
utilities: (
$name: (
shorthand: $shorthand,
responsive: $responsive,
responsive-pseudos: $responsive-pseudos,
extra-selector: $extra-selector,
properties: $properties,
static-properties: $static-properties,
variants: (
$variants,
),
pseudos: (
$pseudos,
),
),
),
);

core.$all-config: map.deep-merge(core.$all-config, $config);

2. Include custom property to the import list

Open uniform/_index.scss and include the newly created custom property using the @use after the last imported property.

// uniform/_index.scss
...
@use "utilities/svg/core-fill";
@use "utilities/svg/core-stroke";
@use "utilities/svg/core-stroke-width";

@use "utilities/leading-trim"; // include your custom property here

3. Override or customize custom property (optional)

Once your custom property has been added into the core library, it will behave like any other utility property. This means it can be configured, overwritten or extended like any other property inside the utilities setting in your configuration.

// main.scss
@use "uniform" as * with (
$config: (
utilities: (
leading-trim: (
...
)
)
)
);