Uniform CSS: Build modern UI without losing the productiveness of Sass

Hey, Hashnoders 👋

This article will go through the new UI library in the market, Uniform CSS, a fully configurable utility generator and CSS framework built entirely in Sass.

What is Uniform CSS?

According to the Uniform CSS dev team, Uniform CSS is a " flexible, responsive utility class generator and CSS framework designed to help you gain the full power of functional CSS without compromising on Sass. ".

Unifrom CSS uses the same workflow as Tailwind CSS, utility first.

How is Uniform CSS unique?

Uniform CSS is unique from any other framework because:

1. It's written entirely in Sass

Uniform CSS is entirely written in Sass so that you can gain the full power of Sass. We can add Uniform CSS to our project with a single line of code.

// main.scss
@use "uniform" as *;

2. It is fully customizable and dead-easy to customize

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 modify the syntax and add or remove properties.

Here's what I mean?

// main.scss

@use "uniform" as * with (
// add configurations here... 
 $config : (
   important : true,
   prefix : ashik,
   delimiter : "-",
   colors: (
      red-color : red,
      yellow-color : yellow
  ), 
   excludes : (
     all
  ),
  includes : (
      color
  )
 )
);

Let's breakdown the above configurations:

• $config: All the build settings, 'theme settings,andutility settings come under it.`
  • important: Adds !important rule after every property
  • prefix: Add prefix text to every class. eg.color-gray-50will be.ashikcolor-gray-50` according to above example
  • delimiter: Specifies the delimiter that separates shorthand name from its variant.
    • If delimiter is --, .colors-gray-50 will be .colors--gray-50
    • If delimiter is _, .colors-gray-50 will be .colors_gray-50
  • colors: Add the given additional colors to the stylesheet
• excludes: Specifies which properties to exclude
• includes: Specifies which properties to include

There are other configurations too. Let's learn some of the important ones.

• $config

  • headless: When headless is enabled, Uniform CSS will be loaded, but it will generate nothing in the final output file. This can be useful when you need access to helper mixins or API functions without importing the entire library.

    @use "uniform" as * with (
     $config: (
      headless: true, // false by default
     )
    );
    

  • comma-compression: When comma-compression is enabled, pseudo variants will be joined to its standard parent using the comma selector. Enabling this setting will reduce the final output size however slightly increase build time.

    // main.scss
    @use "uniform" as * with (
      $config: (    
        comma-compression: true
      )
    );
    

    
     /* main.css */
    
     .bg-opacity-50, 
     .focus\.bg-opacity-50:focus, 
     .group:hover .group-hover\.bg-opacity-50, 
     .hover\.bg-opacity-50:hover {
        --bg-opacity: 0.5;
     }
     .bg-opacity-55, 
     .focus\.bg-opacity-55:focus, 
     .group:hover .group-hover\.bg-opacity-55, 
     .hover\.bg-opacity-55:hover {
        --bg-opacity: 0.55;
      }
      .bg-opacity-60, 
      .focus\.bg-opacity-60:focus, 
      .group:hover .group-hover\.bg-opacity-60, 
      .hover\.bg-opacity-60:hover {
         --bg-opacity: 0.6;
      }
      ...
    

    And there are many others too.

3. Built with CSS Variables in mind

Uniform CSS allows customizing the theme just by overriding the CSS variables.

<!-- index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/ThinkUniform/uniformcss/css/uniform.min.css" />

/* main.css */
:root {
  --font-sans: 'my-font', sans-serif;
  --bold: 700;
}

4. You can add your own properties

Uniform CSS lets you add your own properties.

What do I mean?

@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
        )
      )
    )
  )
);

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

5. Built-in helper functions to access theme values

Do you prefer the old style for styling? Then built-in helper functions come in help.

// main.scss
.custom-element {
  padding: size(20, 24);
  font-weight: font(bold);
  background-color: fill(primary-600);
}

/* main.css */
.custom-element {
  padding: 1.25rem 1.5rem;
  font-weight: var(--bold); /* 700 */
  background-color: rgba(var(--primary-500), 1);
}

6. Extract components as design patterns emerge

Quickly extract components as design patterns emerge with the apply() mixin.

// main.scss
.parent {
  @include apply('p-40 shadow-2xs radius-2xl');
  .child {
    @include apply('hover.opacity-50 p-24 md.p-64');
  }
}

/* main.css */
.parent {
  padding: 2.5rem;
  box-shadow: var(--shadow-2xs);
  border-radius: var(--radius-2xl);
}
.parent .child {
  padding: 1.5rem;
}
.parent .child:hover {
  opacity: 0.5;
}
@media (min-width: 1024px) {
  .parent .child {
    padding: 4rem;
  }
}

Browser Support

Uniform CSS looks and performs great on all the latest versions of modern browsers. Uniform CSS is tested and built to support the latest stable version of Chrome, Firefox, Edge, and Safari. Uniform CSS does not support any version of IE, including IE 11.

Installation Guide

Uniform CSS gives you three methods to use in your project.

By cloning the repo

Cloning repository is one of the best options for using Uniform CSS because everything like dart-sass for compiling sass to CSS, purgecss for purging CSS comes pre-setup.

• Clone Repo

# Change directory to where your main sass file lives
cd MyAmazingProject

# Clone project
git clone https://github.com/ThinkUniform/uniformcss

• Change the configurations if required Now you can change the configurations as per your requirement in main.scss file.

@use "uniform" as * with (
  $config: (
    comma-compression: true,
    css-variables: true
  )
);

• Compile Scss

  yarn add sass --dev
  yarn uniform:watch
  

• Use compiled in html

  ...
   <link rel="stylesheet" href="/dist/uniform.css"/>
  ...
  

NPM / Yarn

If you guys have a node installed, you can use npm to use uniform CSS in your project.

• Installation

  npm install uniformcss
  npm install sass -D
  

  And if you want to use yarn.

  yarn add uniformcss
  yarn add sass --dev
  

• Include Uniform module in your Sass project Add the following line to your main .scss stylesheet to add Uniform to your project.

  @use "uniform" as *;
  

• Add following scripts in package.json

  ...
  "scripts": {
    "uniform": "sass --load-path=./node_modules/uniformcss --load-path=./ --load-path=./optional-sass-path --no-source-map main.scss dist/uniform.css",
    "uniform:compressed": "sass --load-path=./node_modules/uniformcss --load-path=./ --load-path=./optional-sass-path --no-source-map main.scss dist/uniform.min.css --style compressed",
    "uniform:watch": "sass --load-path=./node_modules/uniformcss --load-path=./ --load-path=./optional-sass-path --no-source-map --watch main.scss dist/uniform.css",
    "uniform:watch-compressed": "sass --load-path=./node_modules/uniformcss --load-path=./ --load-path=./optional-sass-path --no-source-map --watch main.scss dist/uniform.min.css --style compressed"
  },
  ...
  

• Use compiled in html

  ...
   <link rel="stylesheet" href="/dist/uniform.css"/>
  ...
  

CDN

A simple and easy method to use Uniform CSS in your project.

For an even quicker way to get started, simply add the following stylesheet to the head of your project.

<link href="https://cdn.jsdelivr.net/npm/uniformcss@1.0.0/dist/uniform.min.css" rel="stylesheet" />

Managing file size

Being utility first, its CSS file size is a big. But comparing with tailwindcss it is small.

Here's the comparison:

Here are some of the methods to make the output file of Uniform CSS small.

1. Merged pseudos: When a comma-compression setting is enabled, pseudo variants will be collapsed rather than duplicating whole sets of selectors. This makes it possible to activate multiple pseudo variants without much impact on the final size.

2. Exclude unused properties: You can drastically further reduce your output size by excluding properties or variants you are unlikely to use.

   // Remove default properties
   @use "uniform" as * with (
   $config: (
    // remove default colors
    colors: null,
   
    // remove negative sizes
    negative-sizes: null,
   
    // exclude the following properties from build
    excludes: (
      background,
      background-attachment,
      opacity
    )
   )
   );
   

3. Remove unused CSS: You guys can use purgecss to remove unused CSS.

   • Install Purge CSS

     yarn add purgecss
     OR
     npm install purgecss
     

   • Create purgecss.config.js

     module.exports = {
      content: [
         '**/*.html',
      ],
     css: ['dist/uniform.min.css'],
     }
     

   • Add following to package.json

     "scripts": {
      ...
      "uniform:purge": "purgecss -c purgecss.config.js -o dist"
     },
     

   • Run the command

     npm run uniform:purge OR yarn uniform:purge
     

References

• UniformCSS docs: https://uniformcss.com/docs/overview/

Conclusion

This is all about how to create a modern UI with Uniform CSS. Hope you all like this article.

Connect with me in Twitter: https://twitter.com/ChapagainAshik