Using Uniform CSS to build modern UI

Frontend web development is an ever-changing field, and the tools we use, such as frameworks and libraries, to make our development process more effective and exciting also continually evolve.

CSS frameworks are an important aspect of frontend development. They assist us in creating modern user interfaces (UI) quickly and consistently, as well as provide a level of abstraction through a set of CSS classes that execute specific tasks.

In this article, we will cover Uniform CSS, a configurable utility class generator and CSS framework developed entirely in Synthetically awesome style sheet (Sass).

What is Uniform CSS?

According to the team behind it, Uniform CSS is “a fully configurable utility generator and CSS framework built entirely in Sass, so you gain the power of utility-first workflow without losing the productiveness of Sass.”

Uniform CSS uses a workflow similar to Tailwind CSS or StemCSS, where developers design stunning UI using predefined CSS classes provided by the framework. Uniform CSS is unique in that it is built entirely with Sass and is completely configurable with functional CSS.

Uniform CSS vs. Tailwind CSS

So, what makes Uniform CSS different than other CSS frameworks, such as Tailwind CSS? First of all, it’s fully configurable because it allows developers to customize everything within the framework. They can customize prefixes and delimiters, remove and extend colors, and even modify the syntax and add or remove properties.

Here’s what I mean:

// All configs are done in the scss file 
// main.scss 
@use "uniform" as * with (
// add configurations here... 
 $config : (
   important : true,
   prefix : example,
   delimiter : "-",
   colors: (
      green-color : green,
      yellow-color : yellow
  ), 
   exclude : (
      padding,
      color,
      margin,
  ),
  include : (
      all 
      // includes all properties.
  )
 )
);

The code above would output to our CSS file, where we have access to the classes, like so:

// main.css 
.example-bg-green-color {
   background-color : green !important; 
}

.example-bg-yellow-color {
   background-color : yellow !important; 
}

Now we can use these utilities in our HTML code.

Because Uniform CSS is built on Sass, it compiles down to regular CSS. But it also provides the advantages that usually come with working in Sass, such as vendor prefixes for CSS properties, mixins, functions, and more.

And, if those perks aren’t enough, when you use Uniform CSS, you don’t need to wait for it to get access to new CSS properties — you can simply add your own properties directly into your Sass config.

Here’s an example from Uniform:

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

This compiles to:

/* main.css */
.leading-trim {
       leading-trim: both;
 }
.text-cap {
       text-edge: cap alphabetic;
 }

Installing Uniform CSS

Uniform is quite simple to set up. There are three ways to use Uniform CSS in our project. Let’s have a look at each one.

Cloning the GitHub repository

Simply clone the GitHub repository into your project folder:

git clone https://github.com/ThinkUniform/uniformcss

Now we need to add Uniform to our .scss file, compile it, and watch for changes. Here’s how to do it:

// add this to your .scss file
@use "uniform" as *;

// now we compile using one of the build scripts made available to us or just do it using a sass build process of your choice

yarn uniform

Installing it this way enables us to completely configure Uniform to meet our needs.

Installing via npm

If you have Node.js installed, then simply use this command:

npm install uniformcss
// add this to your .scss file
@use "uniform" as *;

Now we can compile and watch for changes using a preferred Sass build process, such as the watch Sass extension in Visual Studio Code. Installing Uniform this way also enables us to fully configure it to suit our needs.

Installing from a CDN

For a quick way to get up and running with Uniform, just add the CDN link into the head tag of your HTML document:

https://cdn.jsdelivr.net/npm/[email protected]/dist/uniform.min.css

With this option, you’ll only be able to make basic adjustments if you use the pre-compiled version, so you won’t have access to more extensive customization options.

To configure Uniform when working with the CDN option, simply define CSS variables as overrides in a :root pseudo-element, like so:

:root{
  --font-sans : 'Poppins', sans-serif;
  --primary-700 : 255, 224, 249
}

Now you can use those variables in your HTML document:

<h1 class="font-sans color-primary-700">Hi there!</h1>

Using Uniform CSS in your project

Now let’s build a simple card component using Uniform utility classes.

Because this is a small project, we’ll first install Uniform using a CDN. But, if you want additional configuration options, you should install via npm because the CDN option doesn’t provide us with much flexibility.

Go ahead and add the following CDN link to the head tag of your HTML file:

https://cdn.jsdelivr.net/npm/[email protected]/dist/uniform.min.css

We can now apply all of the Uniform CSS utility classes to our HTML card component:

<main class="flex justify-content-center relative top-80 font-serif">
  <div class="flex flex-col justify-content-between shadow-lg w-448 radius-lg">
      <img src="https://images.unsplash.com/photo-1593990965215-075c1f918806?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="A black man with dark shades on" class="h-288 object-cover object-center radius-lg">
  
      <div class="text-center p-12">
        <h2 class="ultrabold text-2xl p-10">Nelson Michael</h2>        
        <p class="text-sm">[email protected]</p>
      </div>
  
      <div class="flex justify-content-between m-auto w-320 p-20 text-center">
        <div>
          <h3 class="extrabold text-xl">25</h3>
          <p class="text-sm">Posts</p>
        </div>
    
        <div>
          <h3 class="extrabold text-xl">350</h3>
          <p class="text-sm">Following</p>
        </div>
    
        <div>
          <h3 class="extrabold text-xl">1.5k</h3>
          <p class="text-sm">Followers</p>
        </div>
      </div>
  </div>
</main>

Here’s an API reference that shows all of the classes available to you, and this is what our final build would look like:

See the Pen
uniform-css-example by King nelson (@D_kingnelson)
on CodePen.

We were able to create this simple card component without touching our CSS file by simply adding a few classes.

Here’s another example:

See the Pen
uniform-css-example-2 by King nelson (@D_kingnelson)
on CodePen.

The example above demonstrates how simple it is to create reusable components with Uniform. We accomplished this without touching our CSS file, except for when we needed to adjust the configuration.

Browser support for Uniform CSS

Uniform CSS currently supports stable versions of Chrome, Firefox, Edge, and Safari. It does not work with any version of Internet Explorer, including Internet Explorer 11.

Conclusion

Uniform CSS is a great frontend development tool because it offers many predefined classes while allowing for customization and the ability to add and remove classes at will. I hope you found this tutorial helpful.