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 @@
+
+
+
+
+ CSS Chassis - Tables
+
+
+
+
+
+
+
+
+CSS Chassis
+
+
+
+Tables
+
+Basic Table
+Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+
+
+
+
+ | ID |
+ Product |
+ Category |
+ Price |
+
+
+
+
+ | 1 |
+ T-Shirt |
+ Apparel |
+ $12.99 |
+
+
+ | 2 |
+ Sweat Shirt |
+ Apparel |
+ $24.99 |
+
+
+ | 3 |
+ Necklace |
+ Accessories |
+ $29.99 |
+
+
+
+
+Div Table
+Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+
+
+
+
+
ID
+
Product
+
Category
+
Price
+
+
+
+
+
1
+
T-Shirt
+
Apparel
+
$12.99
+
+
+
2
+
Sweat Shirt
+
Apparel
+
$24.99
+
+
+
3
+
Necklace
+
Accessories
+
$29.99
+
+
+
Full Width Table
+Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+
+
+
+
+ | ID |
+ Product |
+ Category |
+ Price |
+
+
+
+
+ | 1 |
+ T-Shirt |
+ Apparel |
+ $12.99 |
+
+
+ | 2 |
+ Sweat Shirt |
+ Apparel |
+ $24.99 |
+
+
+ | 3 |
+ Necklace |
+ Accessories |
+ $29.99 |
+
+
+
+
+
+
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,