• Stars
    star
    143
  • Rank 248,874 (Top 6 %)
  • Language
    HTML
  • Created over 6 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Monorepo for SASS-based Kendo UI themes

Kendo UI Themes Monorepo

Open in Visual Studio Code CI

kendo-themes is a lerna managed monorepo project for all Kendo UI themes that are used across the Kendo UI suites and Telerik UI for Blazor. The themes are built with sass using scss syntax. The syntax is compatible with both node-sass and dart-sass, as we currently does not use sass module system. Browser-specific properties are generated at build-time through PostCSS autoprefixer.

Setup

To setup to monorepo run in the root directory:

  npm run setup

The following npm commands are available:

  • To build all themes with node-sass, run npm run sass.
  • To build all swatches with node-sass, run npm run sass:swatches.
  • To build all themes with dart-sass, run npm run dart.
  • To build all swatches with dart-sass, run npm run dart:swatches.
  • To lint all themes, run npm run stylelint.

There are additional commands, which can be found in package.json and gulpfile.js.

Directory structure

  • build -- various bash scripts
  • lib -- files which we didn't put elsewhere
  • packages
    • theme-name
      • build -- theme specific files needed for building
      • docs -- per theme documentation
      • lib -- files that are not strictly scss, like swatches in json format
      • scripts -- theme specific javascript files
      • scss -- source of the themes
  • scripts -- various javascript files
  • tests -- visual tests

Development

Inside each theme source directory, there is a per-component directory containing the respective styles.

Note: we mostly have aptly named direcotries, so they match component names. In few cases, however, we chose different names. For example, multicolumncombobox is a mouthful, so its directory is dropdowngrid.

Each component consists of index file that is the entry points for component styles. Inside, we import core files, all dependencies (for example, datepicker needs calendar) and the components layout (metrics) and theme (appearance) files.

Note: We list all dependencies is because we want components to be compiled standalone without the developer needing to know which component depends on which other component. However, recursive importing creates exponentially large dist files, unles handled.

To workaround this limitation, we use a mixin -- import-once -- which takes care to output only once!

During development, the scss files are linted on every commit and built on every push command.

Changes in develop branch release a new package version every monday in the dev channel and in (version)-dev.(integer) format. To install the latest development version of a given theme, run npm install (themename)@dev -- for example, npm install @progress/kendo-theme-default@dev.

Stable channel is released manually trough a github action.

Visual tests

To guard against regressions and make pull request reviews easier, the CI build makes screenshots of the sample pages in packages/html/src/[component]/tests/*.html. This happens automatically for all feature branches. The sample pages contain static HTML that is the recommended rendering for components that use the theme.

To generate screenshots for a specific theme:

  1. Build the theme with npm run sass or npm run dart
  2. Run npm run create-screenshots <theme>, substituting <theme> with a theme name.

These steps will create new screenshots in tests/_output. Note that due to platform differences, all of the files will be marked as changed.

Embedding Resources

To avoid hosting-related issues in projects that use the themes, the resources are embedded by encoding them in the output CSS. For more details, refer to this issue.

To embed the latest resources:

  1. Run the npm run embed-assets task. The task generates a file with the same name which registers a Base64-encoded version in the $data-uris SCSS map. For example, the foo.woff font file will be encoded in a foo.scss file which can later be imported through @import './font/foo';.
  2. Inline the encoded file inside the CSS through map-get( $data-uris, 'foo.woff' ). For example:
$web-font-uri: map-get( $data-uris, 'WebComponentsIcons.woff' );

@font-face {
    font-family: 'WebComponentsIcons';
    src: url( $web-font-uri ) format( "woff" );
}

Documenting Variables

The available variables for customizing each theme are listed in the article on customization for each theme (docs/customization.md) The file is generated from the SCSS source files by running the npm run docs command.

To document a variable, use triple-slash comments (///) before its definition.

/// Variable description
$foo: 42 !default;

To group variables, use the @group directive.

/// Variable description
/// @group random
$foo: 42 !default;

/// Another variable description
/// @group random
$bar: 1024 !default;

To change the layout or the front meter of the generated help topic, change the docs/_templates/customization.md.njk source file.

License

This package is part of the following suites:

All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.

If you do not own a commercial license, the usage of this software shall be governed by the Apache License, Version 2.0.

Copyright © 2021 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.

More Repositories

1

kendo-ui-core

An HTML5, jQuery-based widget library for building modern web apps.
JavaScript
2,504
star
2

JustDecompileEngine

The decompilation engine of JustDecompile
C#
1,341
star
3

UI-For-UWP

This repo contains the source code for Telerik UI for Universal Windows Platform (UWP), which includes 20+ UI controls for developers building UWP applications.
C#
1,157
star
4

kendo-angular

Issue tracker - Kendo UI for Angular
TypeScript
444
star
5

xaml-sdk

The XAML SDK is an easy-to-use infrastructure with 1000+ developer focused examples for most of the Telerik WPF and Silverlight controls.
C#
440
star
6

JustAssembly

Assembly Diff and Analysis Tool
C#
359
star
7

blazor-ui

A collection of examples related to Telerik UI for Blazor Components: https://www.telerik.com/blazor-ui
C#
318
star
8

ui-for-aspnet-mvc-examples

A collection of Telerik UI for ASP.NET MVC examples
JavaScript
317
star
9

razor-converter

Tool for converting WebForms Views to Razor (C# Only)
C#
235
star
10

kendo-react

Issue tracker - KendoReact http://www.telerik.com/kendo-react-ui/
JavaScript
206
star
11

kendo-examples-asp-net-mvc

Kendo UI Examples for ASP.NET MVC
JavaScript
165
star
12

JustMockLite

Powerful and free mocking for .NET
C#
153
star
13

Android-samples

This repository is used to store all controls' samples for the Telerik UI for Android suite.
Java
146
star
14

kendo-ui-demos-service

Back-end service used for the Kendo UI Online Demos
C#
111
star
15

ui-for-aspnet-core-examples

A collection of Telerik UI for ASP.NET Core components examples
C#
105
star
16

telerik-xamarin-forms-samples

Repo contraining source for Telerik UI for Xamarin showcase apps
C#
99
star
17

kendoui-northwind-dashboard

A dashboard for Northwind built with Telerik UI for ASP.NET MVC.
JavaScript
96
star
18

justdecompile-plugins

C#
91
star
19

kendo-bootstrap-demo

HTML
89
star
20

kendo-examples-asp-net

C#
88
star
21

maui-samples

Repo containing source for Telerik UI for .NET MAUI showcase apps
75
star
22

fiddler-docs

Official documentation for Fiddler Classic - the community-trusted free Windows-only tool that logs HTTP(s) network traffic.
Ruby
73
star
23

fiddler-core-demos

Sample applications demonstrating usages of Progress® Telerik® FiddlerCore Embedded Engine.
C#
71
star
24

ng2-dashboard

Kendo UI for Angular w/NativeScript - Dashboard
TypeScript
65
star
25

kendo-vue

Issue tracker - Kendo UI for Vue http://www.telerik.com/kendo-vue-ui/
CSS
60
star
26

ios-sdk

Contains iOS controls SDK examples
Objective-C
51
star
27

blazor-docs

Public Documentation for Telerik UI for Blazor components.
JavaScript
49
star
28

xaml-docs

Public Documentation for Telerik UI for WPF and Silverlight
JavaScript
48
star
29

kendo-angular-quickstart-cli

Using Kendo UI with the Angular CLI
TypeScript
41
star
30

xamarin-forms-sdk

The Xamarin.Forms SDK is an easy-to-use infrastructure with many developer focused examples for the UI for Xamarin controls.
C#
37
star
31

blazing-coffee

A fully featured Blazor WebAssembly Demo showcasing the Telerik UI for Blazor components
C#
37
star
32

document-processing-sdk

The Document Processing SDK is an easy-to-use infrastructure containing developer focused examples for the libraries included in Telerik Document Processing.
C#
33
star
33

winforms-docs

This repository contains the content for the Telerik UI for WinForms documentation.
JavaScript
31
star
34

platform-friends-hybrid

A full-featured social demo app that shows how to integrate a wide range of Telerik Platform services into a Hybrid mobile application.
JavaScript
30
star
35

kendo-react-finance-portfolio

React Stock Watchlist App
TypeScript
29
star
36

kendo-ux

UX assets for Kendo UI
HTML
28
star
37

react-coffee-warehouse

JavaScript
27
star
38

blazor-ui-messages

Localization messages for Telerik UI for Blazor components: https://www.telerik.com/blazor-ui
26
star
39

kendo-theme-bootstrap

Kendo UI theme, based on Bootstrap v4
CSS
25
star
40

ajax-docs

Public Documentation for Telerik UI for ASP.NET AJAX
C#
23
star
41

blazor-dashboard

Blazor sample dashboard app with native components from Telerik
22
star
42

web-mail-sample-app-mvc

This is the WebMail MVC sample app
JavaScript
21
star
43

blazor-stocks

Blazor PWA sample app - My Stocks
20
star
44

nativescript-cloud

Used for cloud support in NativeScript CLI
TypeScript
18
star
45

kendo-angular-universal-demo

Sample Angular 2 Universal Application with Kendo UI for Angular 2
TypeScript
17
star
46

winforms-sdk

C#
17
star
47

UI-For-UWP-Demos

The UI for UWP Demos application demonstrates a great number of user case scenarios using Telerik UI for Universal Windows Platform (UWP) - a suite which includes 20+ UI controls for developers building UWP applications. http://www.telerik.com/uwp/
C#
17
star
48

kendo-react-build-a-sales-dashboard

Source code for Telerik.com blog article: "Let's Build a Sales Dashboard with React"
JavaScript
16
star
49

xamarin-forms-docs

This repository holds documentation for Xamarin Forms components
JavaScript
16
star
50

platform-friends-web

A full-featured social demo app that shows how to integrate a wide range of Telerik Platform services into a web application.
JavaScript
16
star
51

kendo-theme-default

The default, SCSS-based theme for Kendo UI
CSS
16
star
52

fiddler-everywhere-docs

Fiddler Everywhere is a high-performance, cross-platform web debugging proxy for any browser, system or platform. It is a web debugging tool that logs all HTTP(S) traffic between your computer and the Internet. It inspects and edits traffic, issue requests, and fiddle with incoming and outgoing data.
Shell
16
star
53

fiddler-core-docs

FiddlerCore is a .NET class library you can integrate into your .NET applications. FiddlerCore allows you to capture and modify HTTP and HTTPS traffic just like Fiddler, without any of the Fiddler UI.
CSS
15
star
54

scaffold-templates-core

Those templates are to be used with the built-in scaffold mechanism in ASP.NET Core.
HTML
14
star
55

kendo-intl

Kendo UI Internationalization
JavaScript
14
star
56

vue-dashboard

Kendo UI Vue.js wrappers dashboard with Git Issues, live at
Vue
14
star
57

kendo-ui-npm-example

A preview of the Kendo UI Core NPM package usage
JavaScript
14
star
58

aspnet-sdk

Telerik UI for ASP.NET AJAX allows you to build Web Forms web sites and apps for any browser and device in half the time
C#
14
star
59

admin-dashboard-sample-app-jquery

HTML
13
star
60

core-bootstrap-demo

HTML
13
star
61

reporting-samples

C#
12
star
62

mobile-cli-lib

Contains common infrastructure for CLIs - mainly AppBuilder, NativeScript, DDB and Proton.
TypeScript
11
star
63

platform-friends-android

A full-featured social demo app that shows how to integrate a wide range of Telerik Platform services into a native Android application.
Java
11
star
64

kendo-angular-messages

Localization Messages - Kendo UI for Angular
JavaScript
10
star
65

olympic-games-sample-app-mvc

This is the Olympic Games sample app
C#
9
star
66

kendo-react-getting-started

Used in the KendoReact documentation
JavaScript
9
star
67

kendo-react-dropdowns

Kendo UI DropDowns for React
JavaScript
9
star
68

kendo-angular-demo-aspnetcore-data

Kendo UI for Angular - Binding to an ASP.NET Core service
TypeScript
9
star
69

kendo-angular-quickstart-dotnet

Using Kendo UI for Angular with the .NET Core 3.x
TypeScript
9
star
70

xamarin-sdk

C#
9
star
71

kendo-common-tasks

Moved to https://github.com/telerik/kendo-build-tasks
JavaScript
8
star
72

devreach-blazor

C#
8
star
73

reporting-docs

Public Documentation for Reporting
JavaScript
8
star
74

kendo-icons

Kendo Icons
C#
8
star
75

mvc-bootstrap-demo

HTML
8
star
76

semantic-prerelease

A set of semantic-release scripts that allow publishing of prerelease versions behind dist-tags.
JavaScript
8
star
77

uwp-docs

telerik
HTML
8
star
78

kendo-react-nextjs

An example of the KendoReact Grid(Table) in NextJS application.
TypeScript
7
star
79

nativescript-starter-kits

NativeScript Cli Extension
TypeScript
7
star
80

kendo-react-messages

Localization Messages - KendoReact https://www.telerik.com/kendo-react-ui/components/
7
star
81

kendo-with-vuex

This is a sample application showing how Vuex can be used to feed the Kendo UI for Vue components
Vue
7
star
82

CodeSnippetsAndTemplates

This repository includes mainly custom shortcut code snippets and some templates for the Telerik and Kendo UI controls/widgets
Vim Snippet
7
star
83

docs-seed

Telerik Documentation Infrastructure
JavaScript
7
star
84

.net-blogsamples

public repository for demos related to Telerik .Net blog posts
JavaScript
7
star
85

kendo-theme-material

(PREVIEW) Kendo UI theme based on the Material Design guidelines
CSS
6
star
86

kendo-react-homepage-demo

A sample application showcasing the KendoReact Grid in action with GraphQL
JavaScript
6
star
87

kendo-react-sales-dashboard

This is a Dashboad created using KendoReact components
JavaScript
6
star
88

serverless-s3-upload

Uploads files/folders to AWS S3 bucket.
JavaScript
6
star
89

JustMockCourse

Sample code for Progress Telerik JustMock Virtual Classroom Course
C#
6
star
90

kendo-react-material-dashboard

JavaScript
6
star
91

quick-start-nativescript-template

JavaScript
5
star
92

nativescript-page-templates

Simple page templates for Vanilla NativeScript apps using JavaScript
JavaScript
5
star
93

admin-dashboard-sample-app-core

This repository holds the Admin Dashboard Sample application
C#
5
star
94

kendo-react-demo-aspnetcore-data

Kendo UI for React - Binding to an ASP.NET Core service
JavaScript
5
star
95

Blazor-Quick-Start-Videos

This is a sample which was built for the Blazor Quick Start video series.
HTML
5
star
96

finance-portfolio-sample-app-core

Finance Portfolio is a sample application built with components from the Telerik UI for ASP.NET Core suite
SCSS
5
star
97

figma-instarelinker-community

5
star
98

mvc-tripxpert-pwa

Placeholder repo for telerik/mvc-tripxpert-sample-app in PWA flavour
JavaScript
5
star
99

document-processing-docs

Public Documentation for Telerik Document Processing
JavaScript
5
star
100

kendo-vscode-extensions

TypeScript
5
star