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

Tables: Table styling #151

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Tables: Table styling #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 123 additions & 0 deletions demos/tables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions scss/atoms/tables/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*
* ==========================================================================
* Table mixins
* ==========================================================================
*/
@mixin table($margin, $font-size) {
display: table;
margin: $margin;
font-size: $font-size;
text-align: left;
}
56 changes: 56 additions & 0 deletions scss/atoms/tables/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
2 changes: 1 addition & 1 deletion scss/atoms/typography/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
2 changes: 1 addition & 1 deletion scss/atoms/typography/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions scss/lint.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
@import
"atoms/icons/icons",
"atoms/typography/typography",
"atoms/tables/tables",
"atoms/buttons/buttons";

@import
Expand Down
30 changes: 30 additions & 0 deletions scss/variables/tables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
} ) );
2 changes: 1 addition & 1 deletion scss/variables/typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ chassis.typography = {
name: "Line Height",
value: lineHeight
},
"font-default": {
"default": {
name: "Type Style - Default",
value: {
"color": color,
Expand Down