sass-table-stylization

Sass mixin that allows you to simplify styling table and making it responsive. Originally written for use at Stock Price Alert Service

Installing

npm

To install sass-table-stylization using npm, simply run:

npm install sass-table-stylization

If you'd like to save sass-table-stylization as a dependency in your project's package.json file, run:

npm install sass-table-stylization --save

Bower

To install sass-table-stylization using bower, simply run

bower install sass-table-stylization

If you'd like to save sass-table-stylization as a dependency in your project's bower.json file, run:

bower install sass-table-stylization --save

Manually

Simply download the _sass_table_stylization.scss file from this repo and place it somewhere useful.

curl

curl -O https://raw.githubusercontent.com/MaksymBlank/sass-table-stylization/master/_sass_table_stylization.scss

wget

wget https://raw.githubusercontent.com/MaksymBlank/sass-table-stylization/master/_sass_table_stylization.scss

Using

Import _sass_table_stylization.scss in your main.scss

@import './_sass_table_stylization';

Include mixin _responsive_table($options, $styles, $media_query)

@include _responsive_table($options, $styles, $media_query);

Example

$options:   (
            table_name: 'responsive-table',
            properties: ('display', 'color', 'text-align')
            );

$styles:    (
            name: (null, grey, center),
            price: (null, blue, null),
            status: (null, null, center)
            );

$media_query: null // Making styles for all devices

@include _responsive_table($options, $styles, $media_query);

// OUTPUT
/*
    .responsive-table-name{
        // display is missing because it equals null
        color: grey;
        text-align: center;
    }

    .responsive-table-price{
        // display is missing because it equals null
        color: grey;
        // text-align is missing because it equals null
    }

    .responsive-table-status{
        // display is missing because it equals null
        // color is missing because it equals null
        text-align: center;
    }
*/

Parameters

$options:map

• table_name:string - Name of the table's class.

• table_set_title:boolean - true if you want to add class with the same name, but 'title' at the end of the class's name for columns titles

• properties:list - List of all properties that will be using in table

• title_properties_no_show:list - List of all properties that will be forbidden to use in titles classes

$styles:map

• any_name:map_key( properies:list ) - list of all properties for current name.

e.g. if any_name equals 'price', it will make the class '.responsive-table-price' in the output above. The list of properties will be added to the current class.

.table_name-styles_map_key {
     properties[i]: styles_map_key_value[i];
}

$media_query

$media_query:number - max-width breakpoints for @media()

@media(max-width: $media_query + 'px'){
    ...
}

Example with 'title'

Set parameter table_set_title if you want to create special classes for titles (.table_name-styles_map_key-title)

$options:   (
            table_name: 'responsive-table',
            table_set_title: true, // Creates special classes for titles
            properties: ('display', 'color', 'text-align'),
            title_properties_no_show: ('color') // Ignore color property for titles
            );

$styles:    (
            name: (null, grey, center),
            price: (null, blue, null),
            status: (null, null, center)
            );

$media_query: null // Making styles for all devices

@include _responsive_table($options, $styles, $media_query);

// OUTPUT
/*
    .responsive-table-name{
        // display is missing because it equals null
        color: grey;
        text-align: center;
    }

    .responsive-table-name-title{
        // display is missing because it equals null
        // color: grey; color is ignored due to "title_properties_no_show"
        text-align: center;
    }

    .responsive-table-price{
        // display is missing because it equals null
        color: grey;
        // text-align is missing because it equals null
    }

    // .responsive-table-price-title{
    //    display is missing because it equals null
    //    color is ignored due to "title_properties_no_show"
    //    text-align is missing because it equals null
    // }

    .responsive-table-status{
        // display is missing because it equals null
        // color is missing because it equals null
        text-align: center;
    }

    .responsive-table-status-title{
        // display is missing because it equals null
        // color is missing because it equals null
        text-align: center;
    }
*/

Contribute

Please file an issue if you think something could be improved. Please submit Pull Requests when ever possible.