search
Live DemoGitHub
githubEdit

Styling CSS/SASS/Themes

index

hashtag
CSS/SASS Styles

Load the default Bootstrap theme style or scroll down for SASS customization.

CSS

Default compiled css (if you use the plain Bootstrap Theme CSS, you could simply add it to your index.html file and be done with it).

Aurelia-CLI

<!-- Slickgrid Bootstrap theme, unless you use SASS import -->
<link rel="stylesheet" type="text/css" href="../node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css">

WebPack

// Bootstrap is optional, you can use other framework
import 'bootstrap/dist/css/bootstrap.css';

// if you use CSS instead of SASS
import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-default.css';
// or other themes
import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-material.css';
import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';

hashtag
Using built-in Themes

The Material & Salesforce Themes are using SVGs internally for the icons used by the grid. Each built-in Themes have CSS and SASS files associated with each theme. To take benefit of this, just import whichever CSS/SASS file associated with the Theme you wish to use.

with CSS

with SASS

hashtag
Using CSS Variables (instead of SASS)

You could change the SlickGrid styling with your own customization using CSS Variablesarrow-up-right. The variables that you can use (over 800 of them) are all predefined as SASS variables in the _variables.scssarrow-up-right file, you will simply have to rename the $slick- prefix with a --slick- prefix to the variable name to use them as CSS Variables. To be clear, you don't need SASS but the variables names were all declared as SASS and that is what the lib will use internally but you can optionally use them all as plain CSS Variables.

For example, if we take the following 3 SASS variables ($slick-header-menu-display, $slick-primary-color-dark and $slick-header-filter-row-border-bottom) we can use the CSS Variables equivalent as the following

Note: you could use :host to only change current grid styling, however there are many DOM elements that are appended to the DOM body (Grid Menu, Column Picker, Select Filter/Editor, Context Menu, ...) and the styles will not be applied when simply using :host and so in most cases you would want to use :root (if possible) to make a global change which will also work with elements appended to the body. Also note that :root is not available in Salesforce LWC and so you unfortunately won't be able to style everything in Salesforce.

hashtag
Using Custom SVGs with SASS

You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables ending with the suffix "icon-svg-path" which allow you to override any of the SVG vector path. All SVG icons are generated by following AntFu's icons in pure CSSarrow-up-right approach. If you want create your own SVGs in pure CSS, you can use the generateSvgStyle() function from our sass-utilities.scssarrow-up-right (take a look at the slickgrid-icons.scssarrow-up-right on its usage)

with SVG

the SASS equivalent is a lot easier to override

hashtag
SVG icons

The project has a few built-in icons (sort, grouping, row detail, row move, row selection) and you can change them via SASS (or CSS with a bit more work). For that reason, all Styling Themes Since this release now has pure CSS SVG icons, I decided to delete any Font-Awesome references (mostly in the Bootstrap Theme) because all the built-in icons are now all SVG icons (sort, grouping, row detail, row move) (you can change them using SASS). However, there are a few plugins that use external icons via CSS classes (mostly all menu plugins like Header Menu, Grid Menu, Content Menu, ...) and for that reason all Styling Themes now include default SVG icons (even the Bootstrap Theme).

What if you want to use your own font/SVG library? This can be answered in 2 parts:

  1. the built-in icons can only be changed via SASS (or CSS with extra work), see above on how to change them.

  2. for all other area using icons via CSS classes (e.g. all menu plugins), you can use the "lite" Themes and then make sure to update all the menu plugins with the correct CSS classes, for example the global grid options of the Grid Menu is configured with the following CSS classes and you'll want to remap them with the correct CSS classes to fit your need:

and here's the file size difference with the "lite" version

image

hashtag
How to change SVG color?

The following works for both CSS and SASS

The new version 5.x of this project is now creating SVG icons as pure CSS, this mean that you can colorize the icons the same way that you would change a text color. We also provide a few different color CSS classes which start with the prefixes $color- (e.g. $color-primary).

hashtag
SVG Colors - CSS Classes

Since SVG can now be colorize via the color the same as any other text, there isn't much to do. However a small subset of default colors is provided that can be used with the SVG icons or any text (basically took the same colors used by Bootstrap herearrow-up-right). We also added a light and dark shades for of each colors (except color-light, color-dark since there's no need), they both use a 6% lighter/darker shades (you can override the shade with $color-lighten-percentage and the same for darken). These colors can be used with the color-X (for example color-primary), also note that the primary color will follow your $slick-primary-color that you might have already overriden (it could also be different in each styling theme, shown below is the Salesforce theme colors). If you find that the colors are not exactly the colors you're looking for, we've also took some colors taken from UiKitarrow-up-right and tagged them as color-alt-X.

NOTE 1: The colors.scss is only included in the Material and Salesforce Themes since those are the only 2 themes currently using SVGs. If you wish to use these colors then simply add the necessary css/scss file.

image

HTML Color Test

Last updated