Overview

Welcome to Kniferoll.

Kniferoll provides the following on install:

Flexbox grid system
Styled Component Library.
Flexible theming system.

Installation

> npm i -S kniferoll

Dependencies

Kniferoll requires your application adhere to using certain technologies which you're probably already using anyway:

React
Webpack for bundling
Webpack url-loader and file-loader for fonts and images.

Kniferoll uses the following libraries under the hood which you may want to look into as they are pretty darn neat themselves!

Example

TODO

For more detailed usage, please see the individual sections.

Grid System
Components

Grid System

The grid system should look familiar to you. It uses the Container > Row > columns structure as many grid systems do. It is based on the popular flexbox grid. It is currently only supporting responsiveness of the grid layout, but without push/pull, alignment, or distribution.

Out of the box, it resembles your standard, responsive 12 column grid system.

The biggest benefit of turning the grid elements into react components is run time configuration of the grid and for your layout.

5 Column Grid

17 Column Grid

Grid

src/grid/Grid.js

Grid container component. Setup the grid here for it's child components.

Prop name	Type	Default	Description
`children`	`node`		Grid child components.
`columns`	`number`	`12`	Number of columns for grid
`padding`	`number`	`15`	Container padding.
`gutter`	`number`	`15`	Column gutter size
`fluid`	`bool`	`true`	Fluid container or not
`xsBreak`	`number`	`576`	xs breakpoint for grid.
`smBreak`	`number`	`768`	sm breakpoint for grid.
`mdBreak`	`number`	`992`	md breakpoint for grid.
`unit`	`string`	`px`	Unit measurement for grid. Applied to padding, gutter, and breakpoints.

Row

src/grid/Row.js

Simple grid Row component.

Prop name	Type	Default	Description
`children`	`node`		Row children
`className`	`string`
`reverse`	`bool`	`false`	Whether to reverse the column order or not

Col

src/grid/Col.js

Grid column component

Prop name	Type	Description
`children`	`node`	Col children
`className`	`string`
`xs`	`number`	Col spread at xs
`sm`	`number`	Col spread at sm
`md`	`number`	Col spread at md
`lg`	`number`	Col spread at lg
`xsOffset`	`number`	Col offset at xs
`smOffset`	`number`	Col offset at sm
`mdOffset`	`number`	Col offset at md
`lgOffset`	`number`	Col offset at lg

Components

TODO: Explain general component usage

Button

src/components/Button/Button.js

Simple button.

Prop name	Type	Default	Description
`children`	`node`		Button child content
`disabled`	`bool`		Whether button is disabled or not. Prevents onClick.
`href`	`string`		Href link. Will turn button into `<a/>` element.
`loading`	`bool`		Whether button is loading asynchronous content or not. Will block onClick if true.
`loadingContent`	`node`	`loading...`	Loading content to replace children when loading
`onClick`	`func`		Button onClick handler function.

Goto Google

Dialog

src/components/Dialog/Dialog.js

Dialog window for dispaying alerts, messages, confirms, or anything else.

Prop name	Type	Default	Description
`cancelText`	`string`	`Cancel`	Text for cancel button
`children`	`node`		Child component(s) to render within the Dialog box
`confirmText`	`string`	`Confirm`	Text for confirm button
`content`	`string`		Text content to display within the Dialog
`onCancel`	`func`		Cancel button handler. Cancel button will not display if not set.
`onConfirm`	`func`		Confirm button handler. Confirm button will not display if not set.
`onEscKeyDown`	`func`		Attach function to escape key while mounted. Maybe to CLOSE the Dialog? Perhaps?
`onOverlayClick`	`func`		Function to call when clicking outside the Dialog box. Often you will want a function to close the Dialog.
`open`	`bool`	`false`	Whether or not the Dialog is open
`timeout`	`union`	`150`	Dialog transition timeout. Either integer or object. `{ enter: 300, exit: 100 }` One of type: `number`, `shape`
`title`	`string`		Dialog title text

You can give a a Dialog a title, content, confirm action and cancel action out of the box.

Or fully customize the the content rendered in a for more complicated (even multi-step) Dialogs.

Input

src/components/Input/Input.js

Basic form input. All other props passed to this component will be passed through to the actual input field.

Prop name	Type	Default	Description
`className`	`string`	Required	className for glamorous styles
`description`	`string`		Helper description for tooltip
`error`	`string`		Error message for input. Alters input style and displays error message if set.
`label`	`string`		Field label text to display above input
`name`	`string`		Field name in form
`onBlur`	`func`		Function to call on input blur
`onChange`	`func`		Function to call on input change
`onFocus`	`func`		Function to call on input focus
`placeholder`	`string`		Placeholder text for input
`type`	`string`	Required	Input type
`wrapperProps`	`object`		Props to pass on to the Input Component Wrapper.
`value`	`string`		Input value

A basic form input.

Basic Input Example

With Label

First Name

With Label & Error

Favorite Vegetable

Tomato is a fruit, dummy...

Textarea

src/components/Textarea/Textarea.js

Basic form textarea input. All other props passed to this component will be passed through to the actual textarea element.

Prop name	Type	Default	Description
`className`	`string`	Required	className for glamorous styles
`description`	`string`		Helper description for tooltip
`error`	`string`		Error message for textarea. Alters textarea style and displays error message if set.
`focused`	`bool`		Whether this component has focus or not. Automatically set by onFocus and onBlur coming from withFocus HOC
`label`	`string`		Field label text to display above textarea
`name`	`string`		Field name in form
`onBlur`	`func`		Function to call on textarea blur
`onChange`	`func`		Function to call on textarea change
`onFocus`	`func`		Function to call on textarea focus
`placeholder`	`string`		Placeholder text for textarea
`rows`	`number`	`5`	Number of rows for this Textarea
`wrapperProps`	`object`		Input value
`value`	`string`		props defined in the instrument for the purpose of style

A basic form textarea input.

Comment Section

Checkbox

src/components/Checkbox/Checkbox.js

Basic checkbox input.

Prop name	Type	Default	Description
`checkedComponent`	`node`	`<i className="fa fa-check-square-o" />`	Component to display when checked
`defaultValue`	`bool`		Set true to default checked.
`description`	`string`		Helper description for tooltip
`disabled`	`bool`		Whether checkbox is disabled or not. onSwitch, onChange and onClick will not fire if disabled.
`error`	`string`		Error message for input. Alters input style and displays error message if set.
`label`	`string`		Field label text to display above input
`name`	`string`		Field name in form
`onBlur`	`func`		Function to call on input blur
`onChange`	`func`		Function to call on input change
`onSwitch`	`func`		Function to call when switched. Also fires onChange and onClick if passed as props. Will not fire when disabled.
`uncheckedComponent`	`node`	`<i className="fa fa-square-o" />`	Component to display when unchecked
`value`	`bool`		Input value. Whether checked or not.

Simple Checkbox

I would like to receive email notifications from Kniferoll.

Controlled Input

I understand what a controlled input is and why it's helpful.

Custom Check Icons

I want to ride my bicycle. I want to ride it where I like.

Toggle

src/components/Toggle/Toggle.js

Basic checkbox input.

Prop name	Type	Description
`defaultValue`	`bool`	Set true to default checked.
`description`	`string`	Helper description for tooltip
`disabled`	`bool`	Whether checkbox is disabled or not. onSwitch, onChange and onClick will not fire if disabled.
`error`	`string`	Error message for input. Alters input style and displays error message if set.
`label`	`string`	Field label text to display above input
`name`	`string`	Field name in form
`onBlur`	`func`	Function to call on input blur
`onChange`	`func`	Function to call on input change
`onSwitch`	`func`	Function to call when switched. Also fires onChange and onClick if passed as props. Will not fire when disabled.
`value`	`bool`	Input value. Whether checked or not.

Simple Toggle

I would like to receive email notifications from Kniferoll.

Controlled Input

I understand what a controlled input is and why it's helpful.

Default Value

Defaults On

Installation

Dependencies

Example

5 Column Grid

17 Column Grid

Simple Checkbox

Controlled Input

Custom Check Icons

Simple Toggle

Controlled Input

Default Value

Knife Roll