DEV Community

Cover image for Uniform CSS: Build modern UI without losing the productiveness of Sass
Ashik Chapagain
Ashik Chapagain

Posted on

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

#css #uniformcss #ui #cssframework

Hey, folks 👋

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 *;
Enter fullscreen mode Exit fullscreen mode

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
  )
 )
);
Enter fullscreen mode Exit fullscreen mode

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-50 will 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
     )
  );
Enter fullscreen mode Exit fullscreen mode
  • 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
      )
    );
    ```
{% endraw %}

{% raw %}

    ```css

     /* 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;
      }
      ...
      ```
{% endraw %}

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.
{% raw %}


```html
<!-- index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/ThinkUniform/uniformcss/css/uniform.min.css" />
Enter fullscreen mode Exit fullscreen mode 
/* main.css */
:root {
  --font-sans: 'my-font', sans-serif;
  --bold: 700;
}
Enter fullscreen mode Exit fullscreen mode

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
        )
      )
    )
  )
);
Enter fullscreen mode Exit fullscreen mode 
/* main.css */
.leading-trim { leading-trim: both; }
.text-cap { text-edge: cap alphabetic; }
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode 
/* main.css */
.custom-element {
  padding: 1.25rem 1.5rem;
  font-weight: var(--bold); /* 700 */
  background-color: rgba(var(--primary-500), 1);
}
Enter fullscreen mode Exit fullscreen mode

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');
  }
}
Enter fullscreen mode Exit fullscreen mode 
/* 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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
  )
);
Enter fullscreen mode Exit fullscreen mode
  • Compile Scss 
yarn add sass --dev
yarn uniform:watch
Enter fullscreen mode Exit fullscreen mode
  • Use compiled in html 
...
   <link rel="stylesheet" href="/dist/uniform.css"/>
...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And if you want to use yarn.

yarn add uniformcss
yarn add sass --dev
Enter fullscreen mode Exit fullscreen mode
  • 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 *;
Enter fullscreen mode Exit fullscreen mode
  • 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"
  },
...
Enter fullscreen mode Exit fullscreen mode
  • Use compiled in html 
...
   <link rel="stylesheet" href="/dist/uniform.css"/>
...
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Managing file size

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

Here's the comparison:

FRAMEWORK MINIFIED GZIP BROTLI
Tailwind 2927.5kb 297.4kb 74.3kb
Semantic UI 628.5kb 102.3kb 79.6kb
Uniform 523.1kb 74.6kb 30.6kb
Bulma 205.4kb 27.1kb 20.7kb
Foundation 182.0kb 38.5kb 32.1kb
Bootstrap 155.6kb 22.9kb 20.4kb

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
    )
  )
);
Enter fullscreen mode Exit fullscreen mode
  1. Remove unused CSS: You guys can use purgecss to remove unused CSS.
  • Install Purge CSS 
   yarn add purgecss
   OR
   npm install purgecss
Enter fullscreen mode Exit fullscreen mode
  • Create purgecss.config.js 
    module.exports = {
      content: [
         '**/*.html',
      ],
    css: ['dist/uniform.min.css'],
   }
Enter fullscreen mode Exit fullscreen mode
  • Add following to package.json 
   "scripts": {
      ...
      "uniform:purge": "purgecss -c purgecss.config.js -o dist"
    },
Enter fullscreen mode Exit fullscreen mode
  • Run the command 
   npm run uniform:purge OR yarn uniform:purge
Enter fullscreen mode Exit fullscreen mode

References

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

Top comments (0)

Read next

stuffbreaker profile image

Deprecating Your Web Component APIs

Burton Smith -

softheartengineer profile image

Backlight in CSS

Soft Heart Engineer -

philip_zhang_854092d88473 profile image

Vercel v0: Harnessing AI for Faster, Smarter UI Creation

Philip -

pavelkeyzik profile image

Hello, developers! 👋

Pavel Keyzik -