This is a migrated thread and some comments may be shown as answers.

How to compile less files correctly

3 Answers 250 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Atasoy
Top achievements
Rank 1
Atasoy asked on 21 Jul 2016, 10:00 AM

Hi there,

i just couldn't figure it out wich *.less files (and in what order) i have to import to get a correct css file.

My current approach is the following:

 

@theme: 'material';
@theme: 'office365';
@theme: 'metro';

@asset-path: "http://kendo.cdn.telerik.com/2016.2.714/styles/";
@theme-folder: e(`@{theme}.charAt(0).toUpperCase() + @{theme}.slice(1)`);

@import "kendo/web/kendo.@{theme}.less";
@image-folder: "@{asset-path}@{theme-folder}";
@import "kendo/web/kendo.common.core.less";
@import (optional) "kendo/web/kendo.common-@{theme}.core.less";
@import "kendo/web/kendo.common.less";
@import (optional) "kendo/web/kendo.common-@{theme}.less";
@import "kendo/web/kendo.@{theme}.mobile.less";

// kendo core files fix
@font-face {
font-family: "Kendo UI";
src: url("@{asset-path}images/kendoui.woff?v=1.1") format("woff"),
url("@{asset-path}images/kendoui.ttf?v=1.1") format("truetype"),
url("@{asset-path}images/kendoui.svg#kendoui") format("svg");
}

There are no errors, but some style just dont fit.

Bonus Question: If I want to use the type-custom.less from the theme builder, where did i have to add this file?

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 25 Jul 2016, 08:00 AM

Hello Atasoy,

The documentation of custom themes describes the approach of creating them. The easiest way to create them is to copy one of our theme files and customize its colors.

Regards,
Alex Gyoshev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Atasoy
Top achievements
Rank 1
answered on 29 Jul 2016, 09:21 AM

Thanks for not reading my question.

I found a solution working for me (as far as i see):

 

@kendo-path: "../../../resources/libs/kendo-ui/styles/";

@theme: 'metro';
@theme: 'office365';
@theme: 'material';

@asset-path: "http://kendo.cdn.telerik.com/2016.2.714/styles/";
@theme-folder: e(`@{theme}.charAt(0).toUpperCase() + @{theme}.slice(1)`);

@import "@{kendo-path}web/kendo.common.less";
@import (optional) "@{kendo-path}web/kendo.common-@{theme}.less";
@import "@{kendo-path}web/kendo.@{theme}.less";
@image-folder: "@{asset-path}@{theme-folder}";
@import "@{kendo-path}web/type-@{theme}.less";

// kendo core files fix
@font-face {
font-family: "Kendo UI";
src: url("@{asset-path}images/kendoui.woff?v=1.1") format("woff"),
url("@{asset-path}images/kendoui.ttf?v=1.1") format("truetype"),
url("@{asset-path}images/kendoui.svg#kendoui") format("svg");
}

@import "my_cutom_less_files.less"

0
Alex Gyoshev
Telerik team
answered on 02 Aug 2016, 06:53 AM

Hello Atasoy,

The documentation describes both how to create custom themes and how to use the ThemeBuilder output. What is the problem that is solved by the pasted code? There seem to be overrides (redefinition of variables), as well as includes of more than one common file, which does not make sense.The kendo.theme.less file should include its own type-theme file, so no need to import the latter, too. All of this is described in the documentation help topic that I recommended reading.

Regards,
Alex Gyoshev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
General Discussions
Asked by
Atasoy
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Atasoy
Top achievements
Rank 1
Share this question
or