Skip to content

bemky/uniform

Repository files navigation

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 } 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
graygray-10gray-20gray-30gray-40gray-50gray-60gray-70gray-80gray-90
greengreen-10green-20green-30green-40green-50green-60green-70green-80green-90
blueblue-10blue-20blue-30blue-40blue-50blue-60blue-70blue-80blue-90
redred-10red-20red-30red-40red-50red-60red-70red-80red-90
yellowyellow-10yellow-20yellow-30yellow-40yellow-50yellow-60yellow-70yellow-80yellow-90
purplepurple-10purple-20purple-30purple-40purple-50purple-60purple-70purple-80purple-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