diff --git a/.bettercodehub.yml b/.bettercodehub.yml
index d161fbd..e134317 100644
--- a/.bettercodehub.yml
+++ b/.bettercodehub.yml
@@ -1 +1 @@
-component_depth: 2;
+component_depth: 2
\ No newline at end of file
diff --git a/jest.config.json b/jest.config.json
index 66b7bb8..90a3ad5 100644
--- a/jest.config.json
+++ b/jest.config.json
@@ -6,6 +6,7 @@
   ],
   "coverageReporters": ["cobertura", "lcov"],
   "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+  "setupTestFrameworkScriptFile": "./test.config.ts",
   "snapshotSerializers": ["enzyme-to-json/serializer"],
   "testRegex": ".*?\\.(spec|test)\\.(jsx?|tsx?)$",
   "testResultsProcessor": "jest-junit",
diff --git a/package.json b/package.json
index 21a7347..dbda034 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-rasta",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "The most powerful and flexible grid system for React",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -11,12 +11,13 @@
   },
   "author": "ChilliCream",
   "license": "MIT",
+  "keywords": ["grid", "layout", "css", "flexbox"],
   "scripts": {
     "build": "yarn prettier && yarn lint && yarn test:coverage && tsc",
     "build-storybook": "build-storybook",
     "cover": "coveralls < coverage/lcov.info",
     "lint": "tslint -c tslint.json 'src/**/*.ts*'",
-    "prettier": "prettier \"./*.+(js|json|md|yml)\" \"./src/**/*.*\" --write",
+    "prettier": "prettier \"./*.+(js|json|md)\" \"./src/**/*.*\" --write",
     "storybook": "start-storybook -p 6006",
     "test": "jest --config jest.config.json",
     "test:coverage": "jest --coverage --config jest.config.json"
@@ -54,6 +55,7 @@
     "ts-jest": "^22.0.1",
     "tslint": "^5.9.1",
     "tslint-react": "^3.3.3",
+    "tslint-sonarts": "^1.6.0",
     "typescript": "^2.8.1"
   },
   "dependencies": {}
diff --git a/src/__snapshots__/index.test.ts.snap b/src/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..55d57d8
--- /dev/null
+++ b/src/__snapshots__/index.test.ts.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "BreakpointMap": Object {},
+  "BreakpointValue": Object {},
+  "BreakpointValues": Object {},
+  "Column": [Function],
+  "Container": [Function],
+  "Row": [Function],
+  "Theme": Object {},
+  "ThemeProvider": [Function],
+}
+`;
diff --git a/src/column/Column.test.tsx b/src/column/Column.test.tsx
index e5ecd17..b137260 100644
--- a/src/column/Column.test.tsx
+++ b/src/column/Column.test.tsx
@@ -1,15 +1,9 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import "jest-styled-components";
-import { configure, shallow } from "enzyme";
-import * as Adapter from "enzyme-adapter-react-16";
+import { shallow } from "enzyme";
 import * as React from "react";
 import styled from "styled-components";
 import Column from "./Column";
 
-configure({ adapter: new Adapter() });
-
 describe("<Column />", () => {
   it("should match the snapshot (no properties set)", () => {
     // act
diff --git a/src/column/Column.tsx b/src/column/Column.tsx
index 8be65d2..0ed7fe1 100644
--- a/src/column/Column.tsx
+++ b/src/column/Column.tsx
@@ -1,8 +1,6 @@
-// These imports are needed for declaration files
-import * as _React from "react";
-import * as _StyledComponents from "styled-components";
-// -------------------------------------------------------------------
 import "../utils/bootstrap";
+import { ClassAttributes, HTMLAttributes } from "react";
+import { StyledComponentClass } from "styled-components";
 import ColumnProperties from "./ColumnProperties";
 import ColumnOffset from "./ColumnOffset";
 import ColumnOrder from "./ColumnOrder";
diff --git a/src/column/__snapshots__/Column.test.tsx.snap b/src/column/__snapshots__/Column.test.tsx.snap
index 484ef51..55ba49d 100644
--- a/src/column/__snapshots__/Column.test.tsx.snap
+++ b/src/column/__snapshots__/Column.test.tsx.snap
@@ -68,13 +68,9 @@ exports[
   width: 100%;
   min-height: 1px;
   margin-left: 25.000000%;
-  -webkit-box-ordinal-group: 3;
-  -ms-flex-order: 2;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 75.000000%;
   -webkit-flex: 0 0 75.000000%;
   -ms-flex: 0 0 75.000000%;
   flex: 0 0 75.000000%;
@@ -96,8 +92,6 @@ exports[
   position: relative;
   width: 100%;
   min-height: 1px;
-  -webkit-box-ordinal-group: 0;
-  -ms-flex-order: -1;
   -webkit-order: -1;
   -ms-flex-order: -1;
   order: -1;
@@ -105,8 +99,6 @@ exports[
 
 @media (min-width:576px) {
   .c0 {
-    -webkit-box-ordinal-group: 3;
-    -ms-flex-order: 2;
     -webkit-order: 2;
     -ms-flex-order: 2;
     order: 2;
@@ -115,8 +107,6 @@ exports[
 
 @media (min-width:768px) {
   .c0 {
-    -webkit-box-ordinal-group: 13;
-    -ms-flex-order: 12;
     -webkit-order: 12;
     -ms-flex-order: 12;
     order: 12;
@@ -140,8 +130,6 @@ exports[`<Column /> should match the snapshot (order: 5)  1`] = `
   position: relative;
   width: 100%;
   min-height: 1px;
-  -webkit-box-ordinal-group: 5;
-  -ms-flex-order: 4;
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -153,25 +141,6 @@ exports[`<Column /> should match the snapshot (order: 5)  1`] = `
 />
 `;
 
-exports[`<Column /> should match the snapshot (size: 7)  1`] = `
-.c0 {
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 58.333333%;
-  -webkit-flex: 0 0 58.333333%;
-  -ms-flex: 0 0 58.333333%;
-  flex: 0 0 58.333333%;
-  max-width: 58.333333%;
-}
-
-<div
-  className="c0"
-  size={7}
-/>
-`;
-
 exports[
   `<Column /> should match the snapshot (size: { xs: 'auto', sm: 7, md: 'none' })  1`
 ] = `
@@ -179,13 +148,10 @@ exports[
   position: relative;
   width: 100%;
   min-height: 1px;
-  -ms-flex-preferred-size: 0;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
   -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
@@ -194,8 +160,6 @@ exports[
 
 @media (min-width:576px) {
   .c0 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 58.333333%;
     -webkit-flex: 0 0 58.333333%;
     -ms-flex: 0 0 58.333333%;
     flex: 0 0 58.333333%;
@@ -205,8 +169,6 @@ exports[
 
 @media (min-width:768px) {
   .c0 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -226,3 +188,20 @@ exports[
   }
 />
 `;
+
+exports[`<Column /> should match the snapshot (size: 7)  1`] = `
+.c0 {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  -webkit-flex: 0 0 58.333333%;
+  -ms-flex: 0 0 58.333333%;
+  flex: 0 0 58.333333%;
+  max-width: 58.333333%;
+}
+
+<div
+  className="c0"
+  size={7}
+/>
+`;
diff --git a/src/column/__snapshots__/index.test.ts.snap b/src/column/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..e2b274e
--- /dev/null
+++ b/src/column/__snapshots__/index.test.ts.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "default": [Function],
+}
+`;
diff --git a/src/column/index.test.ts b/src/column/index.test.ts
new file mode 100644
index 0000000..6d6acb4
--- /dev/null
+++ b/src/column/index.test.ts
@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});
diff --git a/src/column/renderOrder.test.ts b/src/column/renderOrder.test.ts
index 7084aef..613228f 100644
--- a/src/column/renderOrder.test.ts
+++ b/src/column/renderOrder.test.ts
@@ -9,9 +9,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:-1;");
   });
 
   it("should render css for flex order (input: 0)", () => {
@@ -22,9 +20,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:-1;");
   });
 
   it("should render css for flex order (input: 5)", () => {
@@ -35,9 +31,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:4;");
   });
 
   it("should render css for flex order (input: 'last')", () => {
@@ -48,9 +42,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:12;");
   });
 
   it("should render css for flex order (input: 13)", () => {
@@ -61,8 +53,6 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:12;");
   });
 });
diff --git a/src/column/renderOrder.ts b/src/column/renderOrder.ts
index d19178f..a797346 100644
--- a/src/column/renderOrder.ts
+++ b/src/column/renderOrder.ts
@@ -12,8 +12,6 @@ const renderOrder = (order?: ColumnOrder | 0 | 13): string => {
 
     if (typeof order === "number") {
       return `
-        -webkit-box-ordinal-group: ${order};
-        -ms-flex-order: ${order - 1};
         order: ${order - 1};
       `;
     }
diff --git a/src/column/renderSize.test.ts b/src/column/renderSize.test.ts
index 9f63cfd..f77a7a6 100644
--- a/src/column/renderSize.test.ts
+++ b/src/column/renderSize.test.ts
@@ -10,7 +10,7 @@ describe("renderSize", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;"
+      "flex-basis:0;flex-grow:1;max-width:100%;"
     );
   });
 
@@ -23,7 +23,7 @@ describe("renderSize", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-flex:0;-ms-flex:00auto;flex:00auto;width:auto;max-width:none;"
+      "flex:00auto;width:auto;max-width:none;"
     );
   });
 
@@ -47,7 +47,7 @@ describe("renderSize", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-flex:0;-ms-flex:0050.000000%;flex:0050.000000%;max-width:50.000000%;"
+      "flex:0050.000000%;max-width:50.000000%;"
     );
   });
 });
diff --git a/src/column/renderSize.ts b/src/column/renderSize.ts
index ef9ec0f..09dc50a 100644
--- a/src/column/renderSize.ts
+++ b/src/column/renderSize.ts
@@ -8,8 +8,6 @@ export default (size?: ColumnSize): string => {
 
   if (size === "none") {
     return `
-      -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
       flex: 0 0 auto;
       width: auto;
       max-width: none;
@@ -18,10 +16,7 @@ export default (size?: ColumnSize): string => {
 
   if (size === "auto") {
     return `
-      -ms-flex-preferred-size: 0;
       flex-basis: 0;
-      -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
       flex-grow: 1;
       max-width: 100%;
     `;
@@ -30,8 +25,6 @@ export default (size?: ColumnSize): string => {
   const calculatedPercentage = percentage(size);
 
   return `
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 ${calculatedPercentage}%;
     flex: 0 0 ${calculatedPercentage}%;
     max-width: ${calculatedPercentage}%;
   `;
diff --git a/src/container/Container.test.tsx b/src/container/Container.test.tsx
index 18eb258..2ffa492 100644
--- a/src/container/Container.test.tsx
+++ b/src/container/Container.test.tsx
@@ -1,15 +1,9 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import "jest-styled-components";
-import { configure, shallow } from "enzyme";
-import * as Adapter from "enzyme-adapter-react-16";
+import { shallow } from "enzyme";
 import * as React from "react";
 import styled from "styled-components";
 import Container from "./Container";
 
-configure({ adapter: new Adapter() });
-
 describe("<Container />", () => {
   it("should match the snapshot (no properties set)", () => {
     // act
diff --git a/src/container/Container.tsx b/src/container/Container.tsx
index 7863cdc..7bb2928 100644
--- a/src/container/Container.tsx
+++ b/src/container/Container.tsx
@@ -1,8 +1,6 @@
-// These imports are needed for declaration files
-import * as _React from "react";
-import * as _StyledComponents from "styled-components";
-// -------------------------------------------------------------------
 import "../utils/bootstrap";
+import { ClassAttributes, HTMLAttributes } from "react";
+import { StyledComponentClass } from "styled-components";
 import ContainerProperties from "./ContainerProperties";
 import renderWidth from "./renderWidth";
 import getWidth from "./width";
diff --git a/src/container/__snapshots__/index.test.ts.snap b/src/container/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..e2b274e
--- /dev/null
+++ b/src/container/__snapshots__/index.test.ts.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "default": [Function],
+}
+`;
diff --git a/src/container/index.test.ts b/src/container/index.test.ts
new file mode 100644
index 0000000..6d6acb4
--- /dev/null
+++ b/src/container/index.test.ts
@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});
diff --git a/src/index.test.ts b/src/index.test.ts
index b6b4fe1..6d6acb4 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -1,18 +1,7 @@
-// Module mocks must mocked before importing modules
-jest.mock("./utils/bootstrap", () => jest.fn());
-
-import { Column, Container, Row } from ".";
+import * as module from ".";
 
 describe("index", () => {
-  it("should verify Column not null", () => {
-    expect(Column).not.toBeNull();
-  });
-
-  it("should verify Container not null", () => {
-    expect(Container).not.toBeNull();
-  });
-
-  it("should verify Row not null", () => {
-    expect(Row).not.toBeNull();
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
   });
 });
diff --git a/src/media/__snapshots__/index.test.ts.snap b/src/media/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..e2183f0
--- /dev/null
+++ b/src/media/__snapshots__/index.test.ts.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "BreakpointMap": Object {},
+  "BreakpointValue": Object {},
+  "BreakpointValues": Object {},
+  "BreakpointValuesMap": Object {},
+  "PropertyValue": Object {},
+  "PropertyValues": Object {},
+  "PropertyValuesMap": Object {},
+  "breakpoints": [Function],
+  "defaultBreakpointKey": [Function],
+  "defaultBreakpoints": Object {
+    "lg": 992,
+    "md": 768,
+    "sm": 576,
+    "xl": 1200,
+    "xs": 0,
+  },
+}
+`;
diff --git a/src/media/index.test.ts b/src/media/index.test.ts
new file mode 100644
index 0000000..6d6acb4
--- /dev/null
+++ b/src/media/index.test.ts
@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});
diff --git a/src/row/Row.test.tsx b/src/row/Row.test.tsx
index 0538d61..b65afbf 100644
--- a/src/row/Row.test.tsx
+++ b/src/row/Row.test.tsx
@@ -1,15 +1,9 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import "jest-styled-components";
-import { configure, shallow } from "enzyme";
-import * as Adapter from "enzyme-adapter-react-16";
+import { shallow } from "enzyme";
 import * as React from "react";
 import styled from "styled-components";
 import Row from "./Row";
 
-configure({ adapter: new Adapter() });
-
 describe("<Row />", () => {
   it("should match the snapshot (no properties set)", () => {
     // act
@@ -19,6 +13,24 @@ describe("<Row />", () => {
     expect(result).toMatchSnapshot();
   });
 
+  it("should match the snapshot (alignItems: 'strech') ", () => {
+    // act
+    const result = shallow(<Row alignItems={"stretch"} />);
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
+
+  it("should match the snapshot (alignItems: { xs: 'baseline', sm: 'center', md: 'flex-end' })", () => {
+    // act
+    const result = shallow(
+      <Row alignItems={{ xs: "baseline", sm: "center", md: "flex-end" }} />
+    );
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
+
   it("should match the snapshot (direction: 'row') ", () => {
     // act
     const result = shallow(<Row direction={"row"} />);
diff --git a/src/row/Row.tsx b/src/row/Row.tsx
index a835718..ff9efa5 100644
--- a/src/row/Row.tsx
+++ b/src/row/Row.tsx
@@ -1,12 +1,12 @@
-// These imports are needed for declaration files
-import * as _React from "react";
-import * as _StyledComponents from "styled-components";
-// -------------------------------------------------------------------
 import "../utils/bootstrap";
+import { ClassAttributes, HTMLAttributes } from "react";
+import { StyledComponentClass } from "styled-components";
+import renderAlignItems from "./renderAlignItems";
 import renderDirection from "./renderDirection";
 import renderGutter from "./renderGutter";
 import renderJustifyContent from "./renderJustifyContent";
 import renderWrap from "./renderWrap";
+import RowAlignItems from "./RowAlignItems";
 import RowDirection from "./RowDirection";
 import RowJustifyContent from "./RowJustifyContent";
 import RowProperties from "./RowProperties";
@@ -16,12 +16,12 @@ import { styled, Theme } from "../theme";
 import { render } from "../utils";
 
 const Row = styled.div`
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 
   ${(props: RowProperties) => {
     const renderer = {
+      alignItems: (value?: PropertyValue) =>
+        renderAlignItems(value as RowAlignItems),
       justifyContent: (value?: PropertyValue) =>
         renderJustifyContent(value as RowJustifyContent),
       direction: (value?: PropertyValue) =>
@@ -30,6 +30,7 @@ const Row = styled.div`
       wrap: (value?: PropertyValue) => renderWrap(value as RowWrap)
     };
     const valueMap = {
+      alignItems: props!.alignItems as BreakpointValue<RowAlignItems>,
       justifyContent: props!.justifyContent as BreakpointValue<
         RowJustifyContent
       >,
diff --git a/src/row/RowAlignItems.story.tsx b/src/row/RowAlignItems.story.tsx
new file mode 100644
index 0000000..9a88640
--- /dev/null
+++ b/src/row/RowAlignItems.story.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import BlueSquare from "../__storybook__/BlueSquare";
+import Story from "../__storybook__/Story";
+import Title from "../__storybook__/Title";
+
+import { Column, Container, Row } from "..";
+
+storiesOf("RowAlignItems", module)
+  .add("baseline", () => (
+    <Story>
+      <Title>baseline</Title>
+      <Container style={{ background: "#ccc", height: 200 }}>
+        <Row alignItems={"baseline"} style={{ height: 200 }}>
+          <Column size={2}>
+            <BlueSquare>1</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>2</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>3</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>4</BlueSquare>
+          </Column>
+        </Row>
+      </Container>
+    </Story>
+  ))
+  .add("center", () => (
+    <Story>
+      <Title>center</Title>
+      <Container style={{ background: "#ccc", height: 200 }}>
+        <Row alignItems={"center"} style={{ height: 200 }}>
+          <Column size={2}>
+            <BlueSquare>1</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>2</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>3</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>4</BlueSquare>
+          </Column>
+        </Row>
+      </Container>
+    </Story>
+  ))
+  .add("flex-end", () => (
+    <Story>
+      <Title>flex-end</Title>
+      <Container style={{ background: "#ccc", height: 200 }}>
+        <Row alignItems={"flex-end"} style={{ height: 200 }}>
+          <Column size={2}>
+            <BlueSquare>1</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>2</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>3</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>4</BlueSquare>
+          </Column>
+        </Row>
+      </Container>
+    </Story>
+  ))
+  .add("flex-start", () => (
+    <Story>
+      <Title>flex-start</Title>
+      <Container style={{ background: "#ccc", height: 200 }}>
+        <Row alignItems={"flex-start"} style={{ height: 200 }}>
+          <Column size={2}>
+            <BlueSquare>1</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>2</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>3</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>4</BlueSquare>
+          </Column>
+        </Row>
+      </Container>
+    </Story>
+  ))
+  .add("stretch", () => (
+    <Story>
+      <Title>stretch</Title>
+      <Container style={{ background: "#ccc", height: 200 }}>
+        <Row alignItems={"stretch"} style={{ height: 200 }}>
+          <Column size={2}>
+            <BlueSquare>1</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>2</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>3</BlueSquare>
+          </Column>
+          <Column size={2}>
+            <BlueSquare>4</BlueSquare>
+          </Column>
+        </Row>
+      </Container>
+    </Story>
+  ));
diff --git a/src/row/RowAlignItems.ts b/src/row/RowAlignItems.ts
new file mode 100644
index 0000000..0cfd6b9
--- /dev/null
+++ b/src/row/RowAlignItems.ts
@@ -0,0 +1,8 @@
+type RowAlignItems =
+  | "baseline"
+  | "center"
+  | "flex-end"
+  | "flex-start"
+  | "stretch";
+
+export default RowAlignItems;
diff --git a/src/row/RowProperties.ts b/src/row/RowProperties.ts
index efbf9e0..6ee7d37 100644
--- a/src/row/RowProperties.ts
+++ b/src/row/RowProperties.ts
@@ -1,3 +1,4 @@
+import RowAlignItems from "./RowAlignItems";
 import RowDirection from "./RowDirection";
 import RowJustifyContent from "./RowJustifyContent";
 import RowWrap from "./RowWrap";
@@ -5,6 +6,7 @@ import { BreakpointValue } from "../media";
 import { ThemeProperties } from "../theme";
 
 export default interface RowProperties extends ThemeProperties {
+  alignItems?: BreakpointValue<RowAlignItems>;
   direction?: BreakpointValue<RowDirection>;
   justifyContent?: BreakpointValue<RowJustifyContent>;
   noGutter?: BreakpointValue<boolean>;
diff --git a/src/row/__snapshots__/Row.test.tsx.snap b/src/row/__snapshots__/Row.test.tsx.snap
index 9a3acdb..617e263 100644
--- a/src/row/__snapshots__/Row.test.tsx.snap
+++ b/src/row/__snapshots__/Row.test.tsx.snap
@@ -1,30 +1,96 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Row /> should match the snapshot (alignItems: 'strech')  1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch !important;
+  -webkit-box-align: stretch !important;
+  -ms-flex-align: stretch !important;
+  align-items: stretch !important;
+  margin-right: -15px;
+  margin-left: -15px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c0 > .sc-bdVaJa {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+<div
+  className="c0"
+/>
+`;
+
 exports[
-  `<Row /> should match the snapshot (direction: 'column', justifyContent: center, noGutter: true, wrap: 'nowrap') 1`
+  `<Row /> should match the snapshot (alignItems: { xs: 'baseline', sm: 'center', md: 'flex-end' }) 1`
 ] = `
 .c0 {
   display: -webkit-box;
+  display: -webkit-flex;
   display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: baseline !important;
+  -webkit-box-align: baseline !important;
+  -ms-flex-align: baseline !important;
+  align-items: baseline !important;
+  margin-right: -15px;
+  margin-left: -15px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c0 > .sc-bdVaJa {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+@media (min-width:576px) {
+  .c0 {
+    -webkit-align-items: center !important;
+    -webkit-box-align: center !important;
+    -ms-flex-align: center !important;
+    align-items: center !important;
+  }
+}
+
+@media (min-width:768px) {
+  .c0 {
+    -webkit-align-items: flex-end !important;
+    -webkit-box-align: flex-end !important;
+    -ms-flex-align: flex-end !important;
+    align-items: flex-end !important;
+  }
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[
+  `<Row /> should match the snapshot (direction: 'column', justifyContent: center, noGutter: true, wrap: 'nowrap') 1`
+] = `
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center !important;
-  -ms-flex-pack: center !important;
-  -webkit-box-pack: center !important;
   -webkit-justify-content: center !important;
   -ms-flex-pack: center !important;
   justify-content: center !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-box-direction: normal !important;
-  -ms-flex-direction: column !important;
   -webkit-flex-direction: column !important;
   -ms-flex-direction: column !important;
   flex-direction: column !important;
   margin-right: 0;
   margin-left: 0;
-  -ms-flex-wrap: nowrap;
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
@@ -44,21 +110,15 @@ exports[
 
 exports[`<Row /> should match the snapshot (direction: 'row')  1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal !important;
-  -webkit-box-direction: normal !important;
-  -ms-flex-direction: row !important;
   -webkit-flex-direction: row !important;
   -ms-flex-direction: row !important;
   flex-direction: row !important;
   margin-right: -15px;
   margin-left: -15px;
-  -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -79,21 +139,15 @@ exports[
   `<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-reverse', md: 'column' }) 1`
 ] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal !important;
-  -webkit-box-direction: normal !important;
-  -ms-flex-direction: row !important;
   -webkit-flex-direction: row !important;
   -ms-flex-direction: row !important;
   flex-direction: row !important;
   margin-right: -15px;
   margin-left: -15px;
-  -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -106,9 +160,6 @@ exports[
 
 @media (min-width:576px) {
   .c0 {
-    -webkit-box-orient: horizontal !important;
-    -webkit-box-direction: reverse !important;
-    -ms-flex-direction: row-reverse !important;
     -webkit-flex-direction: row-reverse !important;
     -ms-flex-direction: row-reverse !important;
     flex-direction: row-reverse !important;
@@ -117,9 +168,6 @@ exports[
 
 @media (min-width:768px) {
   .c0 {
-    -webkit-box-orient: vertical !important;
-    -webkit-box-direction: normal !important;
-    -ms-flex-direction: column !important;
     -webkit-flex-direction: column !important;
     -ms-flex-direction: column !important;
     flex-direction: column !important;
@@ -142,21 +190,16 @@ exports[
   `<Row /> should match the snapshot (justifyContent: 'space-between')  1`
 ] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify !important;
-  -ms-flex-pack: justify !important;
-  -webkit-box-pack: justify !important;
   -webkit-justify-content: space-between !important;
   -ms-flex-pack: justify !important;
   justify-content: space-between !important;
   margin-right: -15px;
   margin-left: -15px;
-  -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -176,20 +219,16 @@ exports[
   `<Row /> should match the snapshot (justifyContent: { xs: 'space-around', sm: 'flex-end', md: 'flex-start' }) 1`
 ] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-pack: distribute !important;
   -webkit-box-pack: space-around !important;
   -webkit-justify-content: space-around !important;
   -ms-flex-pack: space-around !important;
   justify-content: space-around !important;
   margin-right: -15px;
   margin-left: -15px;
-  -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -202,8 +241,6 @@ exports[
 
 @media (min-width:576px) {
   .c0 {
-    -webkit-box-pack: end !important;
-    -ms-flex-pack: end !important;
     -webkit-box-pack: end !important;
     -webkit-justify-content: flex-end !important;
     -ms-flex-pack: end !important;
@@ -213,8 +250,6 @@ exports[
 
 @media (min-width:768px) {
   .c0 {
-    -webkit-box-pack: start !important;
-    -ms-flex-pack: start !important;
     -webkit-box-pack: start !important;
     -webkit-justify-content: flex-start !important;
     -ms-flex-pack: start !important;
@@ -229,15 +264,12 @@ exports[
 
 exports[`<Row /> should match the snapshot (no properties set) 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-right: -15px;
   margin-left: -15px;
-  -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -257,15 +289,12 @@ exports[
   `<Row /> should match the snapshot (noGutter: { xs: true, sm: false, md: true }) 1`
 ] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-right: 0;
   margin-left: 0;
-  -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -307,15 +336,12 @@ exports[
 
 exports[`<Row /> should match the snapshot (noGutter: true)  1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-right: 0;
   margin-left: 0;
-  -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -333,15 +359,12 @@ exports[`<Row /> should match the snapshot (noGutter: true)  1`] = `
 
 exports[`<Row /> should match the snapshot (wrap: 'wrap-reverse')  1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-right: -15px;
   margin-left: -15px;
-  -ms-flex-wrap: wrap-reverse;
   -webkit-flex-wrap: wrap-reverse;
   -ms-flex-wrap: wrap-reverse;
   flex-wrap: wrap-reverse;
@@ -362,15 +385,12 @@ exports[
   `<Row /> should match the snapshot (wrap: { xs: 'nowrap', sm: 'wrap-reverse', md: 'wrap' }) 1`
 ] = `
 .c0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-right: -15px;
   margin-left: -15px;
-  -ms-flex-wrap: nowrap;
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
@@ -383,7 +403,6 @@ exports[
 
 @media (min-width:576px) {
   .c0 {
-    -ms-flex-wrap: wrap-reverse;
     -webkit-flex-wrap: wrap-reverse;
     -ms-flex-wrap: wrap-reverse;
     flex-wrap: wrap-reverse;
@@ -392,7 +411,6 @@ exports[
 
 @media (min-width:768px) {
   .c0 {
-    -ms-flex-wrap: wrap;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
diff --git a/src/row/__snapshots__/index.test.ts.snap b/src/row/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..e2b274e
--- /dev/null
+++ b/src/row/__snapshots__/index.test.ts.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "default": [Function],
+}
+`;
diff --git a/src/row/index.test.ts b/src/row/index.test.ts
new file mode 100644
index 0000000..6d6acb4
--- /dev/null
+++ b/src/row/index.test.ts
@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});
diff --git a/src/row/renderAlignItems.test.ts b/src/row/renderAlignItems.test.ts
new file mode 100644
index 0000000..d874931
--- /dev/null
+++ b/src/row/renderAlignItems.test.ts
@@ -0,0 +1,79 @@
+import renderAlignItems from "./renderAlignItems";
+
+describe("renderAlignItems", () => {
+  it("should render align-items appropriate (input: 'baseline')", () => {
+    // arrange
+    const input = "baseline";
+
+    // act
+    const output = renderAlignItems(input);
+
+    // assert
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
+      "align-items:baseline!important;"
+    );
+  });
+
+  it("should render align-items appropriate (input: 'center')", () => {
+    // arrange
+    const input = "center";
+
+    // act
+    const output = renderAlignItems(input);
+
+    // assert
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
+      "align-items:center!important;"
+    );
+  });
+
+  it("should render align-items appropriate (input: 'flex-end')", () => {
+    // arrange
+    const input = "flex-end";
+
+    // act
+    const output = renderAlignItems(input);
+
+    // assert
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
+      "align-items:flex-end!important;"
+    );
+  });
+
+  it("should render align-items appropriate (input: 'flex-start')", () => {
+    // arrange
+    const input = "flex-start";
+
+    // act
+    const output = renderAlignItems(input);
+
+    // assert
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
+      "align-items:flex-start!important;"
+    );
+  });
+
+  it("should render align-items appropriate (input: 'stretch')", () => {
+    // arrange
+    const input = "stretch";
+
+    // act
+    const output = renderAlignItems(input);
+
+    // assert
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
+      "align-items:stretch!important;"
+    );
+  });
+
+  it("should render allign-items appropriate (input: undefined)", () => {
+    // arrange
+    const input = undefined;
+
+    // act
+    const output = renderAlignItems(input);
+
+    // assert
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("");
+  });
+});
diff --git a/src/row/renderAlignItems.ts b/src/row/renderAlignItems.ts
new file mode 100644
index 0000000..2b29eaa
--- /dev/null
+++ b/src/row/renderAlignItems.ts
@@ -0,0 +1,18 @@
+import RowAlignItems from "./RowAlignItems";
+import { css } from "../utils";
+
+export default (alignItems?: RowAlignItems): string => {
+  if (
+    alignItems === "baseline" ||
+    alignItems === "center" ||
+    alignItems === "flex-end" ||
+    alignItems === "flex-start" ||
+    alignItems === "stretch"
+  ) {
+    return css`
+      align-items: ${alignItems} !important;
+    `;
+  } else {
+    return "";
+  }
+};
diff --git a/src/row/renderDirection.test.ts b/src/row/renderDirection.test.ts
index 079abe7..25b4996 100644
--- a/src/row/renderDirection.test.ts
+++ b/src/row/renderDirection.test.ts
@@ -1,6 +1,3 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import renderDirection from "./renderDirection";
 
 describe("renderDirection", () => {
@@ -13,8 +10,7 @@ describe("renderDirection", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;" +
-        "-ms-flex-direction:column!important;flex-direction:column!important;"
+      "flex-direction:column!important;"
     );
   });
 
@@ -27,8 +23,7 @@ describe("renderDirection", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;" +
-        "-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important;"
+      "flex-direction:column-reverse!important;"
     );
   });
 
@@ -41,8 +36,7 @@ describe("renderDirection", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;" +
-        "-ms-flex-direction:row!important;flex-direction:row!important;"
+      "flex-direction:row!important;"
     );
   });
 
@@ -55,8 +49,7 @@ describe("renderDirection", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;" +
-        "-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important;"
+      "flex-direction:row-reverse!important;"
     );
   });
 
diff --git a/src/row/renderDirection.ts b/src/row/renderDirection.ts
index 8d80b94..7b8f6ae 100644
--- a/src/row/renderDirection.ts
+++ b/src/row/renderDirection.ts
@@ -8,17 +8,10 @@ export default (direction?: RowDirection): string => {
     direction === "row" ||
     direction === "row-reverse"
   ) {
-    const orient =
-      direction.indexOf("column") === -1 ? "horizontal" : "vertical";
-    const dir = direction.indexOf("-reverse") === -1 ? "normal" : "reverse";
-
     return css`
-      -webkit-box-orient: ${orient} !important;
-      -webkit-box-direction: ${dir} !important;
-      -ms-flex-direction: ${direction} !important;
       flex-direction: ${direction} !important;
     `;
+  } else {
+    return "";
   }
-
-  return "";
 };
diff --git a/src/row/renderGutter.test.ts b/src/row/renderGutter.test.ts
index cbc0b8d..1698e5b 100644
--- a/src/row/renderGutter.test.ts
+++ b/src/row/renderGutter.test.ts
@@ -1,6 +1,3 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import renderGutter from "./renderGutter";
 
 describe("renderGutter", () => {
diff --git a/src/row/renderJustifyContent.test.ts b/src/row/renderJustifyContent.test.ts
index c902af2..40a8b60 100644
--- a/src/row/renderJustifyContent.test.ts
+++ b/src/row/renderJustifyContent.test.ts
@@ -1,6 +1,3 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import renderJustifyContent from "./renderJustifyContent";
 
 describe("renderJustifyContent", () => {
@@ -13,7 +10,7 @@ describe("renderJustifyContent", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important;"
+      "justify-content:center!important;"
     );
   });
 
@@ -26,7 +23,7 @@ describe("renderJustifyContent", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;"
+      "justify-content:flex-end!important;"
     );
   });
 
@@ -39,7 +36,7 @@ describe("renderJustifyContent", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important;"
+      "justify-content:flex-start!important;"
     );
   });
 
@@ -52,7 +49,7 @@ describe("renderJustifyContent", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-ms-flex-pack:distribute!important;justify-content:space-around!important;"
+      "justify-content:space-around!important;"
     );
   });
 
@@ -65,7 +62,7 @@ describe("renderJustifyContent", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important;"
+      "justify-content:space-between!important;"
     );
   });
 
diff --git a/src/row/renderJustifyContent.ts b/src/row/renderJustifyContent.ts
index a89ccc3..6323c08 100644
--- a/src/row/renderJustifyContent.ts
+++ b/src/row/renderJustifyContent.ts
@@ -2,42 +2,17 @@ import RowJustifyContent from "./RowJustifyContent";
 import { css } from "../utils";
 
 export default (contentJustify?: RowJustifyContent): string => {
-  switch (contentJustify) {
-    case "center":
-      return css`
-        -webkit-box-pack: center !important;
-        -ms-flex-pack: center !important;
-        justify-content: center !important;
-      `;
-
-    case "flex-end":
-      return css`
-        -webkit-box-pack: end !important;
-        -ms-flex-pack: end !important;
-        justify-content: flex-end !important;
-      `;
-
-    case "flex-start":
-      return css`
-        -webkit-box-pack: start !important;
-        -ms-flex-pack: start !important;
-        justify-content: flex-start !important;
-      `;
-
-    case "space-around":
-      return css`
-        -ms-flex-pack: distribute !important;
-        justify-content: space-around !important;
-      `;
-
-    case "space-between":
-      return css`
-        -webkit-box-pack: justify !important;
-        -ms-flex-pack: justify !important;
-        justify-content: space-between !important;
-      `;
-
-    default:
-      return "";
+  if (
+    contentJustify === "center" ||
+    contentJustify === "flex-end" ||
+    contentJustify === "flex-start" ||
+    contentJustify === "space-around" ||
+    contentJustify === "space-between"
+  ) {
+    return css`
+      justify-content: ${contentJustify} !important;
+    `;
+  } else {
+    return "";
   }
 };
diff --git a/src/row/renderWrap.test.ts b/src/row/renderWrap.test.ts
index 219ab5b..175a16c 100644
--- a/src/row/renderWrap.test.ts
+++ b/src/row/renderWrap.test.ts
@@ -1,6 +1,3 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import renderWrap from "./renderWrap";
 
 describe("renderWrap", () => {
@@ -12,9 +9,7 @@ describe("renderWrap", () => {
     const output = renderWrap(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-ms-flex-wrap:nowrap;flex-wrap:nowrap;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("flex-wrap:nowrap;");
   });
 
   it("should render wrap appropriate (input: 'wrap')", () => {
@@ -25,9 +20,7 @@ describe("renderWrap", () => {
     const output = renderWrap(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-ms-flex-wrap:wrap;flex-wrap:wrap;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("flex-wrap:wrap;");
   });
 
   it("should render wrap appropriate (input: 'wrap-reverse')", () => {
@@ -38,9 +31,7 @@ describe("renderWrap", () => {
     const output = renderWrap(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("flex-wrap:wrap-reverse;");
   });
 
   it("should render wrap appropriate (input: undefined)", () => {
@@ -51,8 +42,6 @@ describe("renderWrap", () => {
     const output = renderWrap(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-ms-flex-wrap:wrap;flex-wrap:wrap;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("flex-wrap:wrap;");
   });
 });
diff --git a/src/row/renderWrap.ts b/src/row/renderWrap.ts
index 4838a97..06fb280 100644
--- a/src/row/renderWrap.ts
+++ b/src/row/renderWrap.ts
@@ -8,7 +8,6 @@ function renderWrap(wrap?: RowWrap): string {
 
   if (wrap === "nowrap" || wrap === "wrap" || wrap === "wrap-reverse") {
     return css`
-      -ms-flex-wrap: ${wrap};
       flex-wrap: ${wrap};
     `;
   }
diff --git a/src/theme/StyledComponents.ts b/src/theme/StyledComponents.ts
index 715e56e..0068619 100644
--- a/src/theme/StyledComponents.ts
+++ b/src/theme/StyledComponents.ts
@@ -1,7 +1,5 @@
-// These imports are needed for declaration files
-import * as _React from "react";
+import { ComponentClass, StatelessComponent } from "react";
 import * as styledComponents from "styled-components";
-// -------------------------------------------------------------------
 import { ThemedStyledComponentsModule } from "styled-components";
 import Theme from "./Theme";
 
diff --git a/src/theme/__snapshots__/index.test.ts.snap b/src/theme/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..de315cb
--- /dev/null
+++ b/src/theme/__snapshots__/index.test.ts.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "Theme": Object {},
+  "ThemeProperties": Object {},
+  "gutterWidth": [Function],
+  "styled": [Function],
+}
+`;
diff --git a/src/theme/index.test.ts b/src/theme/index.test.ts
new file mode 100644
index 0000000..6d6acb4
--- /dev/null
+++ b/src/theme/index.test.ts
@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});
diff --git a/src/utils/__snapshots__/index.test.ts.snap b/src/utils/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..d35c370
--- /dev/null
+++ b/src/utils/__snapshots__/index.test.ts.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "RenderProvider": Object {},
+  "css": [Function],
+  "flatten": [Function],
+  "map": [Function],
+  "percentage": [Function],
+  "render": [Function],
+  "resolve": [Function],
+}
+`;
diff --git a/src/utils/index.test.ts b/src/utils/index.test.ts
new file mode 100644
index 0000000..6d6acb4
--- /dev/null
+++ b/src/utils/index.test.ts
@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});
diff --git a/src/utils/percentage.test.ts b/src/utils/percentage.test.ts
index db85d1b..70b23b2 100644
--- a/src/utils/percentage.test.ts
+++ b/src/utils/percentage.test.ts
@@ -36,7 +36,7 @@ describe("percentage", () => {
 
   it("should return '0' (input: 13)", () => {
     // arrange
-    const input = undefined;
+    const input = 13;
 
     // act
     const output = percentage(input);
diff --git a/test.config.ts b/test.config.ts
new file mode 100644
index 0000000..665bd7e
--- /dev/null
+++ b/test.config.ts
@@ -0,0 +1,5 @@
+import { configure } from "enzyme";
+import ReactSixteenAdapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new ReactSixteenAdapter() });
+jest.mock("./src/utils/bootstrap", () => jest.fn());
diff --git a/tsconfig.json b/tsconfig.json
index ce5d0f6..69917c3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,19 +4,21 @@
     "module": "commonjs",
     "target": "es5",
     "lib": ["es6", "dom"],
-    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
     "allowJs": false,
+    "declaration": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "jsx": "react",
     "moduleResolution": "node",
-    "rootDir": "src",
-    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedParameters": false,
-    "declaration": true
+    "rootDir": "src",
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "suppressImplicitAnyIndexErrors": true
   },
   "include": ["src/**/*.ts*"],
   "exclude": ["src/__storybook__/**/*.*", "src/**/*.story.*", "src/**/*.test.*"]
diff --git a/tslint.json b/tslint.json
index e00c528..eafb08b 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,94 +1,28 @@
 {
-  "extends": ["tslint-react"],
+  "extends": ["tslint-sonarts", "tslint-react"],
   "rules": {
-    "align": [false, "parameters", "arguments", "statements"],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [true, "check-space"],
-    "curly": true,
-    "eofline": false,
-    "forin": true,
-    "indent": [true, "spaces"],
-    "interface-name": [true, "never-prefix"],
-    "jsdoc-format": true,
     "jsx-boolean-value": false,
-    "jsx-no-lambda": false,
     "jsx-no-multiline-js": false,
-    "label-position": true,
-    "max-line-length": [false, 120],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": true,
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      false,
-      "log",
-      "error",
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-consecutive-blank-lines": true,
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-variable": true,
-    "no-empty": true,
-    "no-eval": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": false,
-    "no-unused-expression": false,
-    "no-use-before-declare": false,
-    "one-line": [
-      true,
-      "check-catch",
-      "check-else",
-      "check-open-brace",
-      "check-whitespace"
-    ],
-    "quotemark": [true, "double", "jsx-double"],
-    "radix": true,
-    "semicolon": [false, "always"],
-    "switch-default": true,
-
-    "trailing-comma": [false],
-
-    "triple-equals": [true, "allow-null-check"],
-    "typedef": [true, "parameter", "property-declaration"],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "variable-name": [
-      true,
-      "ban-keywords",
-      "check-format",
-      "allow-leading-underscore",
-      "allow-pascal-case"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-module",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-typecast"
-    ]
+    "no-extra-semicolon": false,
+    "no-array-delete": false,
+    "no-accessor-field-mismatch": false,
+    "no-collection-size-mischeck": false,
+    "no-dead-store": false,
+    "no-element-overwrite": false,
+    "no-gratuitous-expressions": false,
+    "no-ignored-initial-value": false,
+    "no-ignored-return": false,
+    "no-misleading-array-reverse": false,
+    "no-redundant-boolean": false,
+    "no-return-type-any": false,
+    "no-self-assignment": false,
+    "no-unused-array": false,
+    "no-use-of-empty-return-value": false,
+    "no-useless-cast": false,
+    "no-useless-intersection": false,
+    "no-variable-usage-before-declaration": false,
+    "parameters-max-number": false,
+    "prefer-immediate-return": false,
+    "use-type-alias": false
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 61709aa..87b8172 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3867,7 +3867,7 @@ iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
 
-immutable@^3.8.1:
+immutable@^3.8.1, immutable@^3.8.2:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
 
@@ -7456,16 +7456,18 @@ tslib@^1.8.0, tslib@^1.8.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
 
-tslint-config-prettier@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.10.0.tgz#5063c413d43de4f6988c73727f65ecfc239054ec"
-
 tslint-react@^3.3.3:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-3.5.1.tgz#a5ca48034bf583fb63b42763bb89fa23062d5390"
   dependencies:
     tsutils "^2.13.1"
 
+tslint-sonarts@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tslint-sonarts/-/tslint-sonarts-1.6.0.tgz#b21366029d83e2426d207174255bb2e09525e162"
+  dependencies:
+    immutable "^3.8.2"
+
 tslint@^5.9.1:
   version "5.9.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.9.1.tgz#1255f87a3ff57eb0b0e1f0e610a8b4748046c9ae"