z-box

[![Build]](https://travis-ci.org/z-kit/z-box) [![SemVer]](http://semver.org/) [![License]](LICENSE)

The z-kit component template, starter point to create z-kit compliant components. The package is intended to be used in a web page.

Table of contents

- z-box
- 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:

``bash
npm install z-box --save
`

$3

$3

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

`html

`

$3

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

`javascript
require('z-box/dist/style.css');
`

$3

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:

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

// Passing the render function when importing
const ZBox = require('z-box')(React.createElement);

// Render it on page, using JSX here :)
render(Content to render inside the box, document.body);
`

How to use

$3

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

$3

| Recommended HTML tags | Parent | Class | Description | Type |
| ------------------------------------------ | ------ | -------- | ------------------------------------------------- | ----- |
| div, nav, section, main, article | root | .z-box | Root container that will have the contents padded | Block |

#### Full working example:

`html



`

$3

Render the HTML by using the SFC and passing props.

$3

| Prop name | Expected Type | Description |
| ---------- | --------------------------------------- | ----------------------- |
| children | One or more HTMLElement or TextNode | The contents of the box |

#### Full example (JSX):

`jsx
Hello!
``

LICENSE

MIT

[Build]: https://img.shields.io/travis/z-kit/z-box.svg
[SemVer]: https://img.shields.io/:semver-%E2%9C%93-brightgreen.svg
[License]: https://img.shields.io/npm/l/z-box.svg