Kendo UI Web vs. Twitter Bootstrap

5 posts, 0 answers
  1. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 26 Feb 2013 Link to this post

    When using both Kendo UI Web and Twitter Bootstrap there are some issues regarding CSS styling.

    For example, create a grid with a pager. Then look at the numbers in the pager. The number of the selected page is some pixels below the other numbers. This results from Bootstrap having a line-height of 20px for the li element. The same Kendo rule with 24 px has lower priority and is ignored.

    It doesn't matter whether I use the Bootstrap theme within Kendo, or take any other theme.

    Should Kendo's Bootstrap theme correct such measuring details?

    Michael G. Schneider
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Feb 2013 Link to this post

    Hello Michael,

    Generally, we are reluctant to fix styling issues, which are caused by rather unwisely used CSS selectors in other third-party libraries. The number of possibilities for such problems to occur is practically limitless and in order to ensure they do not occur, we should increase the specificity of all our selectors and add a lot of style rules that are normally not needed. This will make our stylesheets bigger and harder to maintain, with marginal benefit.

    I hope you agree with my point of view.

    In this particular case, I suggest you to override the Twitter Bootstrap styles for the Grid pager, for example:

    .k-pager-wrap  li
    {
        line-height: inherit ;
    }


    Regards,
    Dimo
    the Telerik team
    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 AJAX banner
  4. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 27 Feb 2013 Link to this post

    Hello Dimo,

    thanks a lot for the answer. I do understand your point of view. However, I do not agree with it.

    If libraries are combined that both play in the same area (in this case styling with CSS), problems will occur. Something has to be done, as the end-user cannot understand this at all. In this case I prefered if Telerik did something and not each of Telerik's customers.

    I also would not call this situation an "unwisely used CSS selector". The structure is as follows...

    <div class="k-pager-wrap">
       <ul>
          <li>
     
    .k-pager-wrap {
      line-height: 24px;
    }

    Telerik hopes that the line-height is not overridden on its way from "div" to "ul" to "li". However, in this case it is overridden by an explicit rule for the li-element. This rule seems reasonable, as Bootstrap also sets a global default font size.

    Would it really be that bad, if Telerik added a rule just as you showed in your answer? That way Telerik would be certain that the needed line-height actually exists on the li element.

    Michael G. Schneider
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Feb 2013 Link to this post

    Hi Michael,

    Let me provide some additional comments.

    >> If libraries are combined that both play in the same area (in this case styling with CSS), problems will occur.

    Not necessarily. Problems will occur only if a library targets elements in the global scope. This is a bad practice. We do not do it. Twitter Bootstrap does.

    >> I also would not call this situation an "unwisely used CSS selector".

    Cases in which targeting all elements in the web application globally are rarely justified and I don't think this is the case currently.

    li
    {
        line-height: 20px ;
    }

    First, the above rule violates the concept of the cascade (inheritance) and it would have been better if the style at least read:

    ul
    {
        line-height: 20px ;
    }

    Second, both CSS rules above are totally redundant, because there is already a 20px line-height defined for the <body> element and list items inherit that. So I would suggest submitting a pull request to Twitter Bootstrap to resolve this oversight.

    Imagine that you want a 18px line-height across your web application, so you set it to the <html> or <body> element, and everything works. Then you add some third-party library and all of a sudden the <li> elements change their line-height, because of a conflicting global CSS selector. As a result, you need to transform your plain and simple CSS rule to something absurd such as:

    body,
    body li
    {
        line-height: 18px ;
    }


    >> Would it really be that bad, if Telerik added a rule just as you showed in your answer?

    Actually not, this is only a single CSS rule. However, I am strongly convinced that doing this is wrong, especially with the above pointers in mind. The Twitter Bootstrap CSS file sets custom styles for a lot of other HTML elements globally. Other third-party libraries may set custom global styles to something else. If we go down that path and fix all libraries in the world, we will punish ourselves and the majority of our customers for some edge cases that apply to only a small portion of them. I would like to stress once again upon the fact that we always build our stylesheets and scripts so that we don't break anything outside our widgets, and we expect the same from other libraries.

    Finally, Twitter Bootstrap allows creating a customized version of its stylesheet, which only includes what you really need. It is good to consider using this option.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. mgs
    mgs avatar
    163 posts
    Member since:
    Jan 2011

    Posted 28 Feb 2013 Link to this post

    Hello Dimo,

    thanks a lot fot the additional explanations. They made your point of view clear.

    Michael G. Schneider
Back to Top
UI for ASP.NET AJAX banner