Grid CSS

Grid CSS Styling

Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

All Common CSS variables:

    Below is the list of CSS classes and properties used by the Smart.Grid.

    • --smart-grid-default-height: Used to set the default height.
    • --smart-grid-default-width: Used to set the default width.
    • --smart-grid-footer-height: Sets footer height.
    • --smart-grid-header-height: Sets header height.
    • --smart-grid-group-header-height: Sets group header height.
    • --smart-grid-row-height: Sets rows height.
    • --smart-grid-column-header-height: Sets columns height.
    • --smart-grid-filter-footer-height: Sets filter row height.
    • --smart-grid-aggregate-footer-height: Sets aggregates height.
    • --smart-grid-header-background-freeze: Sets row/column header background, when row/column is frozen.
    • --smart-grid-header-color-freeze: Sets row/column header text color, when row/column is frozen.
    • --smart-grid-column-menu-width: Sets column menu's width.
    • --smart-grid-column-menu-height: Sets column menu's height.
    • --smart-grid-column-buttons-width: Sets column buttons width.
    • --smart-grid-cell-color-freeze: Sets text color of cells, when row/column is frozen.
    • --smart-grid-cell-background-freeze: Sets background color of cells, when row/column is frozen
    • --smart-grid-cell-color-delete: Sets text color of cells, when row is deleted.
    • --smart-grid-cell-background-delete: Sets background color of cells, when row is deleted.
    • --smart-grid-cell-color-update: Sets text color of cells, when cell is updated..
    • --smart-grid-cell-background-update: Sets background color of cells, when cell is updated..
    • --smart-grid-cell-color-add: Sets text color of cells, when row is added..
    • --smart-grid-cell-background-add: Sets background color of cells, when row is deleted..
    • --smart-grid-cell-color-unbound: Sets text color of cells, when row is unbound.
    • --smart-grid-cell-background-unbound: Sets background color of cells, when row is unbound.
    • --smart-grid-cell-color-sort: Sets text color of cells, when column is sorted.
    • --smart-grid-cell-background-sort: Sets background color of cells, when column is sorted.
    • --smart-grid-cell-color-filter: Sets text color of cells, when column is filtered.
    • --smart-grid-cell-background-filter: Sets background color of cells, when column is filtered.
    • --smart-grid-group-row-vertical-offset: Sets grouped rows vertical offset.
    • --smart-grid-group-row-horizontal-offset: Sets grouped rows horizontal offset.
    • --smart-grid-template-columns: Sets Template columns.
    • --smart-grid-freeze-splitter-size: Sets frozen split bar size.
    • --smart-grid-resize-line-size: Sets resize line size.