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

CSS for reuse

11 Answers 129 Views

General Discussions

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

11 Answers, 1 is accepted

answered on 13 Dec 2011, 04:37 PM

Hello Jon,

That's a very interesting question.

Currently as of now (2011 Q3) this is not supported. However, we are researching ways how to achieve this.

One good solution is the use of the so called primitives, which are heavily used in Kendo that allow some reuse of CSS.

In addition we are looking into meta CSS languages / frameworks such as LESS and SASS, not only to allow easier skin customization and extension, but to facilitate such tasks like reusing values used in the skins.

Greetings,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 13 Dec 2011, 04:49 PM

Hi Ivan,

It's been a while since I've really delved into the depths of CSS - I tend to just use it to a basic degree so haven't come across primitives, LESS or SASS. With respect to primitives is that something that is HTML5 only or will you look at reversing it into the ASP.NET controls?

It would be a tremendous aid to development if these were available, it would also mean that having a site with the option choice of skin is really feasible. As you know at the moment that's a fair bit of extra work.

By the way if you do go ahead with something like this, could a secondary level of it to be to expose the certain base colours via some generic functions. I use some non Telerik controls in my app and find that I have to do screen grabs, work out what the colours to use are then programatically assign them to the components - it would be much easier to do something like:

uxNonTelerikChart.BackgroundColour = Telerik.Web.UI.CurrentSkin.BackgroundColour

Then as the skin changes so do the non Telerik controls. I wouldn't mind all this kind of thing so much but being the sole developer here means that I have to look at every small aspect of the system and sometimes it would be nice to be able to ignore the style side of things :)

Best Regards,

Jon

answered on 16 Dec 2011, 04:50 PM

491980----CSS-for-reuse.zip

Hi Jon,

I am sorry I couldn't be blazing fast like the previous time, but you did write in out of office hours.

Anyway... The class names you requested are not present, but are easily extractable. The fun part was the automatic hook to get the proper skin name.

I did play around for some time with the idea and I came up with a good enough solution (attached). If you like it and think that it's manageable and useful, I will go ahead and complete it.

Greetings,
Ivan Zhekov
the Telerik team

answered on 02 Jan 2012, 11:10 AM

hello
We have similar problems. We always develop business application containing a lot of forms. in those forms we insert radcontrols but there is no controls to layout them, so we need to write a bunch of css. I appreciate the solution you provide, i will certainly think about integrating this in our projects.
But to make our (developpers) life easier, have you ever consider to create a control to layout asp and radcontrols,maybe a telerik css framework with the same telerik skins. That would be very great. I understand that some people would think that is a designer job but a simple layout could simplify and integrate a form nicely, of course if we want to customize the css we need to know it.

sebastien

answered on 23 Jan 2012, 09:44 AM

Hi,

Could you be more specific about that? Could you give us some live examples? We are focused to provide rich UI controls, but to a framework that will layout them. As you mentioned, this a designers decision. Also at a first I could see as a big problem the cross browser compatibility and the generation of a lot of additional CSS rules (this is what I see when using Adobe Dreamweaver in Designer mode).

Greetings,
Bozhidar
the Telerik team

answered on 25 Jan 2012, 02:17 PM

Sorry for jumping on the discussion a little late, but this is related to my situation. The thing is that I am pretty new to CSS and the like, so I didn't really get the "CSS for re-use" sample you sent.

I have the following situation: We are adding a RadTextBox at the top of most our RadTreeView:s, to provide searching inside the tree. The code works well, now it's time to the design.
We would like layout to be very similar to the filter-textboxes that sit on top of the RadGridView, when filtering is enabled (we have this enabled for all our grids).

Of course, we want the colors etc to follow the current skin. For the RadTreeView and RadTextBox it's easy - just set the .Skin-property on the server.
But how can we get the area that surrounds the RadTextBox to have the same colors etc as the filtering row on a RadGridView. I have been trying to fiddle with the CSS-classes, and set the class of the <tr>-element we use to "rgFilterRow", and the class of the <table>-element to "RadGridView_<Skin>", but that doesn't help.

What is the proper way to accomplish this?

Thanks!
/Fredrik

answered on 26 Jan 2012, 08:57 AM

Hi Fredrik,

Actually this is a topic for some general CSS practices, while as I understand from your question, it`s more specific and related to the controls and I`ll ask to pen a new support ticket for the specific issues. It will be good if you could also provide simple code and/or screenshot.

And generally just applying a CSS class form one element to another will not always apply all the styles. Most probably in your case the filtering row in the Grid has some CSS cascade that could not be applied to your RadInput wrapping element.

Kind regards,
Bozhidar
the Telerik team