We have recently switched to Sass to make it easier to create and maintain DataViewsJS CSS files.
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:
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.
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.