Merge branch 'feature/grid' into develop

src/Box.js

@@ -9,6 +9,10 @@ const tocasProps = [
   'primary', 'info', 'warning', 'positive', 'negative', 'inverted',
   // sizes
   'mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive',
+  // directions
+  'left', 'right',
+  // alignment
+  'floated', 'aligned',
 ];
 
 class Box extends Component {

src/Column.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Box from './Box';
+import Sizes from './Sizes';
+
+class Column extends Component {
+  render() {
+    let { wide, className, ...rest } = this.props;
+    let cx = classNames(
+      'column',
+      wide ? `${Sizes[wide - 1]} wide` : null,
+      className,
+    );
+
+    return (
+      <Box
+        className={cx}
+        {...rest}
+      />
+    );
+  }
+}
+
+Column.propTypes = {
+  wide: PropTypes.number,
+};
+
+export default Column;

src/Grid.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Box from './Box';
+import Sizes from './Sizes';
+
+class Grid extends Component {
+  render() {
+    let {
+      column,
+      relaxed,
+      centered,
+      stackable,
+      reversed,
+      className,
+      ...rest
+    } = this.props;
+    let cx = classNames(
+      'grid',
+      column ? `${Sizes[column - 1]} column` : null,
+      {
+        relaxed,
+        centered,
+        stackable,
+        reversed,
+      },
+      className
+    );
+
+    return (
+      <Box
+        ts
+        className={cx}
+        {...rest}
+      />
+    );
+  }
+}
+
+Grid.propTypes = {
+  column: PropTypes.number,
+  relaxed: PropTypes.bool,
+  centered: PropTypes.bool,
+  stackable: PropTypes.bool,
+  reversed: PropTypes.bool,
+};
+
+export default Grid;

src/Row.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Box from './Box';
+import Sizes from './Sizes';
+
+class Row extends Component {
+  render() {
+    let {
+      column,
+      doubling,
+      className,
+      ...rest
+    } = this.props;
+    let cx = classNames(
+      'row',
+      column ? `${Sizes[column - 1]} column` : null,
+      {
+        doubling,
+      },
+      className,
+    );
+
+    return (
+      <Box
+        className={cx}
+        {...rest}
+      />
+    );
+  }
+}
+
+Row.propTypes = {
+  column: PropTypes.number,
+  doubling: PropTypes.bool,
+};
+
+export default Row;

src/Sizes.js

@@ -0,0 +1,18 @@
+export default [
+  'one',
+  'two',
+  'three',
+  'four',
+  'five',
+  'six',
+  'seven',
+  'eight',
+  'nine',
+  'ten',
+  'eleven',
+  'twelve',
+  'thirteen',
+  'fourteen',
+  'fifteen',
+  'sixteen',
+];