Base Tables for Scales

These are the base styles for creating tables.

Requirements

Scales uses the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.

Installation

* NPM: npm install --save @scales/base-tables

Usage

Tables can get pretty crazy. Take a look at this example with some of the classes that Scales provides and how to use them:

``










































Lorem	Ipsum	Dolor	Sit
Sit	Dolor	03.788	Lorem
	Dolor	32.210	Lorem
	Dolor	47.797	Lorem
Sit	Dolor	09.640	Lorem
	Dolor	12.117	Lorem


`

Available Classes

* .Table
* .Numerical
* .Table--spacing-large
* .Table--spacing-medium
* .Table--spacing-small
* .Table--bordered
* .Table--bordered-inside
* .Table--bordered-rows
* .Table--bordered-rows-inside
* .Table--bordered-columns
* .Table--bordered-columns-inside
* .Table--striped-odd
* .Table--striped-even
* .TableHighlight
* .Table--fixed

Available Variables

* $table-padding-large
* $table-padding-medium
* $table-padding-small
* $table-border-width
* $table-border-style
* $table-border-color
* $table-stripe-color
* $table-highlight-color
* $table-highlight-text-color
* $table-heading-alignment
* $table-cell-alignment

$3

#### The Scales Namespace Variable

All Scales patterns expose the $scales-namespace variable.

$scales-namespace accepts a string that will prefix all Scales classes. The default value is null.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. b- for "base", o- for "objects", u- for utilities, and c- for "components".

This pattern exposes the $scales-base-class-namespace variable.

$scales-base-class-namespace accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is null.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

`
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
`

Extending

These table styles simply provide a base for tables. In your project or theme, you can easily extend tables for your own purposes. For example:

`
// Change variables before importing
$table-border-color: red;
$table-border-style: dashed;

// Import tables partial
@import your-project/scalescss/base-tables/tables

//
// Primary table styles
///
.Table--primary {
th {
background-color: #0074D9;
color: #fff;
border: 0;
}

tr:hover {
background-color: #f8fb9b;
color: #333;
}
}
`
`










































Lorem	Ipsum	Dolor	Sit
Sit	Dolor	03.788	Lorem
	Dolor	32.210	Lorem
	Dolor	47.797	Lorem
Sit	Dolor	09.640	Lorem
	Dolor	12.117	Lorem


``