Uniform CSS 1.2.0
馃帀 New Feature Release v1.2
We're excited to announce Uniform CSS v1.2 with it brings even more customization and quality of life features never before seen in any CSS framework! Uniform CSS allows you to customize and generate any number of utility classes in any way you like without requiring you to go all-in. To support this workflow further, we've introduced some great power features in this update!
JSON Outputs
Previously the official docs site was the only place you could see a list of all available utility classes and If you customized any of the ways your utility classes are generated, this would no longer stay in sync with the officially supported classes.
We're super excited to announce output mode! By setting this to json
you can now output a JSON of all your utilities with customizations applied. Meaning, you can use this JSON output to generate your own dictionary reference so that your entire team can now stay in sync. This feature is even supported for any custom properties as well!
How it works
INPUT
@use "uniform" as * with (
$config: (
output: 'json',
excludes: (all),
includes: (text-align)
)
);
OUTPUT
{
"text-align": {
"important": "false",
"extra-selector": "",
"responsive": "true",
"pseudos": "none",
"classes": {
"text-left": {
"text-align": "left"
},
"text-center": {
"text-align": "center"
},
"text-right": {
"text-align": "right"
},
"text-justify": {
"text-align": "justify"
}
}
}
}
Multi-Property Utilities
You can now generate any custom utility that includes multiple CSS properties! Simply apply variant values as <property>: <value>
based map directly in your utilities
settings.
How it works
INPUT
@use "uniform" as * with (
$config: (
utilities: (
heading: (
important: false,
shorthand: heading,
responsive: false,
responsive-pseudos: false,
properties: (),
static-properties: (),
variants: (
1: (
font-size: 24px,
line-height: 160,
font-weight: 700
),
2: (
font-size: 18px,
line-height: 140,
font-weight: 800
),
),
pseudos: (none)
)
),
excludes: (all),
includes: (heading)
)
);
OUTPUT
.heading-1 {
font-size: 24px;
line-height: 160;
font-weight: 700;
}
.heading-2 {
font-size: 18px;
line-height: 140;
font-weight: 800;
}
Localized Important Support
Previously, setting important: true
could only be done globally. You can now enable important
locally to any specific utility.
How it works
@use "uniform" as * with (
$config: (
utilities: (
text-align: (
important: true,
),
margin: (
important: true,
)
)
)
);
Thank you @conormuirhead for taking the time to check out this project and providing amazing feedback! We hope these updates improve your workflow!