1.5.4

Lightning Fast 
Generator for Sass

Flexible responsive utility class generator and CSS framework designed to help you gain the full power of functional CSS without compromising on Sass.

Read the docs →
ionicons-v5-c
Why in under 2 minutes

"Sass already provides great functionality out of the box. Uniform CSS builds on this strength to help web developers be more productive with the power of immensely flexible utility-first classes."

— Jin Su Park, Product Designer@Castle

Load and control
directly in Sass

Infuse any Sass-built project with the power of utility-first CSS. Fully configure directly in Sass, or add helpful utilities progressively without requiring a complete project overhaul.

Learn how to get started →
ionicons-v5_logos

Configure Uniform directly in Sass 

@use "uniform" as * with (
  $config: (
    important: true
  )
);
css

Generate utilities properties

Literally just
one line of code

Installing Uniform is a drop-in process. Just load Uniform as a module, compile, then compose, it's that simple. You can even load the CDN version to get started even faster.

Learn how to get started →

Step 1. Install package or clone repository 

npm install uniformcss

Step 2. Load module in Sass and compile 

@use "uniform" as *;

Step 3. Link stylesheet in your project

Blazingly fast
front-end workflow

Say goodbye to lingering legacy stylesheets and start building without ever touching your CSS.

Live edit on Codepen →
Feb 2021
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Wednesday, Feb 07
10:00 - 11:00
Unisex
Uniform Hoodie
$50
Size
Size guide

Free shipping on orders over $25.

Purchased by 10 of your friends

+5
Sign in to Uniform
Enter your username and password
ionicons-v5-o
ionicons-v5-g
Uniform Academy

Animation in UI Design

18.57
32.56
Activity
  • Sam Lilo
    2 hours ago
    Paid invoice ref. #687
    $58.28
  • Sam Lilo
    3 minutes ago

    Reviewed the invoice and sent to tom@lorem.com

Do one thing,
but really well

Every class name in Uniform is immutable and carefully named to be intuitive and memorable.

See the glossary →
  • .h-1 1px
  • .h-2 2px
  • .h-4 4px
  • .h-6 6px
  • .h-8 8px
  • .h-10 10px
  • .h-12 12px
  • .h-14 14px
  • .h-16 16px
  • .h-20 20px
  • .h-24 24px
  • .ultralight
    Uniform
    100
  • .extralight
    Uniform
    200
  • .light
    Uniform
    300
  • .regular
    Uniform
    400
  • .semibold
    Uniform
    500
  • .semibold
    Uniform
    600
  • .bold
    Uniform
    700
  • .extrabold
    Uniform
    800
  • .ultrabold
    Uniform
    900
  • .bg-red 50 – 950
  • .bg-yellow 50 – 950
  • .bg-lime 50 – 950
  • .bg-green 50 – 950
  • .bg-teal 50 – 950
  • .bg-primary 50 – 950
  • .bg-purple 50 – 950
  • .bg-indigo 50 – 950
  • .bg-pink 50 – 950
  • .radius-2xs 3px
  • .radius-xs 4px
  • .radius-sm 6px
  • .radius-md 8px
  • .radius-lg 12px
  • .radius-xl 18px
  • .radius-2xl 24px
  • .radius-full 9999px
  • .shadow-2xs 0 1px 2px 0 rgba(134,144,162,0.1)
  • .shadow-xs 0 2px 4px rgba(134,144,162,0.15)
  • .shadow-sm 0 3px 6px rgba(134,144,162,0.2)
  • .shadow-md 0 4px 8px rgba(134,144,162,0.25)
  • .shadow-lg 0 6px 12px rgba(134,144,162,0.3)
  • .shadow-xl 0 12px 24px rgba(134,144,162,0.35)
  • .shadow-2xl 0 24px 48px rgba(134,144,162,0.4)

Every utility
made to order

Attach prefixes, change shorthands, remove delimiters, add important flags, enable responsiveness, and even apply extra-selectors. Control every aspect of how utilities are generated.

Learn about configuration → 
// main.scss

@use "uniform" as * with (
  $config: (    
    utilities: (
      margin-top: (
        shorthand: mt
      ),
      margin-right: (
        shorthand: marginRight
      )
    )
  )
);
/* main.css */

.mt-1 {
  margin-top: 0.062rem;
}
.mt-2 {
  margin-top: 0.125rem;
}
...

.marginRight-1 {
  margin-right: 0.062rem;
}
...
// main.scss

@use "uniform" as * with (
  $config: (    
    important: true
  )
);
/* main.css */

.align-baseline {
  vertical-align: baseline !important;
}
.align-top {
  vertival-align: top !important;
}
.align-middle {
  vertical-align: middle !important;
}
.align-bottom	{
  vertival-align: bottom !important;
}
.align-text-top	{
  vertical-align: text-top !important;
}
.align-text-bottom {
  vertical-align: text-bottom !important;
}
...
// main.scss

@use "uniform" as * with (
  $config: (    
    delimiter: '--',
    pseudo-delimiter: '__',
    screen-delimiter: '.',
  )
);
/* main.css */

.bg--opacity-50 {
  --bg-opacity: 0.5;
}
.hover__bg--opacity-50:hover {
  --bg-opacity: 0.5;
}
.focus__bg--opacity-50:focus {
  --bg-opacity: 0.5;
}
...

@media (min-width: 768px) {
  .sm\.text--center {
    text-align: center;
  }
}
...
// 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;
}
...
// main.scss

@use "uniform" as * with (
  $config: (    
    prefix: 'u-',
  )
);
/* main.css */

.u-inline {
  display: inline;
}
.u-block {
  display: block;
}
.u-flex {
  display: flex;
}
.u-grid {
  display: grid;
}
.u-inline-block {
  display: inline-block;
}
.u-inline-flex {
  display: inline-flex;
}
...

Gain the full
benefit of Sass

Take full advantage and enjoy every bit of Sass. Out of the box, Uniform provides apply extrapolation, helper theme functions, and Sass mixins to help you be even more productive.

See how it works → 
// 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;
  }
}
// main.scss

.parent {
  padding: size(24, 32); // 1.5rem 2.5rem;
  background: fill(red-400, .4);
  border-radius: radius(lg);

  .child {
    font-family: font(sans);
    font-size: font(lg);
    font-weight: font(semibold);
    line-height: leading(looser);
  }
}
/* main.css */

.parent {
  padding: 1.5rem 2rem;
  background: rgba(var(--red-400), 0.4);
  border-radius: var(--radius-lg);
}

.parent .child {
  font-family: var(--font-sans);
  font-size: var(--font-lg);
  font-weight: var(--semibold);
  line-height: var(--leading-looser);
}
// main.scss

.element {
  font-size: rem(11);
  
  @include screen(sm) {
    font-size: rem(13);
  }
  @include screen(lg) {
    font-size: rem(15);
  }
}
/* main.css */

.element {
  font-size: 0.687rem;
}

@media (min-width: 768px) {
  .element {
    font-size: 0.812rem;
  }
}
@media (min-width: 1280px) {
  .element {
    font-size: 0.937rem;
  }
}
// main.scss

@use "uniform" as * with (
  $config: (
    output: 'json'
  )
);
{
  "text-decoration": {
    "important": "false",
    "extra-selector": "",
    "responsive": "false",
    "pseudos": "hover, group-hover, focus",
    "classes": {
      "underline": {
        "text-decoration": "underline"
      },
      "line-through": {
        "text-decoration": "line-through"
      },
      "no-underline": {
        "text-decoration": "none"
      }
    }
  }
},
...

Flexible colors
for every need

No need to spend hours configuring colors. Start building your dream UI with a wide range of colors with flexible tints, shades, and opacities.

See how colors work →
P
Pigi Money
ionicons-v5-a
ionicons-v5-f Search ionicons-v5-i Inbox ionicons-v5-p My issues
Favourites
Bug
Improvement
Backlog
Your teams
#
Engineering
#
Product
#
Design
Active issues 12 + Filter
PGM-12
Welcome to Pigi Money
PGM-13
Fix header menu bar alignment
PGM-14
Bring policies forward
PGM-15
Update front-end dependencies
PGM-16
Support latest dart sass module system
PGM-17
Configure UniformCSS variables
PGM-18
Delete old cached users
PGM-19
Fix dropdown bug

Built-in buttery
smooth animations

Animations are great for providing extra context for your users. Apply bounce, ping, pulse, and spin animations to any element or even add your own.

Learn about keyframes → 
<div class="animate-ping ..."></div>
ionicons-v5-a
2 New messages
Received 2 minutes ago

Customize with
or without Sass

Take advantage of the full Sass customizability or simply apply CSS variable overrides. Getting started with Uniform CSS is fast and easy.

Learn how to configure →
  • ✓
    Customize theme directly in Sass
  • ✓
    CSS variable override support
ionicons-v5_logos

Customize your theme directly in Sass 

@use "uniform" as * with (
  $config: (    
    colors: ( 
      navbar: #3a37d3,
      footer: #5a6072,
      seagreen: #188657,
    ),
    shadows: (
      card: 0 4px 60px 0 rgba(90, 134, 234, 0.2)
    )
  )
);
css

Or customize theme by defining CSS variables 

:root {
  --font-sans: sans-serif;
  --font-mono: menlo;
  
  --semibold: 600;
  --bold: 700;
  --extrabold: 800;
}
Coming soon

Extendable
with plugins

Add extra functionality to your project with first-party plugin support.

Coming soon
  • ✓
    Customizable settings support
  • ✓
    Works out of the box
ionicons-v5_logos

Load plugins directly in Sass 

@use "uniform" as *;
@use "uniform/plugins/wrapper";
@use "uniform/plugins/markdown";
@use "uniform/plugins/ratio";
@use "uniform/plugins/animate";
@use "uniform/plugins/ring";
html

Get access to all external utilities 

<main class="wrapper markdown">

  <h1 class="fade-in-from-top" style="--animate-delay: 0s;">
    Typewriter delectus cred
  </h1>

  <p class="fade-in-from-top" style="--animate-delay: 0.2s;">
    Cosby sweater plaid shabby chic kitsch pour-over ex. 
    Meggings kogi vinyl meh, food truck banh mi Etsy.
  </p>

  <button class="ring">Focus me</button>

</main>