_objects.tables.scss

Source code

View source

Author

Harry Roberts

Package Name

inuit-tables

Version

0.2.1

Dependences

The tables object provides basic styling for tables.

Markup
Demo
Modifiers
Settings

        <table class="table">
            <tr>
                <td>Foo</td>
                <td>Bar</td>
                <td>Baz</td>
            </tr>
        </table>

.table

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class="table">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

.table--fixed

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class=" table  table--fixed ">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

.table--compact

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class=" table  table--compact ">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

.table--cosy

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class=" table  table--cosy ">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

.table--comfy

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class=" table  table--comfy ">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

.table--rows

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class=" table  table--rows ">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

.table--columns

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class=" table  table--columns ">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

.table--cells

FooBar	Bar	Baz
Bar	Baz	Foo
Baz	Foo	Bar

see HTML code

<table class=" table  table--cells ">
                <tr>
                    <td>FooBar</td>
                    <td>Bar</td>
                    <td>Baz</td>
                </tr>
                <tr>
                    <td>Bar</td>
                    <td>Baz</td>
                    <td>Foo</td>
                </tr>
                <tr>
                    <td>Baz</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
            </table>

The tables object provides the following modifiers:

.table--fixed

.table--compact

.table--cosy

.table--comfy

.table--rows

.table--columns

.table--cells

.table--fixed forces each column of the table to have equal widths.

.table--compact , .table--cosy and .table--comfy all vary the spacing inside the table cells. Each one has its own dedicated variable to control that spacing:

          $inuit-table-padding--compact:  quarter($inuit-base-spacing-unit) !default;
          $inuit-table-padding--cosy:     halve($inuit-base-spacing-unit) !default;
          $inuit-table-padding--comfy:    $inuit-base-spacing-unit !default;

.table--rows highlights the table rows by assigning a horizontal border to each .

.table--columns highlights the table columns by assigning a vertical border to each .

.table--cells borders everything.

                // Predefine the variables below in order to alter and enable specific features.
                $inuit-table-namespace:         $inuit-namespace !default;
                
                $inuit-table-padding--compact:  quarter($inuit-base-spacing-unit) !default;
                $inuit-table-padding--cosy:     halve($inuit-base-spacing-unit) !default;
                $inuit-table-padding--comfy:    $inuit-base-spacing-unit !default;
                
                $inuit-table-border-width:      1px !default;
                $inuit-table-border-style:      solid !default;
                $inuit-table-border-color:      #ccc !default;
                
                $inuit-enable-table--fixed:     false !default;
                $inuit-enable-table--compact:   false !default;
                $inuit-enable-table--cosy:      false !default;
                $inuit-enable-table--comfy:     false !default;
                $inuit-enable-table--cells:     false !default;
                $inuit-enable-table--rows:      false !default;
                $inuit-enable-table--columns:   false !default;