JSPM

@progress/kendo-theme-default

2.12.9
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 167614
  • Score
    100M100P100Q184118F
  • License Apache-2.0

SASS resources for the default Kendo UI theme

Package Exports

  • @progress/kendo-theme-default/dist/all.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@progress/kendo-theme-default) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Build Status

Kendo UI Default Theme

Overview

The Kendo UI Default Theme is a SCSS-based theme for the Kendo UI components.

Currently, it is available for the following suites:

  • Kendo UI for React.
  • Kendo UI for Angular 2.

We are working on providing support for the Default Theme in Kendo UI jQuery suite too.

Basic Usage

For more information on how to use the Default Theme in Angular 2 and React projects, refer to its introductory topic.

Customization

To customize the Default Theme in one swoop, use the colors defined in the styles/_variables.scss file. Any change in this file is propagated to every component.

To style a specific component, use the variables used in its specific .scss file.

The theme is built by running npm run build. The dist/all.css file contains the complete theme that you can use in your project.

Development

Styles are split into components and the dependencies are managed by the import-once mixin. When configuring the styles, define them within an import-once block so that they are bundled once when required from multiple files.

During development, the SCSS files are linted on every commit and built on every push command. The theme package can be tested against a component by linking the theme in the components package.

Upon build, browser-specific properties are generated through the PostCSS autoprefixer.

When updating resources (images or fonts), run the npm run embed-assets task. This will generate a file with the same name, which registers a base64-encoded version in the $data-uris SCSS map. For example, the font file foo.woff will receive a foo.scss file, which can later be imported via @import './font/foo';. Then the base64 version can be inlined via map-get( $data-uris, 'WebComponentsIcons.woff' ). This is done in order to workaround problems with hosting resources when consuming the theme. See issue #41 for more details.