diff --git a/demos/tables.html b/demos/tables.html
new file mode 100644
index 0000000..29ef259
--- /dev/null
+++ b/demos/tables.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Chassis - Tables</title>
+ <meta name="description" content="Table style examples">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="../dist/css/chassis.css">
+ <link rel="stylesheet" href="demos.css">
+ <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
+</head>
+<body>
+
+<h1>CSS Chassis</h1>
+
+<hr>
+
+<h2>Tables</h2>
+
+<h3>Basic Table</h3>
+<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
+
+<table class="table">
+ <thead class="table-head">
+ <tr class="table-row">
+ <th class="table-heading" scope="col">ID</th>
+ <th class="table-heading" scope="col">Product</th>
+ <th class="table-heading" scope="col">Category</th>
+ <th class="table-heading" scope="col">Price</th>
+ </tr>
+ </thead>
+ <tbody class="table-body">
+ <tr class="table-row">
+ <th class="table-heading" scope="row">1</th>
+ <td class="table-cell">T-Shirt</td>
+ <td class="table-cell">Apparel</td>
+ <td class="table-cell">$12.99</td>
+ </tr>
+ <tr class="table-row">
+ <th class="table-heading" scope="row">2</th>
+ <td class="table-cell">Sweat Shirt</td>
+ <td class="table-cell">Apparel</td>
+ <td class="table-cell">$24.99</td>
+ </tr>
+ <tr class="table-row">
+ <th class="table-heading" scope="row">3</th>
+ <td class="table-cell">Necklace</td>
+ <td class="table-cell">Accessories</td>
+ <td class="table-cell">$29.99</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3>Div Table</h3>
+<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
+
+<div class="table">
+ <div class="table-head">
+ <div class="table-row">
+ <div class="table-heading">ID</div>
+ <div class="table-heading">Product</div>
+ <div class="table-heading">Category</div>
+ <div class="table-heading">Price</div>
+ </div>
+ </div>
+ <div class="table-body">
+ <div class="table-row">
+ <div class="table-heading">1</div>
+ <div class="table-cell">T-Shirt</div>
+ <div class="table-cell">Apparel</div>
+ <div class="table-cell">$12.99</div>
+ </div>
+ <div class="table-row">
+ <div class="table-heading">2</div>
+ <div class="table-cell">Sweat Shirt</div>
+ <div class="table-cell">Apparel</div>
+ <div class="table-cell">$24.99</div>
+ </div>
+ <div class="table-row">
+ <div class="table-heading">3</div>
+ <div class="table-cell">Necklace</div>
+ <div class="table-cell">Accessories</div>
+ <div class="table-cell">$29.99</div>
+ </div>
+ </div>
+</div>
+
+<h3>Full Width Table</h3>
+<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
+
+<table class="table table-full">
+ <thead class="table-head">
+ <tr class="table-row">
+ <th class="table-heading" scope="col">ID</th>
+ <th class="table-heading" scope="col">Product</th>
+ <th class="table-heading" scope="col">Category</th>
+ <th class="table-heading" scope="col">Price</th>
+ </tr>
+ </thead>
+ <tbody class="table-body">
+ <tr class="table-row">
+ <th class="table-heading" scope="row">1</th>
+ <td class="table-cell">T-Shirt</td>
+ <td class="table-cell">Apparel</td>
+ <td class="table-cell">$12.99</td>
+ </tr>
+ <tr class="table-row">
+ <th class="table-heading" scope="row">2</th>
+ <td class="table-cell">Sweat Shirt</td>
+ <td class="table-cell">Apparel</td>
+ <td class="table-cell">$24.99</td>
+ </tr>
+ <tr class="table-row">
+ <th class="table-heading" scope="row">3</th>
+ <td class="table-cell">Necklace</td>
+ <td class="table-cell">Accessories</td>
+ <td class="table-cell">$29.99</td>
+ </tr>
+ </tbody>
+</table>
+
+</body>
+</html>
diff --git a/scss/atoms/tables/_mixins.scss b/scss/atoms/tables/_mixins.scss
new file mode 100644
index 0000000..43cbe1a
--- /dev/null
+++ b/scss/atoms/tables/_mixins.scss
@@ -0,0 +1,11 @@
+/*
+* ==========================================================================
+* Table mixins
+* ==========================================================================
+*/
+@mixin table($margin, $font-size) {
+ display: table;
+ margin: $margin;
+ font-size: $font-size;
+ text-align: left;
+}
diff --git a/scss/atoms/tables/_tables.scss b/scss/atoms/tables/_tables.scss
new file mode 100644
index 0000000..d78c72b
--- /dev/null
+++ b/scss/atoms/tables/_tables.scss
@@ -0,0 +1,56 @@
+/*
+* ==========================================================================
+* Tables
+* ==========================================================================
+*/
+
+@import
+ "dist/chassis",
+ "mixins";
+
+.table {
+ @include table(map-get($table-base, margin), map-deep-get($table-base, font-size, font-size));
+}
+
+.table-full {
+ width: 100%;
+}
+
+/* thead */
+.table-head {
+ display: table-header-group;
+}
+
+/* tbody */
+.table-body {
+ display: table-row-group;
+}
+
+/* tfoot */
+.table-foot {
+ display: table-footer-group;
+}
+
+/* tr */
+.table-row {
+ display: table-row;
+}
+
+/* th */
+.table-heading {
+ display: table-cell;
+ border-top-width: map-get($table-base, border-width);
+ border-top-style: map-get($table-base, border-style);
+ border-top-color: map-deep-get($table-base, border-color, dark);
+ padding: map-get($table-base, padding);
+ color: map-get($colors-text, light);
+ font-weight: map-get($table-base, font-weight);
+ font-size: map-get($table-base, thead-font-size);
+}
+
+/* td */
+.table-cell {
+ display: table-cell;
+ border-top: map-get($table-base, border);
+ padding: map-get($table-base, padding);
+}
diff --git a/scss/atoms/typography/_functions.scss b/scss/atoms/typography/_functions.scss
index 9eb6a4a..6305a6b 100644
--- a/scss/atoms/typography/_functions.scss
+++ b/scss/atoms/typography/_functions.scss
@@ -11,6 +11,6 @@
* 1. font-size: em(14px);
* 2. font-size: em(30px/14px);
*/
-@function em($value, $context: map-get($typography-font-default, font-size)) {
+@function em($value, $context: map-get($typography-default, font-size)) {
@return ($value / $context * 1em);
}
diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss
index d919df2..7141e9c 100644
--- a/scss/atoms/typography/_typography.scss
+++ b/scss/atoms/typography/_typography.scss
@@ -10,7 +10,7 @@
"mixins";
body {
- font: $typography-normal #{ map-get( $typography-font-default, font-size ) }/1.5 $typography-sans;
+ font: $typography-normal #{ map-get( $typography-default, font-size ) }/1.5 $typography-sans;
@media ( max-width: $breakpoints-viewport-md-min ) {
font-size: 16px;
diff --git a/scss/lint.scss b/scss/lint.scss
index 427a48d..ec434b2 100644
--- a/scss/lint.scss
+++ b/scss/lint.scss
@@ -17,6 +17,7 @@
@import
"atoms/icons/icons",
"atoms/typography/typography",
+ "atoms/tables/tables",
"atoms/buttons/buttons";
@import
diff --git a/scss/variables/tables.js b/scss/variables/tables.js
new file mode 100644
index 0000000..da70202
--- /dev/null
+++ b/scss/variables/tables.js
@@ -0,0 +1,30 @@
+( function( root, factory ) {
+ if ( typeof define === "function" && define.amd ) {
+ define( [ "./chassis", "./colors", "./typograpy" ], factory );
+ } else if ( typeof exports === "object" ) {
+ require( "./chassis" );
+ require( "./colors" );
+ module.exports = factory( require( "./typography" ) );
+ } else {
+ root.chassis = factory( root.chassis );
+ }
+}( this, function( chassis ) {
+
+chassis.table = {
+ "base": {
+ name: "Table Element",
+ value: {
+ "margin": "0 0 1em",
+ "font-size": () => "typography.default",
+ "thead-font-size": "12px",
+ "border-width": "1px",
+ "border-style": "solid",
+ "border-color": () => "colors.default",
+ "padding": "12px",
+ "font-weight": 400
+ }
+ }
+};
+
+return chassis;
+} ) );
diff --git a/scss/variables/typography.js b/scss/variables/typography.js
index 9513888..f8cb7d1 100644
--- a/scss/variables/typography.js
+++ b/scss/variables/typography.js
@@ -34,7 +34,7 @@ chassis.typography = {
name: "Line Height",
value: lineHeight
},
- "font-default": {
+ "default": {
name: "Type Style - Default",
value: {
"color": color,