Introducing Uniform
Uniform CSS is a fully configurable utility generator and CSS framework built entirely in Sass. This means you get the power of a utility-first workflow without losing the productiveness of Sass. You can get started via the CDN or as a Sass dependency.
How Uniform is different
Here are some top reasons why Uniform CSS could be a great fit for you.
1. It's written entirely in Sass
Millions of projects are powered by Sass, Uniform does not take away any benefits of using Sass. Add Uniform directly into your Sass project with just one line of code.
// add this to your main styles.scss
@use "uniform" as *;2. It's dead-easy to configure
Remove and extend colors? Check. Replace breakpoints? Check. Alias property names, add prefixes, modify syntax — you name it! Uniform is configurable to the last detail.
// main.scss
@use "uniform" as * with (
$config: (
important: true,
prefix: myProject,
delimiter: '-',
colors: (
custom-color-1: red,
custom-color-2: blue
),
...
)
);/* main.css */
.myProject-bg-custom-color-1 { background-color: red !important; }
.myProject-bg-custom-color-2 { background-color: blue !important; }
...3. Built with CSS Variables in mind
Prefer not to worry about preprocessors and just start building your site? Just add the pre-packaged CDN version and customize the theme simply by overriding CSS variables. It's that easy.
<!-- index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/ThinkUniform/uniformcss/css/uniform.min.css" />/* main.css */
:root {
--font-sans: 'my-font', sans-serif;
--bold: 700;
}4. You can add your own properties
While shiny new CSS specs become standardized, you don’t have to wait for Uniform. Add your own properties directly in your Sass configuration.
// main.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
)
)
)
)
);/* main.css */
.leading-trim { leading-trim: both; }
.text-cap { text-edge: cap alphabetic; }5. Built-in helper functions to access theme values
Prefer to write components the old fashioned way? You have all benefits of Sass while still having access to theme variables using helper functions.
// main.scss
.custom-element {
padding: size(20, 24);
font-weight: font(bold);
background-color: fill(primary-600);
}/* 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.
// 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;
}
}7. Exclude or include only the properties you need
No need to be a utility maximalist, easily remove and include only the properties you need, as you need them.
// main.scss
@use "uniform" as * with (
$config: (
excludes: (
all // exclude all
),
includes: (
background-color,
margin,
padding,
// only include these utility properties
)
)
);8. Designed to be Lightweight
Lightweight in size but is packed with all the utility goodness. Uniform achieves this by ensuring each property is compiled with a careful selection of default pseudo and responsive variants.
Benefits of utility-first
The utility-first approach is a CSS methodology that optimizes for CSS maintainability by defining highly reusable and immutable low-level classes that only serve one purpose. Many other different methodologies exist, however, this style of writing CSS is particularly well optimized to support application-based UI and rapid prototyping workflows due to its versatility and low-level design.
1. Simple to reuse and transfer
Since all utility properties are written in a pre-defined API-like manner, multiple projects can all share the same CSS library regardless of complexity. Not only does this make it incredibly easy to make incremental changes but transferring resources and assets between projects is fast, reusable, and frictionless. Just copy any component markup and paste it into any location of your choosing.
2. Easier to scale and maintain
Since all utility classes are pre-defined and predictable, you rarely have to worry about CSS bloat. Simply remove large amounts of the HTML without ever worrying about cleaning up its style footprint.
3. Quicker to onboard new develoeprs
Utility classes expose a well-defined set of styling APIs you can reference on an as needed basis. This makes it incredibly quick and easy for new developers to learn and synchronize themself with your project since all they are required to do is learn the API instead of the entire system.
4. Helps to avoid premature abstraction
In a more traditional setting, developers are required to specify a semantic name for every block, element, or modifier. This requirement adds extra cognitive load and can also lead to premature extrapolation of patterns and components.
With a utility-first approach, higher-level abstraction is encouraged but only when it makes sense or design patterns emerge. This helps to avoid premature extrapolation during the iterative phase of a component's lifecycle.
Browser Support
Uniform CSS looks and performs great on all the latest version 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.