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 | – |

Browser Support

| IE / Edge | Firefox | Chrome | Safari| | --------- | --------- | --------- | --------- | | IE11, Edge| 52+| 59+| 9+|

Development

Docs are generated using Middleman

To run server

middleman server

To package:

middleman build