uniform-ui

A rails gem of sass components and utilities for building a UI.
Demo and Documentation

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

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

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