Developer's Guide
Using DataViewsJS
Using SASS
Version 1
Version 1

Using SASS

We have recently switched to Sass to make it easier to create and maintain DataViewsJS CSS files.

SASS improves CSS in the same way in which TypeScript improves JavaScript. It provides modularization, variables, structure, compile time syntax checking, selector nesting, functions, and more. Over the past few years, Sass has become the most popular CSS preprocessor, being supported by all the popular JavaScript frameworks and bundler tools.

Just like TypeScript, Sass is optional. You can use the default CSS files without SASS. But if you want to customize the DataViewsJS styles and create your own themes then we suggest you to use SASS.

If you choose to use SASS, you will have to choose a SASS tool too. We recommend:

Styles Package

DataViewsJS SASS files are published as a separate @grapecity/dataviews.styles package. The following SASS files are present in it:

_icon.scss              // glyphs and icons
_mixins.scss            // utility functions
_vars.scss              // theme variables
calendar.scss           // calendar styles
cardlayout.scss         // card layout styles
core.scss               // main grid styles
gantt.scss              // gantt view styles
horizontallayout.scss   // horizontal grid layout styles
masonry.scss            // masonry layout styles
searchbox.scss          // searchbox control styles
timeline.scss           // timeline styles
trellis.scss            // trellis styles
theme                   // bundled themes
    blue.scss
    bootstrap.scss
    flat.scss
    // etc

We follow the SASS conventions which state that the files with names starting with an underscore are included by other files and do not generate stand-alone CSS files.

The core.scss file is used to generate the main CSS file, gc.dataviews.core.css.

If you run this through the Web Compiler or any other SASS tool, you will get the regular core.css and core.min.css output.

Custom Themes

In addition to the standard gc.dataviews.core.css file, DataViewsJS also includes a few custom themes. Most of the themes are created by overriding the value of a few SASS variables. For example, the blue theme is created from the theme/blue.scss file:

// blue theme
@import '../vars';

$text-color: #003f59;
$selected-text-color: #fff;
$focused-text-color: $selected-text-color;
$bg-selected-color: #13688c;
$bg-focused-color: #8ed9f8;
$border-color: #a3d0e4;
$bg-even-color: #d9ecf5;
$bg-odd-color: #e6f2f8;
$odd-text-color: $text-color;
$bg-header-color: $bg-even-color;
$bg-header-color-dark: darken($bg-even-color, 10%);
$header-color: $text-color;

@import '../mixins';

@include theme;

The theme file sets SASS variables and then includes the theme mixin that generates a new theme. The output is a gc.dataviews.blue.css file that can be added to your HTML page to change the default appearance inherited from the main gc.dataviews.core.css file.

NOTE: The theme files are not self-contained. They extend the standard gc.dataviews.core.css file.