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!