Do you plan to create Bootstrap 3 compatible theme?

[Anton]

Yours Bootstrap theme works fine side by side with Twitter Bootstrap 2. There were a few problems, but I quickly resolve them with very little css code. Bootstrap 3 contains many breaking changes and of course Kendo UI Bootstrap theme does not work now at all.

[Dimo]

Hi Anton,

The purpose of the Kendo UI Bootstrap theme is to style Kendo UI widgets with Bootstrap colors. From this point of view, I am not sure what do you mean by "Kendo UI Bootstrap theme does not work now at all", because the Kendo UI CSS is normally not related to any other markup or styling on the page. If the Bootstrap 3 stylesheet contains CSS rules with unwisely used CSS selectors, which break other unrelated content on the page, I am not sure we will be able to (or should) "fix" that. Let me know if I am missing something.

And to answer your main question, we will probably update the Kendo UI Bootstrap theme colors for a major Kendo UI release (Q3 2013, Q1 2014), after Bootstrap 3 becomes official.

Regards,
Dimo
Telerik

[Dimo]

Hi Anton,

===

Update: The Bootstrap 3 CSS contains the following rule:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

I am completely unaware why this CSS rule exists, but I am also completely sure that it will break any website which includes Bootstrap 3. It should be removed.

===

The purpose of the Kendo UI Bootstrap theme is to style Kendo UI widgets with Bootstrap colors. From this point of view, I am not sure what do you mean by "Kendo UI Bootstrap theme does not work now at all", because the Kendo UI CSS is normally not related to any other markup or styling on the page. If the Bootstrap 3 stylesheet contains CSS rules with unwisely used CSS selectors, which break other unrelated content on the page, I am not sure we will be able to (or should) "fix" that. Let me know if I am missing something.

And to answer your main question, we will probably update the Kendo UI Bootstrap theme colors for a major Kendo UI release (Q3 2013, Q1 2014), after Bootstrap 3 becomes official.

Regards,
Dimo
Telerik

[Anton]

Thanks Dimo!

I include bootstrap.css after kendo.xxx.css primarily in order to have ability to layout application including forms with Kendo widgets (apply bootstrap classes like  "span4", "input-xxlarge" and so on). And you are right - that "box-sizing: border-box" breaks layouting of  Kendo widgets.

So you can not offer any workaround at the moment?

[Dimo]

Hello Anton,

Of course there is a workaround and it is pretty straightforward - override the above mentioned absurdity with another CSS rule, which targets Kendo UI widgets only.

.k-widget,
.k-widget *,
.k-animation-container *
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Regards,
Dimo
Telerik

[Anton]

Thanks Dimo!

Thanks for quick response. And I'm sorry for stupid questions. I'm pretty much begining front-end developer and still not well-versed in css.

[Poh Joon]

Bootstrap 3 now official. Hopefully will see Bootstrap v3 theme in next major version.

[Rich Coleman]

This is apparently why it has the box sizing

"Force border-box so that % widths fit the parent
    container without overlap because of margin/padding."

http://quirksmode.org/css/user-interface/boxsizing.html 

[Josh]

The above rule by Dimo I think is too generic.

I justed downloaded the latest version as of this post and I am using their new common-bootstrap.css file that contains this rule and while I get the rule's intention. 
It needs to be narrowed down in scope as it is causing a mixing of box-sizing models when using controls that have content placeholders.

Such controls like the splitter for example.  The rule will apply context-box for all my content within a splitter because it is a widget but when working with bootstrap3 I want all my content to go border-box.

Please double check me here and maybe we can adjust the next internal build if your team agrees with me here.

[Dimo]

Hi Josh,

I agree that the provided CSS selector is "too global", but so is the Bootstrap CSS rule, which applies a non-default box model to everything and breaks other third-party widgets. We would never use a universal selector (*) in normal scenarios.

I can suggest you to enforce border-box sizing back with

.k-splitter .k-pane *
{
      /* ... */
}

or something like that.


Regards,
Dimo
Telerik

[Josh]

Agreed and I have implemented such a rule but then it becomes an issue with nested widgets (nested splitters).   Personally I think border-box will become the de factor standard box model but until such day that it is agreed in the community which to choose I think vendors like yourself are in a tough spot for support and integration.

I applaud the integration efforts though as most vendors would not even care to try, do you know if there are any plans to make kendo border-box by default?

[Dimo]

Hi Josh,

This might change in the future, but for the time being, changing the default box sizing used by Kendo UI is highly unlikely.

Regards,
Dimo
Telerik

[Jay Mathis]

While I agree that 'border-box' will break a lot of existing sites, I can tell you from having worked with BootStrap 3 on several projects now, it is a lot more intuitive and easier to calculate element widths for various elements.  It is a shame that this wasn't the default box sizing model to begin with.

[Jay Mathis]

Also, since BootStrap is becoming more and more popular, it would be wise to go ahead and add the CSS rules to the kendo.css that forces all the Kendo controls to stay with the content-box model instead of hoping that the host environment doesn't change it to something else.

[Atanas Korchev]

Hi Jay,

We have already done that. The Kendo UI widgets have the required CSS rules. In addition I recommend checking the Using Kendo with Twitter Bootstrap help article.

Regards,
Atanas Korchev
Telerik

[Josh]

With the bootstrap code some global box sizing rules are being applied to widgets (see above css rules) but some of the widgets are content containers (IE the splitter)

I think it would be a great idea if the content container widgets were designed in such a way as the control utilizes whatever box sizing kendo dictates (it is your suite and I know it can be difficult to switch) without affecting the nested html controls.



That way the kendo controls are agnostic to the outside markup structure.

[Dimo]

Hello Josh,

>> "...it would be a great idea if the content container widgets were designed in such a way as the control utilizes whatever box sizing kendo without affecting the nested html controls"

This is true, however, it is impossible to achieve at this moment, as Twitter Bootstrap and similar libraries enforce non-default box sizing to everything (via the universal CSS selector *), so we are also forced to use the same selector to override box sizing for elements inside our widgets. We also can't guess how clients will nest our widgets.

Regards,
Dimo
Telerik

[JohnVS]

The actual truth of the matter is that Bootstrap is at the forefront of CSS technology by using border-box box sizing. It is insanely easier to calculate sizes with border-box, as has been covered all over the web in blogs and such. You guys do it a disservice by claiming that Bootstrap 3 uses "non-default box sizing." It's like you're saying they're doing something wrong by using the newest and best technology. Are you guys using this statement because you haven't been able to update your own code to use the newest technology of border-box box sizing? I would hope by you guys using this "non-default box sizing" statement all over that you don't lead web designers to think that your approach is better than Bootstrap's. They are staying up with the best and latest technology, and their offering is much easier to use because of using border-box box sizing. My two cents. :)

[Dimo]

Hello John,

While I certainly agree that the reverse box model makes some aspects of front-end development easier, let us not forget several things:

+ Kendo UI and Bootstrap were introduced at the same time (August 2011). Back then, Bootstrap was not popular, while Kendo UI was a successor of a product that existed since 2009 and it used the default box model

+ not everyone is using Bootstrap or the reverse box model

+ switching from one box model to the other now or at any moment would be the biggest front-end related breaking change that we could possibly inflict

+ while Bootstrap may need reverse box sizing for its own DOM elements (i.e. CSS classes), it is unclear why would they need to enforce such a sizing unconditionally to all elements on the page via the universal selector (*), thus breaking all other third-party libraries, which do not rely on border box sizing

Nevertheless, it may be possible to achieve seamless integration between the two products if we introduce some non-breaking changes to our CSS code. We are currently investigating this opportunity.

Regards,
Dimo
Telerik