Sass components and utilities for building a UI.

Download GitHub

Installation

Ruby

Add to your Gemfile

gem 'uniform-ui'

Add to asset paths (example for Condenser)

condenser.path = Dir.each_child(UniformUi::ASSET_PATH).map { |a| File.join(UniformUi::ASSET_PATH, a) }

NPM

npm install uniform-ui

Importing

/* CSS */
@import 'uniform';
// Javascript
import { Dropdown } from 'uniform';

new Dropdown({
    el: $('.example')
})

Configuration

Define configuration by setting keys of $uniform_configs prior to @import 'uniform'; $uniform_configs is deep merged with defaults giving $uniform_configs priority. To remove default keys give them value of false.

Example

$uniform_configs: (
    sizes: (
        padding: (
            "8x": "8rem"
        )
    ),
    colors: (),
    pseudo_classes: (
        "hover": hover,
    ),
    combinators: (
        ">": ">"
    ),
    breakpoints: (
        include_containers: true,
    )
)
@import 'uniform';

Sizes

Size modifiers give a type of utility a size by postfixing to the type with a - (ex. margin-bottom-2x). Sizes are defined per type.

Extending $uniform_configs.sizes

key defaults description
border none, 2px, 3px, 4px border-width
divide none, 2px, 3px, 4px border-between objects
rounded none, xs, sm, lg, xl border-radius
margin none, 1/4x, 1/2x, 3/4x, xs, sm, lg, xl, 2x space around object
gap none, xs, sm, lg, xl gap in grid
space none, xs, sm, lg, xl, 2x, 4x space between objects
pad none, 1/4x, 1/2x, 3/4x, xs, sm, lg, xl, 2x padding of an object
text xs, sm, lg, xl, 2x, 4x, 8x font-size of text
stroke sm, md, lg, 2x, 3x stroke of svg

Colors

Color modifiers build out an entire spectrum of utility classes related to color.

Extending $uniform_configs.colors

You can configure a color to a color (hex, hsl, rgb...), false, or a hash (options below). Setting to a color ignores options for the color (mainly spectrum option). Setting to false removes the color (this is helpful to remove a uniform default color).

Defaults

10 20 30 40 50 60 70 80 90
gray gray-10 gray-20 gray-30 gray-40 gray-50 gray-60 gray-70 gray-80 gray-90
green green-10 green-20 green-30 green-40 green-50 green-60 green-70 green-80 green-90
blue blue-10 blue-20 blue-30 blue-40 blue-50 blue-60 blue-70 blue-80 blue-90
red red-10 red-20 red-30 red-40 red-50 red-60 red-70 red-80 red-90
yellow yellow-10 yellow-20 yellow-30 yellow-40 yellow-50 yellow-60 yellow-70 yellow-80 yellow-90
purple purple-10 purple-20 purple-30 purple-40 purple-50 purple-60 purple-70 purple-80 purple-90

Options for $uniform_configs.colors.[color]

key type description default
spectrum Boolean expand the given color to a spectrum of lightness (10) to darkness (90) (ex. text-red-30) false
color Hex, HSL, RGB color value of key –
[key] Hex, HSL, RGB any extra key given will create an additional color with the given key as postfix modifier of the key (ex. red: (light: #E1563E) will produce .text-red-light{color: #E1563E}) –

Combinators

Combinator modifiers give most utility classes the ability to apply a utility to the combinator by postfixing the combinator with [utility]-[combinator] (ex. margin-bottom->)

Example

$uniform_configs: (
    combinators: (">": ">")
)
@import 'uniform';
Generates 
.margin-bottom-> > * {
    margin-bottom: 1em;
}

Pseudo Classes

Pseudo class modifiers give most utility classes the ability to scope to the given pseudo class by prefixing a utility with [pseudo class]:[utility]. (ex hover:text-red).

Example

$uniform_configs: (
    pseudo_classes: (hover: "hover")
)
@import 'uniform';
Generates 
.hover:text-red {
    color: #E1563E;
}

Group Hover

There is one predefined pseudo class for group-hover. If the key group-hover is set then the following will be generated:

.group:hover {
    .group-hover:bg-blue {
        background: #0994E2
    }
}

Breakpoints

Breakpoint modifiers give most utility classes the ability to be responsive by prefixing a utlity with [breakpoint]:[utility] (ex. md:margin-top), so that that utility is only applied in the given media query.

Example

$uniform_configs: (
    breaking_points: (
        include_containers: true,
        mobile: "max-width: 719px"
    )
)
@import 'uniform';
Generates 
@media only screen and (min-width: 720px){
    .mobile:margin-top {
        margin-top: 1em;
    }
}
.mobile-container .margin-top {
    margin-top: 1em;
}

Options for $uniform_configs.breakpoints

key type description default
include_containers Boolean toggle including containers for breakpoints like .md-container > md:margin-top false
[key] media query any key given will create a breakpoint with given key as utility name and value as the media query –

Contributors

bemky

Bug Reporting

Please report bugs in GitHub Issues

Licensing

Uniform is released under the MIT License