New Version 0.9.0 released

Supercharged utility-first
CSS framework built on Sass

Play on Codepen
Configure Uniform directly in Sass.
styles.scss
@use "uniform" as * with (
$config: (
important: true,
utility: (
leading-trim: (
shorthand: trim,
properties: (leading-trim),
variants: (
both: both
)
)
)
)
);
css
Quickly generate utilities properties.
styles.css
.trim-both { 
leading-trim: both !important;
}

.align-left {
text-align: left !important;
}

.align-center {
text-align: center !important;
}

.align-right {
text-align: right !important;
}

Step 1. Install the Package

Install the Uniform node package or clone the project and install its dependencies.

npm i uniformcss

Step 2. Include Uniform

Uniform CSS can be added directly into any Sass project with one line of code.

@use "uniform" as *;

Step 3. Compose your UI

Style components by writing composable utility properties directly in your HTML.

px-24 py-20 border-b-1 ...
Rapid Prototyping

Build web components without ever touching your CSS

Recent Messages

Diane Schaefer
5 mins ago • Public

Hi, I am a graphic designer and I am looking for someone who would like to work on a project together.

Preview
<article class="w-100p max-w-512 radius-md bg-white shadow-md">
<header class="px-24 py-20 border-b-1 border-black border-opacity-10">
<h4 class="text-lg bold">Recent Messages</h4>
</header>
<div class="p-24">
<div class="flex align-items-center mb-20">
<img src="/assets/img/diane-profile.png" class="w-48 h-48 radius-full mr-20">
<div>
<h5 class="text-md bold">Diane Schaefer</h5>
<span class="text-sm">5 mins ago &bull; Public</span>
</div>
</div>
<div class="text-md bg-cool-gray bg-tint-800 radius-sm mb-20 p-20">
<p class="color-black">Hi, I am a graphic designer and I am looking for someone who would like to work on a project together.</p>
</div>
<div class="flex text-md">
<a class="flex align-items-center mr-28 semibold color-black">
<svg class="fill-current w-20 color-red color-tint-300 mr-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> <span class="hidden sm.inline">132 Likes</span>
</a>
<a class="flex align-items-center mr-28 semibold color-black">
<svg class="stroke-current w-20 mr-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> <span class="hidden sm.inline">36 Comments</span>
</a>
<a class="flex align-items-center mr-28 semibold color-black">
<svg class="stroke-current w-20 mr-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg> <span class="hidden sm.inline">Share</span>
</a>
</div>
</div>
</article>
HTML

Wide Property Support

All common CSS properties are supported out of the box. You can even add your own custom properties directly in Sass.

HSL Color Models

Select from a wide range of colors, tints, and shades. Easily tweak the hue and saturation of each color to match any design.

Common Pixel Sizing

Build pixel perfect components without any compromise. Uniform supports a wide range of common spacing and sizing values.

Men's Shoe

Nike Air Max

$160
Size
US UK EU

Purchased by 11 of your friends

+5
My Progress 1 out of 2
An outline of your course progress.
Level 3 Algebra 33% Complete
Level 3 Calculus 50% Complete
Level 3 Physics 58% Complete
Colorfinity

Flexible colors with composable manipulations

Instant Color Sync

Take advantage of HSL based colors to instantaneously configure Uniform to match your design with simple to tweak color tokens.

/* styles.css */
:root {
--red-hue: 12;
--red-sat: 60%%;

--orange-hue: 30;
--orange-sat: 75%;

--blue-hue: 200;
--blue-sat: 20%;
}

Composable Color Manipulation

Apply composable manipulation to any color. Increase or decrease saturation, lighten, and darken colors directly in your html.

<div class="bg-blue bg-shade-400">
...
</div>

<div class="border-1 border-gray border-opacity-50 hover.border-opacity-100">
...
</div>

<p class="color-yellow color-tint-300">
...
</p>

Inline Gradient Support

Uniform comes with built-in inline gradient support. Just override CSS custom properties to apply start and end colors.

<div class="bg-linear" style="--gradient: to right, #ffbebe, #4eff9d;">
...
</div>

<div class="bg-linear" style="--gradient: to right, #c39eff, #85eeff;">
...
</div>

<div class="bg-linear" style="--gradient: to right, #d2d2d2, #ff7ee3;">
...
</div>
Animations

Buttery smooth animations for rich user experiences

2 New messages
Received 2 minutes ago

Built-in Animations

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

Extendable Keyframes

Uniform is designed to be fully extendable. Add your own keyframe animations through the configuration directly in your Sass project.

Customizable and Extendable

Adding custom animations is easy. Add custom animations to your project by including keyframe settings in your configuration.

Themeable

Theming is easy as spinning a dial

Hue
Saturation

CSS design tokens

Quickly utilize CSS variable hooks to activate theme variables directly in your CSS.

Infinite theme support

Uniform makes it easily to create, manage, conditionally apply any number of custom themes.

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
$450 /mo 10% discount

Elizabeth Street Apartments

Riccarton, Christchurch
32 sqm
2 rooms
1 kitchen
Dark Mode Support

Apply Dark Mode on any element

<div class="bg-white dark.bg-blue dark.bg-shade-900 transition-200 ...">

Dark mode everything

Apply conditional dark mode specific coloring to any element with the dark pseudo.

Completely optional

Dark mode is completely optional and can be disabled with ease in your config.

CDN Ready

Blazing fast delivery with customizable design tokens

1s

build time
using
dart sass

48kb

using brotli
for lightning
fast delivery

300+

configurable
design
tokens

Step 1. Install the Package

Add the following code to the head of your project.

https://cdn.jsdelivr.net/npm/uniformcss@1.0.0/uniform.css

Step 2. Install the Package

Customize design tokens directly in your CSS to fit your design.

:root {
--blue-hue: 50;
--blue-sat: 20%;

--text-sans: "manrope";
--regular: 400;
--semibold: 600;

--btn-radius: 6px;
}