Hi,
We today tried switching to the .less version of the Kendo styles to be able to use themebuilder colors elsewhere in our project as well, however we cannot get it to work.
We use DotLess to compile the .less files, however the @require lines seems to fail. Do you have any guidance on how to get this working or a sample project with it working? Our own less files works well, however they do not contain any require statemend, just some variables, mixins and nesting.
Thanks
/Victor
We today tried switching to the .less version of the Kendo styles to be able to use themebuilder colors elsewhere in our project as well, however we cannot get it to work.
We use DotLess to compile the .less files, however the @require lines seems to fail. Do you have any guidance on how to get this working or a sample project with it working? Our own less files works well, however they do not contain any require statemend, just some variables, mixins and nesting.
Thanks
/Victor
11 Answers, 1 is accepted
0
Hello Victor,
Alex Gyoshev
the Telerik team
We use a modified LESS engine that is shared on GitHub. The DotLess implementation is not supported.
Regards,Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
Rank 1
answered on 02 Aug 2012, 10:00 PM
Hi!
I see... That is a bit unfortunate I think... The js way of compiling (client side) for us makes debugging more cumbesome (due to the extra http requests) and also adds to page load time - DotLess seemed like a nice compromise.
If the engine is modified, I assume no other tools will work either... Are there any plans to merge the code to the main LESS branch to solve this eventually or to gradually adapt the code to the main LESS codebase or any other plans? What are the changes compared to the main brach / are they documented / is it possible to work around (to use other LESS tools to compile)?
Otherwise I suppose we could use the ThemeBuilder generated LESS in a separate document that we include in our code, but it really would be nice to have all styles in the same workflow.
/Victor
I see... That is a bit unfortunate I think... The js way of compiling (client side) for us makes debugging more cumbesome (due to the extra http requests) and also adds to page load time - DotLess seemed like a nice compromise.
If the engine is modified, I assume no other tools will work either... Are there any plans to merge the code to the main LESS branch to solve this eventually or to gradually adapt the code to the main LESS codebase or any other plans? What are the changes compared to the main brach / are they documented / is it possible to work around (to use other LESS tools to compile)?
Otherwise I suppose we could use the ThemeBuilder generated LESS in a separate document that we include in our code, but it really would be nice to have all styles in the same workflow.
/Victor
0
Hello Victor,
Alex Gyoshev
the Telerik team
> Are there any plans to merge the code to the main LESS branch to solve this eventually or to gradually adapt the code to the main LESS codebase or any other plans?
We have no immediate plans to do so. We will consider this, though -- feel free to open a feature request on uservoice.
> What are the changes compared to the main branch?
See the commit history from bundyo, gyoshev and petyosi. The changes are only the latest in the hosted repository (after Feb 1).
> Are they documented?
Not really. See the commit messages in the commit history.
> Is it possible to work around (to use other LESS tools to compile)?
You can use node.js to build the CSS from the LESS files. Instructions can be found on the official site (see manually calling the parser and compiler).
We understand that using the LESS templates is quite cumbersome. We will consider improving this process in the future.
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
Rank 1
answered on 03 Aug 2012, 07:44 PM
Hi,
Thanks for the clarifications. I have skimmed through the commits, but cannot say I fully know how much different your branch is compared to the master and how much changes would be needed to unite the two.
Either way I opened a Uservoice request since I still think it is a bit unfortunate to not be able to use the LESS code fully due to it being a custom version. The request is here: http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/3049932-use-official-less-syntax-for-themeroller-styles
/Victor
Thanks for the clarifications. I have skimmed through the commits, but cannot say I fully know how much different your branch is compared to the master and how much changes would be needed to unite the two.
Either way I opened a Uservoice request since I still think it is a bit unfortunate to not be able to use the LESS code fully due to it being a custom version. The request is here: http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/3049932-use-official-less-syntax-for-themeroller-styles
/Victor
0
Franz
Top achievements
Rank 1
Rank 1
answered on 08 Aug 2012, 07:40 AM
Hi Alex,
we are currently fighting with the same problem and so I've upvoted Victor's uservoice request.
I'd highly appreciate if Kendo UI uses the "offical", non-modified less engine and thus ensures dotless compatibility. I don't quite understand the motivation for the less.js fork entirely, things like linear gradients can be implemented as mixins (see https://github.com/dmitryf/elements/blob/master/elements.less) instead of core functions. Also the @require directive added in the fork doesn't make sense to me.
But complaints aside, what is Telerik's plan to ease the use of less templates in the future?
we are currently fighting with the same problem and so I've upvoted Victor's uservoice request.
I'd highly appreciate if Kendo UI uses the "offical", non-modified less engine and thus ensures dotless compatibility. I don't quite understand the motivation for the less.js fork entirely, things like linear gradients can be implemented as mixins (see https://github.com/dmitryf/elements/blob/master/elements.less) instead of core functions. Also the @require directive added in the fork doesn't make sense to me.
But complaints aside, what is Telerik's plan to ease the use of less templates in the future?
0
Hi guys,
We tried to use the official LESS release and submitted a pull request for the linear-gradient function, but it was not taken into account. I later closed the request after we added other changes. Unfortunately the linear-gradient issue is not as easy as just making another mixin. The linear-gradient function we added supports multiple gradients with any number of color stops while supporting the W3C and the old WebKit gradient syntax, and also generates multiple properties while using the same initial property - something not supported by the official LESS parser as functions don't have access to their calling properties.
However, since the @import/@requre issue can be solved with some changes to our internal build system, we can at least do that and upgrade to 1.3, then you'll be able to use the official LESS and dotLess releases to build the Kendo UI Web less files. We hope that we can do these changes for the Q3 release later this year.
For Kendo UI Mobile we can try again to push our changes upstream, but we can't promise that they will be accepted.
All the best,
Kamen Bundev
the Telerik team
We tried to use the official LESS release and submitted a pull request for the linear-gradient function, but it was not taken into account. I later closed the request after we added other changes. Unfortunately the linear-gradient issue is not as easy as just making another mixin. The linear-gradient function we added supports multiple gradients with any number of color stops while supporting the W3C and the old WebKit gradient syntax, and also generates multiple properties while using the same initial property - something not supported by the official LESS parser as functions don't have access to their calling properties.
However, since the @import/@requre issue can be solved with some changes to our internal build system, we can at least do that and upgrade to 1.3, then you'll be able to use the official LESS and dotLess releases to build the Kendo UI Web less files. We hope that we can do these changes for the Q3 release later this year.
For Kendo UI Mobile we can try again to push our changes upstream, but we can't promise that they will be accepted.
All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
Rank 1
answered on 08 Aug 2012, 04:24 PM
Hi and thanks for the updated info.
I cannot really comment on what the most appropriate path forward is, and I sure realize there is a reason for you guys creating your own version. I just think it is unfortunate that build tools supporting the official standard cannot be used. The solution for Web sounds very nice and for mobile I suppose it will be harder, even though we wish you the best of luck in convincing the LESS community!
We mostly use the LESS syntax to have colors/spacings/fonts/etc in variables in one place to be able to use them in other places in the solution, so probably (for our uses at least) _everything_ does not need to be in LESS syntax.
Thanks for looking into this issue anyway!
/Victor
I cannot really comment on what the most appropriate path forward is, and I sure realize there is a reason for you guys creating your own version. I just think it is unfortunate that build tools supporting the official standard cannot be used. The solution for Web sounds very nice and for mobile I suppose it will be harder, even though we wish you the best of luck in convincing the LESS community!
We mostly use the LESS syntax to have colors/spacings/fonts/etc in variables in one place to be able to use them in other places in the solution, so probably (for our uses at least) _everything_ does not need to be in LESS syntax.
Thanks for looking into this issue anyway!
/Victor
0
Jaap
Top achievements
Rank 2
Rank 2
answered on 20 Nov 2012, 12:21 PM
Am I right this is not fixed in the Q3 release?
0
Hello Jaap,
Kamen Bundev
the Telerik team
It depends. For Kendo UI Web, you can now use the official LESS parser (tested with version 1.3.1), and it should build the themes just fine -- we use the official LESS in the online ThemeBuilder application. However Kendo UI Mobile needs our linear-gradient() LESS extensions and can't be compiled with upstream LESS - you will have to use our fork for that.
Regards,Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jaap
Top achievements
Rank 2
Rank 2
answered on 22 Nov 2012, 09:56 AM
Ok, then it must be cause by the fact the dotless compiler is not yet version 1.3.1? (I have 1.3.0.5).
When I try to compile e.g. the file kendo.metro.less, I get this error:
Cannot compare objects in mixin guard condition on line 66 in file 'template.less':
[65]:
[66]: .window-shadow(@shadow-color) when not (@shadow-color = transparent) {
-----------------------------------^
[67]: border-color: @shadow-color;
[Done - Failed]
I see now that just today dotless 1.3.1 is released. I will install it now and let you know.
Regards, Jaap
When I try to compile e.g. the file kendo.metro.less, I get this error:
Cannot compare objects in mixin guard condition on line 66 in file 'template.less':
[65]:
[66]: .window-shadow(@shadow-color) when not (@shadow-color = transparent) {
-----------------------------------^
[67]: border-color: @shadow-color;
[Done - Failed]
I see now that just today dotless 1.3.1 is released. I will install it now and let you know.
Regards, Jaap
0
Jaap
Top achievements
Rank 2
Rank 2
answered on 22 Nov 2012, 10:19 AM
Dotless 1.3.1 is compiling fine! At least for the output delivered by the ThemeBuilder.
Some shipped Theme less files (like default and blueopal) do only compile with the -v compiler option, as these files don't have the same format as the output of the ThemeBuilder. Some variables are referenced before they are declared.
But if I want I can replace them with the output of the ThemeBuilder for that theme.
I don't know the exact effect of the -v compiler option, but if I compare the output with the theme css files delivered by Kendo, the output is correct.
Regards, Jaap
Some shipped Theme less files (like default and blueopal) do only compile with the -v compiler option, as these files don't have the same format as the output of the ThemeBuilder. Some variables are referenced before they are declared.
But if I want I can replace them with the output of the ThemeBuilder for that theme.
I don't know the exact effect of the -v compiler option, but if I compare the output with the theme css files delivered by Kendo, the output is correct.
Regards, Jaap