React iotaCSS

Stateless React Components for iotaCSS.

Features

• Uses iotaCSS styles
• You can use iotaPlate with it
• Works on any application architecture
• Great for prototyping
• Production ready
• Tested

Getting Started

Step 1: Install react-iotacss package

$ npm install --save react-iotacss

Step 2: Install iotaCSS

For this example, we will use iotaPlate, iotaCSS's official CLI.

$ npm install -g iotaplate

Navigate to the directory you want to have your scss. For this example is scss:

$ cd scss
$ iotaplate

Step 3: Import and use React iotaCSS

import React from 'react'

// Import Container, H1 and P components
import { Container, H1, P } from 'react-iotacss'

// Import iotaCSS SCSS code that we generated with iotaPlate
import './scss/main.scss'

const App = () => (
  <Container size="small">
    <H1 size="large">Getting Started with React iotaCSS</H1>
    <P>This is an example on how to get started with React iotaCSS</P>
  </Container>
)

Also, make sure you check the demo here.

Documentation

Note: This library uses Object.assign which is not supported by some legacy browsers. You should polyfill it if you need to support older browsers.

Base

The Base is responsible for translating u prefixed properties to iotaCSS utility classes, for example uText="center" will translate to class="u-text-center". It's extended by all the React Components and you should use it in all your components if you want them to support React iotaCSS utility properties. Properties that are not specific to Base will be passed down to to the rendered tagName.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | tagName | String | div | TagName to be used |

Example

<Base tagName="p" uText="center">
  Some paragraph
</Base>

Container

The Container is responsible for creating smart, flexible and responsive containers.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | gutter | String | '' | Container extra gutter name | | size | String | '' | Container extra size name | | className | String | '' | Allows to specify a CSS class |

Example

<Container size="large">
  Some content here
</Container>

Grid

The Grid is responsible for building a smart, flexible and responsive grid.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | align | oneOf(['right', 'center', 'top', 'middle', 'bottom', 'around', 'between']) | 'top' | Align grid vertically and horizontally | | gutter | String | '' | Grid extra gutter name | | rev | Boolean | false | Reversed grid | | equalHeight | Boolean | false | Grid with equal height | | className | String | '' | Allows to specify a CSS class |

Example

<Grid gutter="large">
  <Grid.Column uSize="1/2">
    Half width column
  </Grid.Column>
  <Grid.Column uSize="1/2">
    Another half width column
  </Grid.Column>
</Grid>

List

The List is responsible for creating inline, block and span lists. You can use it to build the structure of UI components like navigations or vertical lists.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | type | oneOf(['inline', 'block', 'span']) | 'inline' | Type of list | | align | oneOf(['top', 'middle', 'bottom']) | 'top' | Align list vertically | | gutter | String | '' | List extra gutter name | | className | String | '' | Allows to specify a CSS class |

Example

<List type="block">
  <List.Item>
    List Item 1
  </List.Item>
  <List.Item>
    List Item 1
  </List.Item>
</List>

Media

Media is responsible for a common design pattern where there is a fixed and a fluid width column next to each other. It's used to build the structure of sidebars, comments, avatar and other similar UI components.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | align | oneOf(['top', 'middle', 'bottom']) | 'top' | Align media vertically | | gutter | String | '' | Media extra gutter name | | rev | Boolean | false | Reversed media | | res | Boolean | false | Responsive media | | className | String | '' | Allows to specify a CSS class |

Example

<Media align="middle">
  <Media.Fixed>
    Fixed part of Media
  </Media.Fixed>
  <Media.Fluid>
    Fluid part of Media
  </Media.Fluid>
</Media>

Type

The Type is responsible for making responsive typography a piece of cake.

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | size | String | '' | Typography size | | tagName | String | 'p' | HTML tag to use | | className | String | '' | Allows to specify a CSS class |

<Type tagName="span" size="large">Large Text</Type>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P>Paragraph</P>

Note: H1 - H6 and P components do not provide any size. They only use the related HTML tag.

Utilities

React iotaCSS uses a smart way to parse properties to utility classes:

<Type uText="center" uMb>Centered text with default margin botto</Type>

<p class="o-text-center u-mb">Centered text with default margin bottom</p>

Available Properties

The available properties are the same as the utilities that come with iotaCSS:

• uAi
• uAlign
• uBgcolor
• uCf
• uColor
• uDisplay
• uFd
• uFloat
• uJc
• uM
• uMt
• uMr
• uMb
• uMl
• uMv
• uMh
• uOpacity
• uP
• uPt
• uPr
• uPb
• uPl
• uPv
• uPh
• uPosition
• uPull
• uPush
• uSize
• uText
• uTransform
• uWeight

Margin / Padding

One important note for Margin and Padding utility properties. As decribed in the docs for Margin and Padding, you will need to add an extra '-' in the SCSS configuration for the extra margin/padding sizes like the following:

$iota-utils-margin-extra: (
  -small: 10px
);

so, it will generate a class with like '.u-mb-small' instead of '.u-mbsmall'. This is required for React iotaCSS because it always uses a '-' to separate the margin/padding direction from the extra margin/padding size.

Properties

| Name | Type | Description | | --- | --- | --- | | uAlign | String | Vertical Align | | uBgcolor | String | Background Color | | uCf | Boolean | Clearfix | | uColor | String | Color | | uDisplay | String | Display | | uFloat | String | Float | | uM | oneOfType([PropTypes.bool, PropTypes.string]) | Margin | | uMt | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Top | | uMr | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Right | | uMb | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Bottom | | uMl | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Left | | uMv | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Vertical | | uMh | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Horizontal | | uOpacity | String | Opacity | | uP | oneOfType([PropTypes.bool, PropTypes.string]) | Padding | | uPt | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Top | | uPr | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Right | | uPb | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Bottom | | uPl | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Left | | uPv | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Vertical | | uPh | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Horizontal | | uPosition | String | Position | | uPull | String | Offset After | | uPush | String | Offset | | uText | String | Text Align | | uTransform | String | Text Transform | | uWeight | String | Font Weight |

Example

<H1 size="large" uText="center" uMb>Hello World</H1>

<h1 class="o-type-size u-text-center u-mb">Hello World</h1>

Responsive Utilities

React iotaCSS also supports responsive utilities with a similar syntax to iotaCSS itself, with one big difference. Since in React you cannot pass two times the same property with difference values, iotaCSS introduces the 'all' word which is used in case you want to have for example a default margin everywhere and a large margin to only 'sm' breakpoint:

<Type uText="right center@sm" uMb="large" uMt="all large@sm">Right on all devices, center on tablets and up. Default margin bottom in all devices and large margin bottom in tablets and up</Type>

<p class="u-text-right u-text-center@sm u-mb-large u-mt u-mt-large@sm" uMb="large" uMt="all large@sm">Right on all devices, center on tablets and up. Default margin bottom in all devices and large margin bottom in tablets and up</p>

Testing

Interactive mode

// NPM
npm run test:watch

// Yarn
yarn test:watch

Single run mode:

// NPM
npm test

// Yarn
yarn test