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
Are there any others I am missing?
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.
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%
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:
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
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.
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.
// Sprite icons path