From 80da85cad7e1390626d50dfb5eb91939c525b2f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=81=E6=B2=BB=E5=B9=B3?= <gocreating@gmail.com>
Date: Sun, 16 Apr 2017 18:27:30 +0800
Subject: [PATCH 1/5] Add size words

---
 src/Sizes.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/Sizes.js

diff --git a/src/Sizes.js b/src/Sizes.js
new file mode 100644
index 0000000..5791359
--- /dev/null
+++ b/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',
+];

From bfb1db7eb4c3c3f8002af618ba7233456bae68c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=81=E6=B2=BB=E5=B9=B3?= <gocreating@gmail.com>
Date: Tue, 18 Apr 2017 21:36:51 +0800
Subject: [PATCH 2/5] Add directions and alignment to Box

---
 src/Box.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Box.js b/src/Box.js
index 6936f00..707cf05 100644
--- a/src/Box.js
+++ b/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 {

From 4300320e01cfbe7dbc245957f47574fa5e3e8b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=81=E6=B2=BB=E5=B9=B3?= <gocreating@gmail.com>
Date: Tue, 18 Apr 2017 21:37:08 +0800
Subject: [PATCH 3/5] Add Grid

---
 src/Grid.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/Grid.js

diff --git a/src/Grid.js b/src/Grid.js
new file mode 100644
index 0000000..3a69101
--- /dev/null
+++ b/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;

From 9e2cf511a32416491ecdf05a2c478bc6b354f40d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=81=E6=B2=BB=E5=B9=B3?= <gocreating@gmail.com>
Date: Tue, 18 Apr 2017 21:37:20 +0800
Subject: [PATCH 4/5] Add Column

---
 src/Column.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/Column.js

diff --git a/src/Column.js b/src/Column.js
new file mode 100644
index 0000000..b727dd9
--- /dev/null
+++ b/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;

From e6da7bfd1f7d3a39d7dbb4cb064cfafd23090618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=81=E6=B2=BB=E5=B9=B3?= <gocreating@gmail.com>
Date: Tue, 18 Apr 2017 21:37:35 +0800
Subject: [PATCH 5/5] Add Row

---
 src/Row.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/Row.js

diff --git a/src/Row.js b/src/Row.js
new file mode 100644
index 0000000..50bc898
--- /dev/null
+++ b/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;