sass-table-stylization
v1.0.1
Published
SASS mixin to simplify the styling of the table
Downloads
3
Maintainers
Readme
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.