Grid CSS

Grid CSS Styling

Smart HTML Elements use a pair of css files – smart.default.css and smart.[theme name].css. The default 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.default.css should be included before the second CSS file.

Figma

Smart.Grid UI Kit for Figma is available here. The purpose of this UI Kit is to make the collaboration between application developers and designers easier.

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.