Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit 826b1b3

Browse files
MichaelArestadkristyjy
MichaelArestad
authored and
kristyjy
committed
Tables: Add base table styles
Closes gh-151 Fixes gh-53
1 parent 66e5b35 commit 826b1b3

File tree

8 files changed

+224
-3
lines changed

8 files changed

+224
-3
lines changed

‎demos/tables.html

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Tables</title>
6+
<meta name="description" content="Table style examples">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="../dist/css/chassis.css">
9+
<link rel="stylesheet" href="demos.css">
10+
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
11+
</head>
12+
<body>
13+
14+
<h1>CSS Chassis</h1>
15+
16+
<hr>
17+
18+
<h2>Tables</h2>
19+
20+
<h3>Basic Table</h3>
21+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
22+
23+
<table class="table">
24+
<thead class="table-head">
25+
<tr class="table-row">
26+
<th class="table-heading" scope="col">ID</th>
27+
<th class="table-heading" scope="col">Product</th>
28+
<th class="table-heading" scope="col">Category</th>
29+
<th class="table-heading" scope="col">Price</th>
30+
</tr>
31+
</thead>
32+
<tbody class="table-body">
33+
<tr class="table-row">
34+
<th class="table-heading" scope="row">1</th>
35+
<td class="table-cell">T-Shirt</td>
36+
<td class="table-cell">Apparel</td>
37+
<td class="table-cell">$12.99</td>
38+
</tr>
39+
<tr class="table-row">
40+
<th class="table-heading" scope="row">2</th>
41+
<td class="table-cell">Sweat Shirt</td>
42+
<td class="table-cell">Apparel</td>
43+
<td class="table-cell">$24.99</td>
44+
</tr>
45+
<tr class="table-row">
46+
<th class="table-heading" scope="row">3</th>
47+
<td class="table-cell">Necklace</td>
48+
<td class="table-cell">Accessories</td>
49+
<td class="table-cell">$29.99</td>
50+
</tr>
51+
</tbody>
52+
</table>
53+
54+
<h3>Div Table</h3>
55+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
56+
57+
<div class="table">
58+
<div class="table-head">
59+
<div class="table-row">
60+
<div class="table-heading">ID</div>
61+
<div class="table-heading">Product</div>
62+
<div class="table-heading">Category</div>
63+
<div class="table-heading">Price</div>
64+
</div>
65+
</div>
66+
<div class="table-body">
67+
<div class="table-row">
68+
<div class="table-heading">1</div>
69+
<div class="table-cell">T-Shirt</div>
70+
<div class="table-cell">Apparel</div>
71+
<div class="table-cell">$12.99</div>
72+
</div>
73+
<div class="table-row">
74+
<div class="table-heading">2</div>
75+
<div class="table-cell">Sweat Shirt</div>
76+
<div class="table-cell">Apparel</div>
77+
<div class="table-cell">$24.99</div>
78+
</div>
79+
<div class="table-row">
80+
<div class="table-heading">3</div>
81+
<div class="table-cell">Necklace</div>
82+
<div class="table-cell">Accessories</div>
83+
<div class="table-cell">$29.99</div>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<h3>Full Width Table</h3>
89+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
90+
91+
<table class="table table-full">
92+
<thead class="table-head">
93+
<tr class="table-row">
94+
<th class="table-heading" scope="col">ID</th>
95+
<th class="table-heading" scope="col">Product</th>
96+
<th class="table-heading" scope="col">Category</th>
97+
<th class="table-heading" scope="col">Price</th>
98+
</tr>
99+
</thead>
100+
<tbody class="table-body">
101+
<tr class="table-row">
102+
<th class="table-heading" scope="row">1</th>
103+
<td class="table-cell">T-Shirt</td>
104+
<td class="table-cell">Apparel</td>
105+
<td class="table-cell">$12.99</td>
106+
</tr>
107+
<tr class="table-row">
108+
<th class="table-heading" scope="row">2</th>
109+
<td class="table-cell">Sweat Shirt</td>
110+
<td class="table-cell">Apparel</td>
111+
<td class="table-cell">$24.99</td>
112+
</tr>
113+
<tr class="table-row">
114+
<th class="table-heading" scope="row">3</th>
115+
<td class="table-cell">Necklace</td>
116+
<td class="table-cell">Accessories</td>
117+
<td class="table-cell">$29.99</td>
118+
</tr>
119+
</tbody>
120+
</table>
121+
122+
</body>
123+
</html>

‎scss/atoms/tables/_mixins.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*
2+
* ==========================================================================
3+
* Table mixins
4+
* ==========================================================================
5+
*/
6+
@mixin table($margin, $font-size) {
7+
display: table;
8+
margin: $margin;
9+
font-size: $font-size;
10+
text-align: left;
11+
}

‎scss/atoms/tables/_tables.scss

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* ==========================================================================
3+
* Tables
4+
* ==========================================================================
5+
*/
6+
7+
@import
8+
"dist/chassis",
9+
"mixins";
10+
11+
.table {
12+
@include table(map-get($table-base, margin), map-deep-get($table-base, font-size, font-size));
13+
}
14+
15+
.table-full {
16+
width: 100%;
17+
}
18+
19+
/* thead */
20+
.table-head {
21+
display: table-header-group;
22+
}
23+
24+
/* tbody */
25+
.table-body {
26+
display: table-row-group;
27+
}
28+
29+
/* tfoot */
30+
.table-foot {
31+
display: table-footer-group;
32+
}
33+
34+
/* tr */
35+
.table-row {
36+
display: table-row;
37+
}
38+
39+
/* th */
40+
.table-heading {
41+
display: table-cell;
42+
border-top-width: map-get($table-base, border-width);
43+
border-top-style: map-get($table-base, border-style);
44+
border-top-color: map-deep-get($table-base, border-color, dark);
45+
padding: map-get($table-base, padding);
46+
color: map-get($colors-text, light);
47+
font-weight: map-get($table-base, font-weight);
48+
font-size: map-get($table-base, thead-font-size);
49+
}
50+
51+
/* td */
52+
.table-cell {
53+
display: table-cell;
54+
border-top: map-get($table-base, border);
55+
padding: map-get($table-base, padding);
56+
}

‎scss/atoms/typography/_functions.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
* 1. font-size: em(14px);
1212
* 2. font-size: em(30px/14px);
1313
*/
14-
@function em($value, $context: map-get($typography-font-default, font-size)) {
14+
@function em($value, $context: map-get($typography-default, font-size)) {
1515
@return ($value / $context * 1em);
1616
}

‎scss/atoms/typography/_typography.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"mixins";
1111

1212
body {
13-
font: $typography-normal #{ map-get( $typography-font-default, font-size ) }/1.5 $typography-sans;
13+
font: $typography-normal #{ map-get( $typography-default, font-size ) }/1.5 $typography-sans;
1414

1515
@media ( max-width: $breakpoints-viewport-md-min ) {
1616
font-size: 16px;

‎scss/lint.scss

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@import
1818
"atoms/icons/icons",
1919
"atoms/typography/typography",
20+
"atoms/tables/tables",
2021
"atoms/buttons/buttons";
2122

2223
@import

‎scss/variables/tables.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
( function( root, factory ) {
2+
if ( typeof define === "function" && define.amd ) {
3+
define( [ "./chassis", "./colors", "./typograpy" ], factory );
4+
} else if ( typeof exports === "object" ) {
5+
require( "./chassis" );
6+
require( "./colors" );
7+
module.exports = factory( require( "./typography" ) );
8+
} else {
9+
root.chassis = factory( root.chassis );
10+
}
11+
}( this, function( chassis ) {
12+
13+
chassis.table = {
14+
"base": {
15+
name: "Table Element",
16+
value: {
17+
"margin": "0 0 1em",
18+
"font-size": () => "typography.default",
19+
"thead-font-size": "12px",
20+
"border-width": "1px",
21+
"border-style": "solid",
22+
"border-color": () => "colors.default",
23+
"padding": "12px",
24+
"font-weight": 400
25+
}
26+
}
27+
};
28+
29+
return chassis;
30+
} ) );

‎scss/variables/typography.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ chassis.typography = {
3434
name: "Line Height",
3535
value: lineHeight
3636
},
37-
"font-default": {
37+
"default": {
3838
name: "Type Style - Default",
3939
value: {
4040
"color": color,

0 commit comments

Comments
 (0)