Introduction

omnicell is a utility React component that wraps the functionality of CSS Grid Layout. It's purpose is to enhance the process of rapid prototyping a layout. Besides implementing features from CSS Grid, it also provides a few utilities to help with some of the most common tasks when applying styles to DOM elements.

• CSS Grid: Quick Guide
• CSS Grid: Can I use?

Demo

To take a quick glance at how this library can be used, check out this codesandbox. You can change the width of the preview to inspect the responsive behavior.

Quick start

Each Cell is a grid (display: grid). You can nest as many as you like.

import React from "react";
import { Cell } from "omnicell";

class Example extends React.Component {
    render() {
        return (
            <Cell gap={"15px"} columns={"1fr auto 1fr"} debug>
                <Cell placeSelf={"center"} debug>Header</Cell>
                <Cell debug rows={"1fr 1fr 1fr"}>
                    <Cell debug>Item 1</Cell>
                    <Cell debug>Item 2</Cell>
                    <Cell debug responsiveVisibility={{bounds: [0, 900]}}>Item 3</Cell>
                </Cell>
                <Cell placeSelf={"center"}debug>Footer</Cell>
            </Cell>
        );
    }
}

Each cell has omnicell as a default class. This means you can easily add some global styles like this:

.omnicell {
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;
    grid-auto-flow: row;
}

The best way to get started is by just experimenting a bit with the props described in the following sections.

Props: CSS Grid Layout

columns: string

Defines the columns of the grid with a space-separated list of values by applying the style property grid-template-columns.

<Cell columns={"40px 1fr 1fr auto"}/>

rows: string

Defines the rows of the grid with a space-separated list of values by applying the style property grid-template-rows.

<Cell rows={"20px 1fr 1fr"}/>

gap: string

Specifies the size of the grid lines by applying the style property grid-gap.

<Cell gap={"15px"}/>

area: string

Defines the area an item should span by applying the style property grid-area.

<Cell area={"1 / 2 / 3 / 3"}/>

autoFlow: "column" | "row"

Defines the direction of the auto-placement alogrithm, by applying the style property grid-auto-flow.

<Cell autoFlow={"column"}/>

placeSelf: "start" | "end" | "center" | "stretch"

Sets both the align-self and justify-self properties in a single declaration.

<Cell placeSelf={"start center"}/>
<Cell placeSelf={"center"}/>

placeItems: "start" | "end" | "center" | "stretch"

Sets both the align-items and justify-items properties in a single declaration.

<Cell placeItems={"start center"}/>
<Cell placeItems={"end"}/>

placeContent: "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly"

Sets both the align-content and justify-content properties in a single declaration.

<Cell placeContent={"start space-between"}/>
<Cell placeContent={"center"}/>

Props: Responsive Layouts

responsiveVisibility: {bounds: [number, number]}

If this prop is provided, the DOM element will only be visible if the viewport is within the defined bounds.

<Cell resposiveVisibility={{ bounds: [0, 900] }}/>
<Cell resposiveVisibility={{ bounds: [900, Infinity] }}/>

responsiveColumns: {bounds: [number, number], value: string}

If this prop is provided, the style property of grid-template-columns will be overwritten if the viewport is within the defined bounds.

<Cell responsiveColumns={{ bounds: [1280, Infinity], value: "1fr 1fr" }}/>

responsiveRows: {bounds: [number, number], value: string}

If this prop is provided, the style property of grid-template-rows will be overwritten if the viewport is within the defined bounds.

<Cell responsiveRows={{ bounds: [1280, Infinity], value: "1fr 1fr" }}/>

responsiveGap: {bounds: [number, number], value: string}

If this prop is provided, the style property of grid-gap will be overwritten if the viewport is within the defined bounds.

<Cell responsiveGap={{ bounds: [1280, Infinity], value: "15px" }}/>

responsiveArea: {bounds: [number, number], value: string}

If this prop is provided, the style property of grid-area will be overwritten if the viewport is within the defined bounds.

<Cell responsiveArea={{ bounds: [1280, Infinity], value: "1 / 2 / 3 / 3" }}/>

Props: Utility

classes: string

Class names that will be passed to the DOM elements class attribute.

<Cell classes={"class-name class-name"}/>

styles: object

Styles that will be passed to the DOM elements style attribute.

<Cell styles={{ fontSize: 14; fontWeight: 600 }}/>

id: string

ID that will be passed to the DOM elements id attribute.

<Cell id={"div-id"}/>

reactRef: RefObject<HTMLDivElement>

React reference that will be passed as the elements ref attribute.

<Cell ref={"react-ref"}/>

debug: boolean

Enables debugging mode for this element, setting a random value for the background-color style property.

<Cell debug/>

onClick: (e?) => void

Passes a function for the common mouse- and click-events.

Supported functions: onClick onMouseDown onMouseUp onMouseOver onFocus onBlur

<Cell onHover={() => console.log("I was hovered.")}/>

Bonus components

In addition to the Cell component, there exist two more components: Image and Text, which implement all the properties from Cell but also include a few of their own.

import { Image } from "omnicell";

<Image size={24} src={"https://icons.com/icon.png"}/>

import { Text } from "omnicell";

<Text weight={600} size={18} opacity={0.5} font={"'Spectral', serif"}>Text</Text>
<Text size={16} link={"https://google.com"} blank>Link</Text>

They also have their own base CSS classes omniimage and omnitext.