z-grid

A 12-column grid system for your web application. The package is intended to be used in a web page.

Table of contents

• z-grid
• Table of contents
• Install
  • Import as HTML/CSS component
  • Import as Stateless Functional Component (SFC)
• How to use
  • CSS component
  • Stateless Functional Component
• License

Install

The package is available to download through npm:

npm install z-grid --save

Import as HTML/CSS component

The simple case

The package will be located inside the node_modules folder, you can import it into the HTML document as follows:

<link rel="stylesheet" href="node_modules/z-grid/dist/style.module.css">

When bundling an web app

For bundlers that support CSS, like Webpack, you can use it like this:

require('z-grid/dist/style.module.css');

Import as a Stateless Functional Component (SFC)

The package does not include the renderer, you can use any renderer that supports SFCs. You could use React, Preact, Inferno, etc.

Notice: This package contains CSS styling, you may need a bundler that's capable of requiring CSS files like Webpack with css-loader.

Once you have chosen the renderer you can include the package in your project as follows:

// Assuming the React renderer is being used
const React = require('react');
const render = require('react-dom').render;

// Passing the render function when importing
const ZGrid = require('z-grid').ZGrid(React.createElement);
const ZColumn = require('z-grid').ZColumn(React.createElement);

// Render it on page, using JSX here :)
render(<ZGrid><ZColumn>Hello!</ZColumn></ZGrid>, document.body);

How to use

CSS component

Just add the HTML structure and CSS classes to reproduce the UI component.

Class hierarchy

| Recommended HTML tags | Parent | Class | Description | Type | | --------------------------------------------- | --------- | ------------------------- | --------------------------------------------------------------------------------------- | -------- | | div, section, main, article, nav | root | .z-grid | Root container | Block | | Any containing z.grid | root | .z-grid--vertical | Makes the grid vertical instead of horizontal | Modifier | | Any containing z.grid | root | .z-grid--reverse | Reverses the grid start direction, starts it on the right for LTR and left for RTL | Modifier | | Any containing z.grid | root | .z-grid--center | Centers the grid horizontally within the outer element | Modifier | | Any containing z.grid | root | .z-grid--cross-center | Centers the grid vertically within the parent element | Modifier | | Any containing z.grid | root | .z-grid--stretch | Stretch the columns to fill all the available vertical space | Modifier | | Any containing z.grid | root | .z-grid--gutter | Enables the grid gutters, adds spacing between columns | Modifier | | div, section, article, ul, ol, li | .z-grid | .z-grid__col | A grid column | Element | | Any containing .z-grid__col | .z-grid | .z-grid__col--1-12 | One grid unit, column will occupy 1/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--2-12 | This column will occupy 2/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--3-12 | This column will occupy 3/12 (quarter) of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--4-12 | This column will occupy 4/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--5-12 | This column will occupy 5/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--6-12 | This column will occupy 6/12 (half) of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--7-12 | This column will occupy 7/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--8-12 | This column will occupy 8/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--9-12 | This column will occupy 9/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--10-12 | This column will occupy 10/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--11-12 | This column will occupy 11/12 of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--12-12 | This column will occupy 12/12 (all) of the grid space | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--sm-*-12 | Same as .z-grid__col--*-12 classes, but only effective for screens wider than 35.5rem | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--md-*-12 | Same as .z-grid__col--*-12 classes, but only effective for screens wider than 48rem | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--lg-*-12 | Same as .z-grid__col--*-12 classes, but only effective for screens wider than 64rem | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--xl-*-12 | Same as .z-grid__col--*-12 classes, but only effective for screens wider than 80rem | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--fit | Special column that will stretch to fit the remaining space available | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--center | Center this column within the grid | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--end | Put this column at the end of the grid | Modifier | | Any containing .z-grid__col | .z-grid | .z-grid__col--important | Overrides the order of the grid, put this column first | Modifier |

Full working example:

<div class="z-grid z-grid--gutter">
  <div class="z-grid__col--6-12">Half</div>
  <div class="z-grid__col--6-12">Half</div>
</div>

Stateless Functional Component

Render the HTML by using the SFCs and passing props.

ZGrid

Supported Props

| Prop name | Expected Type | Description | | ------------- | --------------------- | ---------------------------------------------------------------------------------- | | element | string | The name of the HTML tag the grid should render as root element, defaults to div | | children | One or more ZColumn | The columns to render | | gutter | boolean | Set to true to enable the gutters | | center | boolean | Set to true to center the grid within the parent element | | crossCenter | boolean | Set to true to center the grid vertically within the parent element | | reverse | boolean | Set to true to start the grid from the end, right in LTR and left in RTL | | stretch | boolean | Set to true to stretch the columns to fill the remaining space in the grid |

ZColumn

Supported Props

| Prop name | Expected Type | Description | | ----------- | ------------- | ---------------------------------------------------------------------------------- | | element | string | The name of the HTML tag the grid should render as root element, defaults to div | | children | HTMLElement | The column content | | fill | number | Number of grid units this column should occupy, max 12 | | sm | number | Number of grid units this column should occupy when grid width > 35.5rem | | md | number | Number of grid units this column should occupy when grid width > 48rem | | lg | number | Number of grid units this column should occupy when grid width > 64rem | | xl | number | Number of grid units this column should occupy when grid width > 80rem | | fit | boolean | Set to true to make this column fill the rest of the grid space | | center | boolean | Set to true to center this column within the grid | | end | boolean | Set to true to make this column appear in the end of the grid | | important | boolean | Set to true to make this column override the grid order and appear first |

Full example (JSX):

<ZGrid gutter>
  <ZColumn fill={6}>Half</ZColumn>
  <ZColumn fill={6}>Half</ZColumn>
</ZGrid>

LICENSE

MIT