Sitefinity - Twitter Bootstrap and HTML5 Boilerplate

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

github.com/.../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

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.

I have to give it another try or three

@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:

Bootstrap way:

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:

@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 github.com/.../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.

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

Very much appreciated Jochem

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 

@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

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

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.

github.com/.../Bootstrap.Layouts

[Edit]
A short write-up can be found at blog.falafel.com/.../bootstrap-layouts-with-sitefinity

Awesome, thank you

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?

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).

Jochem,

Awesome work! Thanks!

Thanks for share this great information!  Our dev team is also looking for Bootstrap on Sitefinity.

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.

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

@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.

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

themeforest.net/.../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?

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