Telerik Skins in LESS/SASS form

[Softec]

Hi

The Skin .css Files are quite big and repetitive (colors, fonts, borders). To customize these and maintain as well can become quite some work. That's why i'm asking if there is a LESS/SASS version available or planned for the near future? 

Thanks!

Some Links: 
http://sass-lang.com/
http://lesscss.org/

[Ivan Zhekov]

Hello Studach Joerg,

That's a very, very, very interesting question. We've been thinking on that for a while.

There are few setbacks though, which we haven't cleared so far:

1) The skins are not entirely based on images and / or borders. A single (unified) file will not do and we'll probably need to supply several;
2) The .NET / Windows based versions of SASS / LESS work a bit different from the original ruby ones. In additions there are differences between the .NET based versions too. For instance the one that comes with Mindscape Web Workbench has issues with some selectors e.g. &.someClass does not work quite the same;
3) That's one extra plugin / 3rd party thing to manage;
4) Windows based ruby interpreters are generally slow. This means that files need to be pre-generated for production.

That's pretty much it. There is of course the learning curve and other subjective factors, but apart from that there are not any (as of now) foreseeable obstacles to supply as SASS / LESS version of the controls.

I've logged this as a feature request. The roadmap for this Q release has already been set, so this "skin kit" will not make it on time. We are however flexible for the next release.

I will discuss it with other developers and eventually put it in the PITS for voting. If it's something the community wants -- we'll deliver it.

Best wishes,
Ivan Zhekov
the Telerik team

[Softec]

Hi Ivan, thanks for your reply

About your setbacks, I assumed there would still be a .less/.sass file for each skin. But it would be much easier too customize and tweak them. And I wasn't aware of any differences between the ruby version and the ones in the .NET. I'am using the dotless.Code.dll to minify the files on Pre-build and include them in a WebResource Assembly. Css files should be minified anyway, so it doesn't matter much which tool you use.  As pre-generation is a must anyway if you are using embedded resource files like Telerik suggests.

Greetings

[Ivan Zhekov]

Hello Joerg,

We did a further discussion with my colleagues, about using sass/less, about including it, about benefits, about performance etc.

We'll try to deliver at least one sass/less powered skin (probably Metro) as soon as possible. It will probably be included in the Skins Sharing Portal with detailed explanation how to use it.

If the reaction is good, we will probably include more skins.

Hopefully, the community will like it and this will turn into something really good.

Best wishes,
Ivan Zhekov
the Telerik team

[Allen]

I realize that I am coming late to this party, but I would vote for this too!  I think it would be great.

[Thomas]

Any news for the LESS/SASS Metro Style?

[Ivan Zhekov]

Hi, all.

First, in the realms of the Ajax controls, we have decided to go with SASS and not LESS. In particular, we went for the SCSS flavour, as it's more similar to ordinary CSS.

We have in this Q release planning to convert the base styles plus some skins to SASS. We'll release those in the Skin portal for anyone to download, customize and compile.

The Metro skin is more or less easier to work with, as it relies almost on solid colours alone and fairly little on background images.

We are delaying the release of the Metro SASS skin, as we have some new controls being ready and we would like to have skins for those too.

In addition, we need to provide some documentation. It's obvious that experienced developers will not need it, but there are developers who are not that advanced in the field of pre-proccessors for CSS.

And finally, we have yet to see how exactly to ship the SASS files as part of the releases -- would it be as is, would be compiled and then the code etc. Also, what will happen with the ordinary CSS files? Once we are ready with the answers and we are pleased by them, we'll ship the SASS skins with the releases. Until then, the SASS skins will live in the Skin portal.

So keep an eye on the Skin Portal (http://www.telerik.com/support/skins.aspx) and the Ajax blog (http://http://blogs.telerik.com/aspnet-ajax/).

Regards,
Ivan Zhekov
the Telerik team

[Eric]

Hello Ivan,

I'm also interested in a Sass/LessCss approach that works with Telerik controls.

Originally my team and I had agreed on less, but after reading this thread, it looks like Telerik is going the sass route. 

Is there a place to download a Telerik theme that implements sass yet?

Kind regards,
Eric

[Ivan Zhekov]

Hi, Eric.

To further clarify the Sass/Less thing: indeed, the Less preprocessor allows a simpler server deployment (dotless.dll) and even client-side deployment (less.js). However, we did need some features not found in the Less domain, so we went with Sass (Scss to be precise).

KendoUI on the other hand finds Less.js to be perfect for its needs so it goes along with Less. So it's not like Telerik chose one or the other.

Currently, the only Scss skin we have is the new MetroTouch. For performance reasons and file-size sake, we do not ship the Scss source files with the Telerik.Web.UI.dll file, but instead compile them locally and ship the end file.

That said, the source files are only available with the full source download and not for everyone. As soon as we have more control skins converted to Scss, we'll release them. Our 2012 Q3 target is to have most if not all control skins converted. Obviously complex and composite controls such as the RadScheduler will have to wait, as we do not want to break anyone's experience.

The release channel, as of now, will be the Skins portal, but with the growth of package managers like NuGet, we may consider alternative distribution channels (for the Skins ONLY).

Regards,
Ivan Zhekov
the Telerik team

[Nils C.]

Hi,

where can i download the sass version of the silk skin?

I couldn't find it anywhere.

Thanks in advance

[Ivan Zhekov]

Hi.

In your account profile, from the downloads page -- http://www.telerik.com/account/your-products/download-list.aspx?skucid=66 -- you can see all products you are eligible to download.

In each internal product download page (in your case the RadControls for ASP.NET Ajax), you can find links for the source code download.

Inside that archive you have all the relevant projects (WebUI, Design, Skins) and they hold the Sass files.

Regards,
Ivan Zhekov
the Telerik team

[Allen]

OK this problem of ponderous gigantic Telerik css files etc. has reared its ugly head again.   My application is trying to integrate a little single page side app written in Ruby which the main app will launch when needed.  The merits of this approach are debatable I guess, but the basic problem we are trying to solve is to achieve css consistency between the main application and the Ruby app  so they look alike.   The Ruby app is going to have only a handful of controls etc. Is there any sort of a white paper or best practice or other guidance on achieving this?

[Marin Bratanov]

Hello Allen,

You can use the browser dev toolbar or any other color picker of your choice to get the colors our controls use so you can apply them to any other part of the page.

If you are adding a simplistic set of form elements (like inputs, labels, headings, select elements) you can probably use a RadFormDecorator and tell it to .decorate(containerWhereHtmlWasAdded) as explained here. This could work if you add HTML nodes but not if you load an entire page or if it contains complex controls.

The third option I can suggest is rewriting the external page into a WebForm inside the current app so you can use the Telerik UI for it as well and better integrate it (e.g., as a user control or a page loaded in a RadWindow).

If you think it would help, I could perhaps get you the psd design file for the skin you use, if you open a support ticket.

Regards,
Marin Bratanov
Progress Telerik