More in this section

Forums / Designing & Styling / Using Third Party Frameworks (Blueprint, Foundation, Bootstrap, Etc.) with SiteFinity

Using Third Party Frameworks (Blueprint, Foundation, Bootstrap, Etc.) with SiteFinity

33 posts, 0 answered
  1. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    13 Aug 2007
    18 Nov 2013 in reply to Laura
    Link to this post
    Hey Boyko,

    Well we could use a Bootstrap Tab widget where on the designer you say x number of tabs with titles and it'll automatically insert the layout regions for you ;)

    Just kidding although it would be great to have that. I've got a support ticket open already since I'm trying to add Bootstrap widgets for redist and those'll be send to you guys first for improvement and approval.

    I'm certainly not going to tell you how to do things or not do things but plenty folks have bitten dust trying to break open the Bootstrap grid ;) I'd say on average the Bootstrap notifications on Github have about one or two issues a week where someone tried to add a larger breakpoint and extend everything or tried to add a smaller one and ran into trouble because grids are tied to helper-classes etc etc. 

    If I may make a suggestion, the col-md-* has by default a container size of 970px like you said.
    So that 940 +2x15px - your grid is 960px hopefully including 2x10px so you end up with the same effective width.

    (Bootstrap has box-sizing border-box, which means paddings fall inside the box, where as your 960px design most likely has the paddings on the outside which was the default)

    If I were you, I'd just start development with the browser scaled, or put a wrapper around the whole site which forces a container to be 940px and thus simply ignore col-lg-*. Messing with the grid will only discourage you, while developing for a week and seeing the responsiveness of the platform will give you so much more understanding of the potential and benefit of the responsive design.

    As for the mixins - please don't remove them. Mixin's are like css functions which are re-used and littered throughout bootstrap. Erik's tutorial, is nice and shows how to do things semantically correct, but if you're uncomfortable with it, just ignore them. Bootstrap needs them and for you its a choice:

    For starters this makes much more sense in Firebug/Chrome Inspector
    <div class="col-sm-6 col-md-3 col-lg-4">I’m a div</div>

    <div class="divclasss">I’m a div</div>

    The latter is 'cleaner' for sure, but its way easier to double-click the first class statement in firebug and change the col-sm-6 to a col-sm-3 and instantly see your content reflow instead of enabling/disabling applied properties.

    And if you start from the beginning marking the content up as
    <div class="divclass col-sm-6 col-md-3 col-lg-4">I’m a div</div>

    once you're familiar and happy with the flow, you can easily remove the col-sm-6 etc from the html and open your .less file and replace it with .make-sm-column(6).

  2. Boyko Karadzhov
    Boyko Karadzhov avatar
    56 posts
    05 Dec 2016
    22 Nov 2013
    Link to this post

    Thank you, Jochem! That would be greatly appreciated!

    Boyko Karadzhov
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Richard
    Richard avatar
    164 posts
    21 Nov 2009
    20 Mar 2014
    Link to this post

    Hi Jochem

    I've downloaded and installed your latest version of Bootstrap (not deleting any of the theming) and all works fine as standard. I am trying to add in another stylesheet into global to hold all my mods and have listed in the cssLoadOrder.xml file to load last to override anything that goes before, but anything I put in there isn't being recognised. Is there anything I'm missing here? Is it correct that I c an leave all three versions of css in global and look at sfProject.css to see what I can override in my own stylesheet?

    Thanks for any help.



33 posts, 0 answered
1 2