Uniform CSS: Build modern UI without losing the productiveness of Sass
Tags: css, uniformcss, ui, cssframework
Published: 2021-08-12 09:45:15

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.
```scss
// 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?

```scss
// 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,` and `utility 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.
  ```scss
  @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.
   ```scss
    // main.scss
    @use "uniform" as * with (
      $config: (    
        comma-compression: true
      )
    );
    ```
    ```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;
      }
      ...
      ```
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.

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

```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?

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

```css
/* 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.

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

```css
/* 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.

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

```css
/* 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.

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

- **Compile Scss**
```bash
yarn add sass --dev
yarn uniform:watch
```

- **Use compiled in html**
```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.
```scss
@use "uniform" as *;
```

- **Add following scripts in `package.json`**
```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**
```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.
```html
<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:

|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.
```scss
// 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
   ```js
    module.exports = {
      content: [
         '**/*.html',
      ],
    css: ['dist/uniform.min.css'],
   }
   ```
   - Add following to package.json
   ```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/](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](https://twitter.com/ChapagainAshik)