Do you plan to create Bootstrap 3 compatible theme?

19 posts, 2 answers
  1. Answer
    Anton
    Anton avatar
    8 posts
    Member since:
    Aug 2013

    Posted 06 Aug 2013 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Answer
    Anton
    Anton avatar
    8 posts
    Member since:
    Aug 2013

    Posted 08 Aug 2013 Link to this post

    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?
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Anton
    Anton avatar
    8 posts
    Member since:
    Aug 2013

    Posted 08 Aug 2013 Link to this post

    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.
  8. Poh Joon
    Poh Joon avatar
    9 posts
    Member since:
    Feb 2012

    Posted 20 Aug 2013 Link to this post

    Bootstrap 3 now official. Hopefully will see Bootstrap v3 theme in next major version.
  9. Rich Coleman
    Rich Coleman avatar
    19 posts
    Member since:
    Jan 2008

    Posted 09 Oct 2013 Link to this post

    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 
  10. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 22 Nov 2013 Link to this post

    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.
  11. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 22 Nov 2013 Link to this post

    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?
  13. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Jay Mathis
    Jay Mathis avatar
    28 posts
    Member since:
    Oct 2004

    Posted 11 Dec 2013 Link to this post

    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.
  15. Jay Mathis
    Jay Mathis avatar
    28 posts
    Member since:
    Oct 2004

    Posted 11 Dec 2013 Link to this post

    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.
  16. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 12 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 12 Dec 2013 Link to this post

    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.
  18. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 28 Jul 2014 in reply to Dimo Link to this post

    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. :)
  20. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready