Uniform-ui NPM

Installation

Manual

Download compiled CSS and JS: http://uniform-ui.com/uniform.zip

Link to css and js in html document:

<link rel="stylesheet" href="/uniform.css" type="text/css" media="screen" charset="utf-8">
<script src="/uniform.js"></script>

Ruby

Add this line to your application's Gemfile:

gem 'uniform-ui'

Add Uniform assets 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

import {Dropdown} as Uniform from 'uniform';

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

Media Query Combiner

The breakpoint utilities can bloat the library by 30ish%. Use a media query combiner to condense the mean media queries into batches.

For Rails Sprockets: https://github.com/aaronjensen/sass-media_query_combiner

For Rails Condenser: https://github.com/malomalo/condenser

env.register_postprocessor('text/css', ::Condenser::CSSMediaCombinerProcessor)

Usage

Checkout the documentation

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

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: (">": ">")
)

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")
)

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"
    )
)

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	–