+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Sitefinity - Twitter Bootstrap and HTML5 Boilerplate

Sitefinity - Twitter Bootstrap and HTML5 Boilerplate

20 posts, 1 answered
  1. Bill
    Bill avatar
    53 posts
    Registered:
    28 Jun 2006
    24 Feb 2013
    Link to this post

    I am looking for blogs, forums, useful links, and advice moving forward with a Bootstrap or Boilerplate, combination, with Sitefinity 5.4

    Any advice or information appreciated

    Jochem Bokker's contributions seem to be the best place to start after some googling. http://jbokkers.posterous.com/sitefinity-thunder-and-twitter-bootstrap

    Sitefinity 'bare minimum' styles & masterpage for use with Sitefinity v5 and Twitter Bootstrap v2.03
    https://gist.github.com/jbokkers/2923828 - Jochem Bokke
    Sitefinity v5 page layout templates using the Twitter Bootstrap grid columns - Michael Roper
    https://gist.github.com/michaelroper/2928782

    Twitter Bootstrap
    http://twitter.github.com/bootstrap/
    https://github.com/twitter/bootstrap

    Sitefinity Boilerplate - Jochem Bokke
    https://github.com/jbokkers/SF-BOILERPLATED

    HTML5 Boilerplate
    http://html5boilerplate.com/

    https://github.com/h5bp/html5-boilerplate

    Sitefinity Thread
    http://www.sitefinity.com/developer-network/forums/designing-styling/twitter-bootstrap-and-sitefinity

    Are there any others I am missing?

     Thx

     

     

     

    Answered
  2. Bill
    Bill avatar
    53 posts
    Registered:
    28 Jun 2006
    26 Feb 2013
    Link to this post

    How does going down this path with your template and theme mess you up when you add Sitefinity's responsive design license to your project?

    I am not use to the silence you get in the design and styling section, or is there just nothing more to add? 

    I also want to use the technique Flafel goes over with stripping the Sitefinity nav down to a simple list to allow any css and jQuery menu skinning you want to use or even Shadow Nav.  However I hate to go down that path only to find it completely clashes with the boilerplate responsive design navigation or any bootstrap combination attempts.

     Well regardless of any insight offered, if I make any ground on this I will of course post.


     

     

     

     

     

     

     

  3. Bill
    Bill avatar
    53 posts
    Registered:
    28 Jun 2006
    26 Feb 2013 in reply to Bill
    Link to this post
    I have to give it another try or three
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    26 Feb 2013 in reply to Bill
    Link to this post

    @Bill,

    Sorry for the silence.
    First, thanks for reposting my links. The blogpost describes the Github SF-BOILERPLATED project,

    Inside that SF-Boilerplated you'll find 2 themes/templates, one based on the default html5boilerplate, the other on Twitter Bootstrap.

    ---

    To be honest I've not really kept the Bootstrap part updated because need/desire seemed limited, but the Boilerplate part should be up to date (and that was a pure personal choice).

    HTML5Boilerplate is a system that basically gets everything setup right, but doesn't add any functionality - call it a 'reset'.

    Bootstrap on the other hand adds a lot of functionality on top of the reset. And because of that, it has two issues when it comes to working with Sitefinity:

    First, the grid system isn't compatible. Imagine a 2 column layout 25%+75%

    Sitefinity way:

    <div runat="server" class="sf_cols">
        <div runat="server" class="sf_colsOut sf_2cols_1_25">
            <div runat="server" class="sf_colsIn sf_2cols_1in_25">
                 
            </div>
        </div>
        <div runat="server" class="sf_colsOut sf_2cols_2_75">
            <div runat="server" class="sf_colsIn sf_2cols_2in_75">
             
            </div>
        </div>
    </div>

    Bootstrap way:

    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>

    As you can see they don't really stack up against each other. So you need to get creative and re-assign classes/styles to get them to play nice if you'd like to use the layout controls and have them benefit from Bootstrap's functionality.

    The second (although minor) problem you run into is xhtml vs html5. Sitefinity templates are still xhtml and the content blocks as well. 

    Bootstrap relies heavily on the html5 data-* attribute for its functionality. So by default when in Sitefinity you can't quickly open a content-block, go to html view and paste something like this:

    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

    The sitefinity RadEditor will simply strip out the data-toggle part.

    ---
    Anyway, as I said before the HTML5Boilerplate will set you up with a modern starting point, in a non-conflicting way.

    The Bootstrap framework, also functions great in combination with Sitefinity, but it's lay-outing difference and it's html5 attributes are things you need to work around.

    I'll see what I can do in terms of spare time now that Boilerplate v2.3 is out and try and update the Github project.

    Jochem

  5. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    26 Feb 2013 in reply to Bill
    Link to this post

    @Bill,

    Regarding your 2nd question.
    You need to base your design on a custom .master page (in order to make it html5 at the minimum) and skip the built-in templates.

    As for a theme, you need to build your own from scratch and incorporate h5bp/bootstrap yourself.

    (basically the reason why I setup the http://github.com/jbokkers/SF-BOILERPLATED project)

    As to licensing, it doesn't affect it at all, but as I pointed out in the first answer, Sitefinity's responsive design logic depends on those .sf_cols, .sf_2cols_1_25 classes, it doesn't know what to do with the .row-fluid and .span4 out of the box.

    You can assign a different stylesheet to the responsive design rules in which you can compensate ofcourse.

    Falafel's ShadowNav widget isn't specifically targetted or optimized for Bootstrap but it does strip out many of the default radcontrol styling and tag clutter and allows for easier transformations.

    But since you get the full source-code, you can easily change it's layouting template to whatever you'd like to have.

  6. Bill
    Bill avatar
    53 posts
    Registered:
    28 Jun 2006
    26 Feb 2013 in reply to Jochem Bökkers
    Link to this post

    Thank you very much for your explanation, above and beyond.

    Very much appreciated Jochem

     

  7. Bill
    Bill avatar
    53 posts
    Registered:
    28 Jun 2006
    11 Mar 2013 in reply to Jochem Bökkers
    Link to this post

    I do admit I check that github site a few times a day so if you have at the very least an audience of one.  I want to do post and see if there is more support with your permission.

    I also wanted to be clear when I asked if Sitefinity responsive design license would work with your boilerplate work I was not asking a is it okay licensing question.  What I meant was if I go down the road of spending hours and hours getting a really nice site setup with boilerplate and then I buy the license to add all the cool device view mobility features of the responsive view add-on would I then find that responsive view takes care of all the adaptive view issues all on it's own that I was trying to address with boilerplate based templating and theming?  In other words if I am planning on purchasing responsive design add-on should I skip trying to implement a Sitefinity boilerplate template/theme?

    Thx again for your advice 

  8. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    11 Mar 2013 in reply to Bill
    Link to this post

    @Bill,

    My permission is totally not needed, don't be silly - we're all one community of Sitefinity people no? The more input and insight there is, the better the end result will be...

    Currently sitefinity's Mobile add-on offers 2 major features:
    - Mobile Preview
    - Responsive design rule-based setup.

    As for 'Mobile Preview' that's a really cool end-consumer feature that allows content editors to preview and make changes when a site is viewed on a tablet or phone. That will work out-of-the-box with whatever setup you have, even if you've not setup any responsive rules.

    The responsive rule setup are getting more advanced with each release of Sitefinity. First they offered global rule sets, now they offer them template based already. If I'm not mistaking the v6 roadmap has even further mobile enhancements up its sleeve.

    The rule sets basically define the 'when' and 'what' for your site. And here comes the crucial part: it allows you to set circumstances to offer 'internal responsive' transform (1 row, 2 columns > 2 rows, 1 column) or assign unique .css files (iphone retina specifc css files). So it's not just a nice interface for media-queries.

    ---
    Getting back to boilerplate/bootstrap. 

    Like I said before, the 'boilerplate' theme/template will work 100% out-of-the-box with the mobile add-on, because it sets you up properly, without having media-queries or responsive design rules of its own. 

    The 'Bootstrap' theme/template is somewhat trickier, because Twitter bootstrap has media-queries of its own and its rule-set differs from Sitefinity's default. 

    So while the 'Mobile preview' function will work 100% out-of-the-box it's rule-sets are incompatible (sf_cols vs row-fluid classes).

    If you're planning on using Twitter Bootstrap, then you have to 'ignore' it's internal responsive transforms (1 row, 2 columns > 2 rows, 1 column) unless you really want to go deep and make them compatible. 

    Instead of having to setup all these columns transfers, bootstrap will handle them for you automatically and for you all that is left to do is to enhance rule-sets with external css if you specifically want to target and enrich certain devices.

    ---
    Disclaimer:
    Because of it's class difference, sitefinity lay-out widgets aren't compatible with bootstrap widgets as said before. In order to make those compatible, you'll have to tweak them - or tweak Bootstrap so that it will apply the same functionality to .sf_colsOut .sf_2cols_1_25 + .sf_colsIn .sf_2cols_1in_25 as it does to .span4.

     

    I'll see what I can do in making the layout widgets compatible with Bootstrap this week.

    Jochem

  9. Bill
    Bill avatar
    53 posts
    Registered:
    28 Jun 2006
    18 Mar 2013 in reply to Jochem Bökkers
    Link to this post
    Jochem, just a shout out, if you are still working towards this in your spare time or have you moved on?  Thx Either way it is all good.  Thx again
  10. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    18 Mar 2013 in reply to Bill
    Link to this post
    Hey Bill,

    Hadn't gotten around to writing a blogpost about it yet to describe how they work but I've put them on GitHub already.

    http://github.com/FalafelSoftwareInc/Sitefinity/tree/master/Bootstrap.Layouts

    [Edit]
    A short write-up can be found at http://blog.falafel.com/Blogs/jochem-bokkers/2013/03/18/bootstrap-layouts-with-sitefinity
  11. Bill
    Bill avatar
    53 posts
    Registered:
    28 Jun 2006
    18 Mar 2013 in reply to Jochem Bökkers
    Link to this post
    Awesome, thank you
  12. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    17 May 2013 in reply to Bill
    Link to this post
    I'm extremely interested in this too! What is the current status of the Bootstrap theme? Is it compatible with version 6.0? Also, would it, in theory, replace all of Sitefinity's responsive stuff?
  13. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    20 May 2013 in reply to Adam
    Link to this post
    Hey Adam,

    I've updated both the HTML5Boilerplate and the Twitter Bootstrap port last week. For a quick video of how it works/what you get, I've uploaded a short video on YouTube.

    Currently:
    - Sitefinity v6 and Twitter Bootstrap 2.3.1 compatible.
    - Bootstrap is fully untouched for easy updating*.
    - Fully theme/template compatible.
    - Uses Bootstrap responsive grid while maintaining Sitefinity layout compatibility.
    - Additional layout controls, similar to the default ones provided by Telerik.
    - Optimized HTML5 enhanced Masterpage with both .less and .css support for the theme.

    (*)
    Twitter Bootstrap's variables.less has one edit. Where Bootstrap uses the foldername 'img' I've replaced it with 'images' in order to adhere to Sitefinity naming convention. (lines 154+155).
    // Sprite icons path
    // -------------------------
    @iconSpritePath:          "../images/glyphicons-halflings.png";
    @iconWhiteSpritePath:     "../images/glyphicons-halflings-white.png";

    ---
    The attached screenshot shows some metrics on an IIS8 site with caching & compression enabled.

    In that setup, everything boils down to a total of 8 requests and with warm cache it only pulls in 2 requests and only 6.9Kb (content of the page) giving us a Yslow/Pagespeed score of about 97 out of 100.


  14. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    20 May 2013 in reply to Jochem Bökkers
    Link to this post
    Jochem,

    Awesome work! Thanks!
  15. Carlos Redondo
    Carlos Redondo avatar
    21 posts
    Registered:
    09 Jan 2009
    05 Jun 2013 in reply to Jochem Bökkers
    Link to this post
    Thanks for share this great information!  Our dev team is also looking for Bootstrap on Sitefinity.
  16. Richard
    Richard avatar
    64 posts
    Registered:
    09 Oct 2012
    18 Sep 2013
    Link to this post
    Hey Jochem how did you get the HTML5 data attributes to work? I assume you were able to since you said "it's html5 attributes are things you need to work around". 

    Thanks so much for working on this stuff and figuring it out! I'd be lost if I didn't have your info to go off of.
  17. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    18 Sep 2013
    Link to this post
    Hey all,

    I was pointed to /asked about this thread earlier today so apologies for the spam but, here's an update on Twitter Bootstrap.

    Both Twitter Bootstrap v 2.3.1 and Bootstrap v 3.0.0 are now supported and part of the Github project.

    Biggest reason for keeping both is the fact that as of v3.0.0 (twbs) is adopting the 'Mobile-first' doctrine and by default started using 'box-sizing: border-box;' opposed to the old fashion content-box.

    Given the change in box-sizing, KendoUI is now included by default as well as part of the twbs theme+template. 

    The sitefinity theme uses .less files to combine the necessary stylesheets for Sitefinity, KendoUI & Bootstrap and results in a single /global/sfproject.css

    01./*  ------------------------------------*/
    02./* #region less variables and mixins */
    03./*  ------------------------------------*/
    04.@import "../LESS/sfnormalize.less";
    05.@import "../LESS/bootstrap/theme.less";
    06./*  ------------------------------------*/
    07./* #endregion */
    08./*  ------------------------------------*/
    09./* #region content */
    10./*  ------------------------------------*/
    11.... put your own styles here
    12./*  ------------------------------------*/
    13./* #endregion */
    14./*  ------------------------------------*/

    Twitter Bootstrap 3 themes are now also supported by simply swapping out line 05.

    ---
    GitHub project link: http://github.com/jbokkers/SF-BOILERPLATED
    Box-sizing and why it matters: http://css-tricks.com/box-sizing/
    ---

    Jochem



  18. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    19 Sep 2013 in reply to Richard
    Link to this post
    @richard,

    They're no longer stripped by default. So you could for instance simply copy/paste a navbar example into a content-block and it works.  (change the <form> tag to a <span> of course).

    Just keep your eyes open for <i> tags being converted into <em> by default.

    Jochem.
  19. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    17 Apr 2015
    Link to this post

    If I wanted to use a pre-built template that is based on bootstrap, I like this one for instance:

    http://themeforest.net/item/riley-responsive-multipurpose-html5-template/full_screen_preview/7805604

    Is there an easy way to import this?  Or would I just be making my life harder working with this template in Sitefinity rather than just using Sitefinity to build a template from scratch?

  20. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    22 Apr 2015
    Link to this post
    Hello David,

    In case this is just a master page you can take a look on that article

    If this is a custom theme you can find useful that documentation

    More information how to create custom page template and using responsive design is described here and here.

    I hope this information helps.

    Regards,
    Svetoslav Manchev
    Telerik
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
20 posts, 1 answered