Built entirely in

Roll your own flexible utility
class generator built for Sass

Fully customizable utility generator and CSS framework to help you gain the full power of both utility-first and Sass.

npm install uniformcss

Used and by

Learn how to actually measure and build AI skills and transform fakery into finesse ads via Carbon

@use "uniform" as * with (
  $config: (    
    delimiter: '-',
    important: true,
    colors: (
      btn: #0054CB,
      btn-hover: #0046A8
    ),
    utilities: (
      display: (
        shorthand: null,
        responsive: true
        variants: (
          block: block,
          flex: flex
        )
      )
    )
  )
);

.btn {
  @include apply('inline-flex align-items-center justify-content-center h-40 px-14 radius-md color-white semibold bg-btn-600 hover.bg-btn-hover focus.shadow-focus transition-100');
  &__fluid {
    @include apply('w-100p')
  }
}

text-left { 
  text-align: left !important; 
}
.text-center { 
  text-align: center !important; 
}
.text-right { 
  text-align: right !important; 
}
.block {
  display: block !important;
}
.flex {
  display: flex !important;
}
.inline {
  display: inline !important;
}
.inline-block {
  display: inline-block !important;
}
.inline-flex {
  display: inline-flex !important;
}
...

<div class="w-100p bg-black radius-2xl p-24 pt-32">
  <h1 class="text-lg text-center extrabold tracking-tight color-white mb-6">
    Sign in to Uniform
  </h1>
  <p class="text-sm text-center color-white color-opacity-60 mb-28">
    Enter your email and password
  </p>
  <div class="relative mb-14">
    <div class="absolute top-0 left-0 flex align-items-center justify-content-center w-40 h-40 color-white color-opacity-40">
      <ion-icon name="mail" class="w-18 h-18"></ion-icon>
    </div>
    <input type="email" class="h-40 px-16 pl-40 text-sm radius-xs bg-white bg-opacity-10 focus.bg-opacity-15 color-white" placeholder="Email" required>
  </div>
  <div class="relative mb-14">
    <div class="absolute top-0 left-0 flex align-items-center justify-content-center w-40 h-40 color-white color-opacity-40">
      <ion-icon name="lock-closed" class="w-18 h-18"></ion-icon>
    </div>
    <input type="password" class="h-40 px-16 pl-40 text-sm radius-xs bg-white bg-opacity-10 focus.bg-opacity-15 color-white" placeholder="Password" required>
  </div>
  <div class="mb-28">
    <label class="inline-flex align-items-center font-sm color-white">
      <input class="text-lg radius-xs bg-white bg-opacity-20 color-teal-600 transition-200 border-1 mr-8 " type="checkbox" checked/> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-fluid">Sign in</button> 
</div>

Sassy workflow

Drop-in and configure
everything 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.

Fully configurable utility settings
Easily themeable
Extend and override variants

Complete control over how
how utility classes look

Attach prefixes, change shorthands, remove delimiters, enable responsiveness, override variants. Control every aspect of how utilities are generated. How to customize

INPUT

@use "uniform" as * with (
  $config: (    
    utilities: (
      margin-top: (
        // `shorthand` is the keyword used to represent the CSS property e.g. `mt-1`, `mt-2`
        shorthand: mt
      ),
      margin-right: (
        // e.g. `marginRight-1`, `marginRight-2`
        shorthand: marginRight
      )
    ),

    // Exclude all CSS properties in the output.
    excludes: (
      all
    ),
    // Only include `margin-top` and `margin-right CSS properties in the output.
    includes: (
      margin-top, 
      margin-right
    )
  )
);

OUTPUT

.mt-1 {
  margin-top: 0.0625rem;
}

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

.mt-4 {
  margin-top: 0.25rem;
}

.marginRight-1 {
  margin-right: 0.0625rem;
}

.marginRight-2 {
  margin-right: 0.125rem;
}

.marginRight-4 {
  margin-right: 0.25rem;
}

...

INPUT

@use "uniform" as * with (
  $config: (   
    // Append `!important` to the end each CSS property. 
    important: true,

    // Exclude all CSS properties in the output.
    excludes: (
      all
    ),

    // Only include `margin` in the output.
    includes: (
      margin
    )
  )
);

OUTPUT

.m-1 {
  margin: 0.0625rem !important;
}

.m-2 {
  margin: 0.125rem !important;
}

.m-4 {
  margin: 0.25rem !important;
}

.m-6 {
  margin: 0.375rem !important;
}

.m-8 {
  margin: 0.5rem !important;
}

.m-10 {
  margin: 0.625rem !important;
}

...

INPUT

@use "uniform" as * with (
  $config: (
    // Customize the delimiter used to separate keyword and variant.
    delimiter: '--',
    pseudo-delimiter: '__',
    screen-delimiter: '.',

    // Exclude all CSS properties in the output.
    excludes: (
      all
    ),

    // Only include `opacity` in the output.
    includes: (
      opacity
    )
  )
);

OUTPUT

.opacity--100 {
  opacity: 1;
}

.hover__opacity--100:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .sm\.opacity--100 {
    opacity: 1;
  }

  .sm\.hover__opacity--100:hover {
    opacity: 1;
  }
}

INPUT

@use "uniform" as * with (
  $config: (
    // Append a prefix to each utility.
    prefix: 'u-',

    // Exclude all CSS properties in the output.
    excludes: (
      all
    ),

    // Only include `display` in the output.
    includes: (
      display
    )
  )
);

OUTPUT

.opacity-0, .focus\.opacity-0:focus, .group:hover .group-hover\.opacity-0, .hover\.opacity-0:hover {
  opacity: 0;
}

.opacity-2, .focus\.opacity-2:focus, .group:hover .group-hover\.opacity-2, .hover\.opacity-2:hover {
  opacity: 0.02;
}

.opacity-4, .focus\.opacity-4:focus, .group:hover .group-hover\.opacity-4, .hover\.opacity-4:hover {
  opacity: 0.04;
}

.opacity-6, .focus\.opacity-6:focus, .group:hover .group-hover\.opacity-6, .hover\.opacity-6:hover {
  opacity: 0.06;
}

.opacity-8, .focus\.opacity-8:focus, .group:hover .group-hover\.opacity-8, .hover\.opacity-8:hover {
  opacity: 0.08;
}

.opacity-15, .focus\.opacity-15:focus, .group:hover .group-hover\.opacity-15, .hover\.opacity-15:hover {
  opacity: 0.15;
}

...

INPUT

@use "uniform" as * with (
  $config: (
    // Append a prefix to each utility.
    prefix: 'u-',

    // Exclude all CSS properties in the output.
    excludes: (
      all
    ),

    // Only include `display` in the output.
    includes: (
      display
    )
  )
);

OUTPUT

.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;
}

...

Advanced features to help
supercharge your Sass project

Enjoy every bit of Sass. Uniform provides apply extrapolation, helper theme functions, and Sass mixins to help you be even more productive. See how it works

INPUT

@use "uniform" as *;

.block {
  @include apply('overflow-hidden radius-sm');

  &__element {
    @include apply('flex align-items-center h-40 px-12 shadow-2xs radius-sm p-24 md.p-64');

    &--modifier {
      @include apply('w-100p radius-none')
    }
  }
}

OUTPUT

.block {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.block__element {
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-shadow: var(--shadow-2xs);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
}

@media (min-width: 1024px) {
  .block__element {
    padding: 4rem;
  }
}

.block__element--modifier {
  width: 100%;
  border-radius: 0;
}

INPUT

@use "uniform" as *;

.block {
  padding: size(24, 32);
  background: fill(red-400, .4);
  border-radius: radius(lg);
  box-shadow: shadow(sm);

  &__element {
    border-radius: radius(lg);
    box-shadow: shadow(sm);
    font-family: font(sans);
    font-size: font(lg);
    font-weight: font(semibold);
    line-height: leading(looser);

    &--modifier {
      letter-spacing: tracking(loose);
    }
  }
}

OUTPUT

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

.block__element {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-looser);
}

.block__element--modifier {
  letter-spacing: var(--tracking-loose);
}

INPUT

@use "uniform" as *;

.block {
  font-size: rem(11);
  
  &--modifier {
    @include screen(sm) {
      font-size: rem(13);
    }
  }

  @each $breakpoint, $breakpoint-value in screens() {
    // for each breakpoint, do the following
    @include screen($breakpoint) {
      &__element-#{$breakpoint} {
        font-size: rem(16);
      }
    }
  }
}

OUTPUT

.block {
  font-size: 0.6875rem;
}
@media (min-width: 768px) {
  .block--modifier {
    font-size: 0.8125rem;
  }
}
@media (min-width: 768px) {
  .block__element-sm {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .block__element-md {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1280px) {
  .block__element-lg {
    font-size: 0.9375rem;
  }
}

INPUT

@use "uniform" as * with (
  $config: (
    output: 'headless'
  )
);

.block {
  @include apply('overflow-hidden radius-sm');

  &__element {
    @include apply('flex align-items-center h-40 px-12 shadow-2xs radius-sm p-24 md.p-64');

    &--modifier {
      @include apply('w-100p radius-none')
    }
  }
}

OUTPUT

.block {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.block__element {
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-shadow: var(--shadow-2xs);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
}

@media (min-width: 1024px) {
  .block__element {
    padding: 4rem;
  }
}

.block__element--modifier {
  width: 100%;
  border-radius: 0;
}

INPUT

@use "uniform" as * with (
  $config: (
    output: 'json',

    excludes: (
      all
    ),

    includes: (
      align-content
    )
  )
);

OUTPUT

{
  "align-content": {
    "important": "false",
    "extra-selector": "",
    "responsive": "true",
    "pseudos": "none",
    "classes": {
      "align-content-center": {
        "align-content": "center"
      },
      "align-content-start": {
        "align-content": "flex-start"
      },
      "align-content-end": {
        "align-content": "flex-end"
      },
      "align-content-between": {
        "align-content": "space-between"
      },
      "align-content-around": {
        "align-content": "space-around"
      },
      "align-content-evenly": {
        "align-content": "space-evenly"
      }
    }
  }
}

Get Started

Fundamentals

Customizations

Theming

Special Utilities

Roll your own flexible utility
class generator built for Sass

Sign in to Uniform

Drop-in and configure
everything in Sass

Drop-in and configure
everything in Sass

Blazingly fast front-end
workflow without the hassle

Sign in to Uniform

Master UI Design

Recent searches

Liked by 10 of your friends

Sam Lilo
3 minutes ago

Master UI Design

Sam Lilo
3 minutes ago

Complete control over how
how utility classes look

Advanced features to help
supercharge your Sass project

Roll your own flexible utility class
generator built for Sass projects

“It's been a fantastic tool to help with automating the generation of a custom set of utility classes that we need.”

Get Started

Fundamentals

Customizations

Theming

Special Utilities

Roll your own flexible utility class generator built for Sass

Sign in to Uniform

Drop-in and configure everything in Sass

Drop-in and configure everything in Sass

Blazingly fast front-end workflow without the hassle

Sign in to Uniform

Master UI Design

Recent searches

Liked by 10 of your friends

Sam Lilo 3 minutes ago

Master UI Design

Sam Lilo 3 minutes ago

Complete control over how how utility classes look

Advanced features to help supercharge your Sass project

Roll your own flexible utility class generator built for Sass projects

“It's been a fantastic tool to help with automating the generation of a custom set of utility classes that we need.”

Roll your own flexible utility
class generator built for Sass

Drop-in and configure
everything in Sass

Drop-in and configure
everything in Sass

Blazingly fast front-end
workflow without the hassle

Sam Lilo
3 minutes ago

Sam Lilo
3 minutes ago

Complete control over how
how utility classes look

Advanced features to help
supercharge your Sass project

Roll your own flexible utility class
generator built for Sass projects