Using Third Party Frameworks (Blueprint, Foundation, Bootstr

Thanks for your time. 

I am using a local installation of SiteFinity v 5.1 to sandbox some styling stuff. Using a blank page template with JS and CSS widgets with valid paths, I am able to generate what looks like a successful basic page.

However, I notice that javascript components such as tab or accordion behaviors don't react. There are no errors in Chrome's javascript console, other than the following:

"Resource interpreted as Stylesheet but transferred with MIME type text/plain: "(some path...).css")

I keep running into such bugs. Getting the markup bases' javascript resources to load in the correct order felt like a huge victory, but the scripts aren't actually controlling the page elements in response to events and because there are no console errors generated I can't tell why.

Are there any special pointers to consider when attempting to circumvent SiteFinity's boilerplate styling altogether and instead rely 100% on a proven HTML framework such as blueprint or twitter bootstrap or zurb foundation instead? It would be really nice to de-couple the content data model structuring from the presentation but since I am just a designer and not a bonafide developer there is a learning curve to master.

Any help is appreciated!

Hey Luke,

First, for the time being you should stay away from dropping css-widgets onto the page. That wrong mime-type doesn't bother Chrome or Firefox, but causes IE9+ to ignore the stylesheet completely.

Secondly to your 'no-error-but-nothing-works' have you verified that jQuery's not loaded twice and if so, not in conflict?  Perhaps your libraries are binding to the first jQuery and then the executing .js gets attached to the second...

---
There are many pointers, pitfalls and little gems, but in general:

Build yourself an HTML5 masterpage that you can use as a starting point, insert all the defacto framework & fallback stuff on there.

Use JavaScriptEmbedControl + ResourceLinks on that masterpage to force the JS loading order. Better yet, pre-process them and combine them in a single request if you've got the chance.

Use a Sitefinity theme instead of individual css-widgets or hardcoded css links.
The cssLoadOrder.xml inside your themes Global folder marshalls the loading order. And again, pre-process where you can to minimize the number of requests. Often a second or third external css-file takes more time loading than one css-file that's just 15Kb larger.

Disable inline-editing. (Administration >> Advanced >> Pages). It's a great feature for content editors but during development the added .js/.axd's are annoying and can confuse you sometimes as to what gets loaded where and by default.

---
HTML5Boilerplate works more or less out of the box since it doesn't use its own grid. Bootstrap works great, if you fix/tweak the grid system to be Sitefinity compatible. I've not played around with Zurb or Blueprint lately, but they'll most likely work just like Bootstrap does, as long as the grid system is fixed.

<shameless self-plug>
About a year ago I created a GitHub repository called SF-Boilerplated. It contains a sample masterpage/theme for use with HTML5 Boilerplate. The boilerplate part is still up-to-date and should provide you also with a starting point for the other frameworks.
</shameless self-plug>

The Twitter Bootstrap theme/template is slightly outdated but in essence still functions, but ideally you'd do something like the following for Bootstrap/Zurb/Blueprint:

- Use .NET bundling & minification to server-side optimize the .js libraries.
- Create a theme with a custom reset.css that combines your frameworks reset+ some base sitefinity styles.
- Create a .Master page that calls the optimized js
- Assign the theme to your new template.
- Create layout-widgets that are compatible with your framework and Sitefinity.

Internally (not the Github version) using above approach, I'm able to load Modernizr, jQuery, Kendo, RequireJS and Twitter Bootstrap plus their accompanied .css files into just 5 requests with a yslow score of 98 and maintain 100% Sitefinity compatibility while providing me with a full-featured HTML5 framework on which I can built a new project.

Jochem


 

Thanks for the detailed reply Jochem. Since I am only a designer without real ASP.NET chops I'll have to do some study in order to try most of your instructions, although I can at least check on the JQuery loading.

"Build yourself an HTML5 masterpage that you can use as a starting point, insert all the defacto framework & fallback stuff on there." I tinkered around with a custom master page from scratch using the model from SiteFinity's documentation, how similar is that to my goal? I ultimately discarded my efforts because the form element was somehow closing just after the header & leaving the #Content & #Footer elements orphaned. (As I said, no ASP.NET chops.)

"Use JavaScriptEmbedControl + ResourceLinks on that masterpage to force the JS loading order. Better yet, pre-process them and combine them in a single request if you've got the chance." Can you describe that in a little more detail please, for someone who is pretty new to pre-processing resources? Or a link. 

"Disable inline-editing. (Administration >> Advanced >> Pages). It's a great feature for content editors but during development the added .js/.axd's are annoying and can confuse you sometimes as to what gets loaded where and by default." You're right, I'm proof that they're both annoying and confusing! (Speaking of - I just found that setting in the control panel, and a text field for "true/false" values seems a little odd, especially when there are checkboxes elsewhere on the page! But I digress...)

Thanks a lot for the expert assistance, I'll grab the stuff from your repository and see if I can make sense of it. It sounds like the direction I'm after.

Hey Luke,

I'm a bit OCD when it comes to minimizing requests, so justignore all the .NET bundling & minification stuff. The goal was just to instead of loading 3 javascript libraries individually to combine them into one. Whether you're using some .NET functionality or some online tool to bundle those doesn't matter for the end result.

Using the .NET functionality just allows you to keep separate source-files in development and have them merged together on publish. Same goes for combining .css files.

---
Regarding the HTML5 Masterpage, most of it has nothing to do with Sitefinity.
If you take a look at the Boilerplate.Master (GitHub) you'll see its a good starting point for the other frameworks as well.

The first line is just asp.net standard, but there's no code file, so you can simply drop it/change it without having to resort to rebuilding anything.

Then there's a few register/import lines.  The localization line is to allow (in this case) line 58 to display a localized message. 

Line 8/37 are just lines for Modernizr, meta tags and IE enhancements so you can get rid of those if you don't need them. Same with lines 54 & 57-58. One's a old browser message and the other to allow for a short-key.

Line 60 is an important one. Best practice dictates that everything is inside a wrapper div. So try and avoid styling the body/form tag, but instead style the wrapper tag otherwise page editing might break.

Lines 61-102 are just mark-up for a header/content/footer region. The thing to take away there is to at least have one <asp:placeholder> (line 83) inside the wrapper. That's the 'region' in Sitefinity where you can drag-n-drop layout or content widgets.

You can simply use one placeholder and built the rest of the template layout in Sitefinity's backend visually, or you can code it like in the sample with multiple placeholders so you can enhance it a bit. (make one an article, the other a section etc). Sitefinity doesn't mind, it's just html5/google/preference on how you do it.

Lines 107-115 are just something I like to do. Outside of the main wrapper, I tend to create a scriptwrapper which is nothing more than a region where you can drop widgets on. Normally if you drop a .css or .js or for instance the analytics widget onto the page, it takes up space and kind-off breaks your design. I simply toss a region outside of the layout onto the template, so content-editors can simply drop the widgets there without them taking up space on the page-editing themselves.

Javascript.
Line 38-42 shows the use of the JavaScriptEmbedControl and ResourceLinks. The first one ensures that a .js file gets exactly loaded where it is placed. The sf:ResourceLinks shows how you can load the embedded version of jQuery (please don't use 1.9) and in this case Kendo. But you can use it to load your own libraries as well.

In this case I used the JavaScriptEmbedControl to ensure that Modernizr gets loaded prior to any jQuery and/or other libraries. You can use regular script tags instead of ResourceLinks without a problem as well if you prefer.

The scriptmanager in general needs to be loaded. There's a checkbox option when you create a page in Sitefinity to have Sitefinity insert it for you, but in general it's just easier to do it by default than later on debugging 200 pages to see on which you forgot to check the box.

---
In bare minimum you'd just need this:

This is really helpful Jochem thank you.

I noticed both your Bootstrap & Boilerplate templates have identical theme directory structures:

Templatename/App_Master
Templatename/App_Themes/
Templatename/JS

Templatename/App_Themes/Themename/Global
Templatename/App_Themes/Themename/Icons
Templatename/App_Themes/Themename/Images
Templatename/App_Themes/Themename/Styles

I understand which are mandatory conventions (App_Master, App_Themes, and Global,) can you indicate which are a matter of preference?

If I am interpreting this correctly, SiteFinity renders the UI by reading a specific master file, which imports the common front end classes including (among other things) instructions to look to the "Global" folder for the theme styling resources + their respective load order. Is that accurate?

Thanks again for the help!

Hey Luke,

The .../Templatename/JS is a preference.
I use it instead of /JS so I can keep my theme+template+js together in one easy (zippable) structure in case I might have different setups or swiftly need to redeploy to a clean site.

You're correct about the /Global folder. Sitefinity will load all .css files inside that folder and the loadOrder.xml is just there to ensure in which order.

Icons is just me being ocd.

Images makes it easier to refer to images from both /Global and /Styles instead of having two seperate image folders and Styles is for the .css files that shouldn't be automatically included.

Images and Styles aren't really mandatory, but it's Sitefinity's default way of storing it.
In 5.4 there's also a small bug that causes errors on the page edit interface, so to get rid of that, you're basically 'forced' to use the Styles folder.

---
On a sidenote, should you ever start to use Sitefinity Thunder (a visualstudio extension) it'll create the exact same folder structure for you...

I am only using Visual C# Express at the moment so no Thunder for me. I'm sure I'll get around to the full version of Visual Studio, it's just overkill right now based on what I actually know how to do.

One more quick question about your CSS files. Your name "sfnormalize.css" - for each framework, that contains the framework CSS but it also resets of SiteFinity's hard-coded classes to play nice with the framework, correct? I'm just wondering how you identified the complete set of SiteFinity classes to reset (in your Boilerplate's uncompressed sfnormalize.css these are the classes which start on line 51.) Also I'm curious why the sf classes follow the framework classes in sequence, and not vice-versa. 

Thanks again, very helpful stuff.

Yup, it just contains general/framework styles (i believe the HTML5 Boilerplate is based on Normalize.css by Nicolas combined with the Sitefinity reset.css that comes with the default theme and some default classes.

The lines you're referring to (line 51) are mostly coming from Telerik,Sitefinity.Resources.Themes.LayoutBasics.css which is an embedded resource which define all the classes for the Sitefinity grid/layout system. 

While it perhaps shouldn't be inside 'normalize' to me they represent base-classes that never change and should be there for all sf projects, so that's why I put them there instead of project.css

As to finding them, I think I just used Chrome/Firefox and inspected the default styles applied and followed where they come from. I put them at the bottom, because I wanted them to be easily separable from the framework normalization but they've just as well might have been on the top. It just felt to make more sense putting html and body at the top and indvidual classes beneath them.

Thanks again for the help Jochem, you are proving to be a valuable resource of practical SiteFinity wisdom.

I've actually managed to put together a Zurb Foundation custom template using your Boilerplate & Bootstrap master files as my starting point. There were a couple hiccups but mostly about paths and things I could actually resolve. As a designer/user I find it incredibly satisfying to be able to extend this content management system to a practical degree of customization without coding and compiling anything (or even needing to know how to do either, which really I don't.)

As with Bootstrap, Foundation's grid model is based on rows of 12 column units, so the syntax is very similar, like .large-12 vs .span12. Getting that to render correctly & not fight SiteFinity's hard-coded styling was surprisingly easy, using your work as a starting point.

My next milestone will be creating a custom content widget for drag-and-drop creation of Foundation's excellent, excellent section component, which is a generic  design pattern that renders content containers as tabs or as accordions depending upon the viewport resolution (responsive behavior is built into the js.) Unfortunately I think this means coding & building, but that's inevitable I guess with a compiled-language CMS.

Hey Luke,

Great to hear that it's snapping together. Like I said before, I've not taken a thorough look at Foundation 4 yet, and given workload I'll probably won't be able to this week but I couldn't resist taking a peek at the link you sent.

I think you can get away with layout widgets for most of the design where you drop a wrapper layout widget and then drop section layout widgets inside for each container/tab you'd like to add. 

It wouldn't be as solid as a building a control with proper designers etc, but like you said - that would take time and coding. 

Jochem

Hey Jochem, 

Bootstrap was great to prototype with but I'm finding Foundation easier in some ways, in that its responsive behavior is more transparent. I know Bootstrap is pushing that way with future releases.

As for the layout widget thing, I think the ideal solution would be a custom control for the generic design pattern that tabs and accordions represent. From a user interaction perspective, implementing such a widget would involve

1.) dragging it into the page content area
2.) using the widget's "Edit" settings to specify the number of content sections within, as well each sections' title (text field) and section content (text area, rich text editor.)
3.) saving/updating and publishing the page

I have no idea how to build such a control within SiteFinity but I know how to do it with just JQuery and HTML, so I figure it's just a matter of playing connect the dots now. If I make progress I'll share it.

Thanks again for the guidance,

Jochem,

Thanks for developing the Sitefinity Twitter Bootstrap template and theme. I have installed it and it seems to be working great. Since this was built using Bootstrap version 2.3.1 do you think the solution would be safe to upgrade to 3.0.0?

Thanks again. 

Hey Highrad,

Short answer: no.

Going from 2.3.1 to 3.0.0 they did a major overhaul and changed alot of 'core' things we've gotten used to before. Plus there are still some major 'production' bugs lying around with things like 4 column grids being wider than 1170px and stuff like that.

I was hoping to wait till v3.0.1 before updating my port on Github but checking the milestone progress atm, they're at about 20% (github.com/.../10050).

I'm playing around with v3.0 of course, so let me see if I can upload a 'beta' over the weekend. Regardless of beta/final I'm still going to keep the 2.3.1 since it offers the responsive choice whereas v3.0 makes it default.

---

May I ask a question in return?
Since the v2.3 / v3.0 has gained so much popularity and bootstrap 'themes' are popping up all over the place.
Would you rather have 3 base components (sf+tws+theme) that are easy swappable/updatable?
Or one optimized/production ready setup where you just tack on your own css?

Jochem.

Thanks for the quick reply Jochem. 

I am new to Bootstrap so was not aware of the grid bugs in 3.0 but that is defiantly good to know. 

About your question, I like to see a starting point before making changes to the css. I prefer an optimized/production ready setup where I write overrides to the css to get it configured the way I like it. It also makes it easier to upgrade in the future.

Looking forward to playing with the 3.0 beta version when you get it done.

Thanks again. 

"Going from 2.3.1 to 3.0.0 they did a major overhaul and changed alot of 'core' things we've gotten used to before. Plus there are still some major 'production' bugs lying around with things like 4 column grids being wider than 1170px and stuff like that."

The dust definitely hasn't settled, 3.0 is a major shift. It's exciting to see them proclaim "mobile first" and walk away from older IE versions but there are other considerations just about general stability of performance that need to get shored up before people can put it into production.

Jochem, I'd love to talk to you more about getting a Foundation package out there for SiteFinity. I was able to it using your Boilerplate as a starting point but chances are you could optimize it. As a mobile-first responsive front end framework Foundation feels mature and stable and syntactically small (not to mention CSS pre-compiled) and yet it still has nice GUI chrome that makes Bootstrap so appealing.

@Highrad,

I'm rendering a video atm (13.5% and typically monday slow), I'll post a link as soon as it is done.
There are still some incompatibilities/optimizations that need to be done but in general it works as it should. Bootstrap incorporates Normalize.css now as well, so that's still double included and LayoutControls also need to be worked on still and I've just grabbed the GitHub dist (.css) not the .less files which would make our lives easier.

So in the course of this week I'll have a production-ready version up on GitHub, in the meantime let me know if you've got comments/suggestions/wishes/demands after viewing the video.
---
Current stats:
6 requests, 133Kb transferred. Yslow score 99% with 1 css file and 4 js to render a basic working page.
---

@Luke,
I still have a half working sample which I never finished - I know. Shoot me an email and we'll get together sometime this week and see how we can help eachother ok?

Video link can be found here: dl.dropboxusercontent.com/.../twbs300.mp4

Like I said, feel free to spam me with comments/suggestions via jochem.bokkers [at] gmail.com

Jochem

Thanks Jochem! I will take a look at it and let you know.

@Highrad

I've uploaded the release on Github just now, github.com/.../SF-BOILERPLATED

It's using the .less files, so the WebEssentials extension is necessary, but this allows us to leave twbs totally untouched. I've also split from the demo version where i used 1 css to two, so a bootstrap theme & project css are separated from the groundwork we need.

---
stats: 
6 requests, 124Kb transferred. Yslow score 99% with 2 css file and 3 js to render a basic working page with all .css, /js/axd cached across the site.
---

Hi Jochem,
Thank you for creating and sharing this project! I encounter a couple of minor issues when working with it:
1. The master page "twbs.master" includes a reference to ~/App_Data/Sitefinity/WebsiteTemplates/twbs/JS/Modernizr-2.6.2.min.js however the file does not exist, so you get an error when trying to work with the template (the non-minified version of Modernizr is included).
2. I encountered an issue with margins from the included Sitefinity specific styles in the sfproject.css file. This video shows the issue: http://www.corridor9.com/recordings/sitefinity/bootstrap/
I resolved my issue with the margin by modifying the .sf_2cols_2_75 .sf_2cols_2in_75,... classes in the sfproject.css file changing the margin-left: 12px; to 0px.

Thanks again!
Simon

Hey Simon,

Thanks for the errors and the minor-fixes pull-request (I assume that was you?).

The margin/padding error should have been resolved by a fix committed 9 days ago, but I've merged it nonetheless and will re-check and put the correct fix in the .less files.

Sitefinity 6.2 compatibility will be addressed/tested over the weekend in terms of changed base styles.

Hey Jochem,

FYI..I just did a quick 6.2 upgrade on one of our 6.1.47 sites (that is using your Boostrap v2.3.1 theme) and there seems to be a problem with the load panel not going away when you edit a  the bootstrap page template or any page using it. (Picture attached.)

I saw on Github that the Boilerplate theme had  this similar problem a few months ago. Maybe related? 

Thanks, Cam

Hey Cam,

I did some house-keeping and clean up and re-tested all 3 on Sitefinity 6.1.4700, did a quick upgrade to 6.2.4900 as well and no more loading-panels like you faced. (My fault for using the telerik:radscriptmanager to agressively)

As of now I'll start 'tagging' releases to keep things in sync with each Sitefinity version and to mark them as 'manually-verified' compatible. 

---
For 6.2 I still need to verify no style changes have been introduced with the new kendo-based inline editing, but I'll edit this reply once that's done.

Jochem

Jochem,
First, thank you for your work on this.  I had the Github page bookmarked for over a year now and I am finally getting around to using (and understanding) Bootstrap in Sitefinity.  And lucky me, we are up to Bootstrap 3.
I just have a few questions I hope you can help me with.  I am new to Bootstrap and LESS.
I have everything installed (the twbs theme). I have a sample page (similar to your YouTube video with the buttons, etc.)  
What is the suggestion to do with the Bootstrap theme such as for the buttons, etc. Meaning, do I keep it and then change the colors and styles to fit my sites theme? Or do I create a new css files and load it afterwards? Or remove it altogether and use only what is needed for the design of the site?
If I keep the reset and default should I use the LESS version and then can I add the CSS file specific to my site design? Or is it one or the other...

Thank you for any input you may have!
-Laura

Hi Laura,

Nope - thank you for finding it useful.

Less vs Css depends on your preference really. 
Working with the .less files makes customization a little bit easier, but you don't have to.

If you work with the .less files, you can open up bootstrap's variables.less and changes the colors/styles there and re-use those variables in your own code. If you prefer working with css files, just use sfproject.css and add your own styles to add/override or add a new css for your own project's styles. As far as Bootstrap/Sitefinity compatibility, I've tried to avoid depending on .less in case people want to work with css and just use it to combine/load everything properly.

Say you don't want to the whole included Kendo-UI styles (because they add about 114Kb) you can simply open up sfnormalize.less and remove line 17+18 

Jochem,
Again, thank you for your thoughtful and thorough response! You answered many of my questions (some of which I didn't even ask but wanted to)  :-)
Here is another one for you - I have read some articles on this and I am curious as to your opinion ...   Which do you really prefer?  LESS or SASS ?

Hi Laura,

I don't think you should ask yourself which one you prefer - but which one makes your life easiest :)

When I dove into pre-processing, I checked out both as well and while SASS at the time seemed a bit more feature rich, LESS had a more intuitive syntax. 

Ultimately the decision was about the tools and the products. With Microsoft, Telerik, Kendo and Bootstrap all in the .LESS camp, I saw no reason to dive into SASS... If you're still in doubt about the ease of use of less just watch this video http://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Visual-Studio-Toolbox-Web-Essentials-and-CSSCop where they're showcasing how you can use less.

Once again, thank you!
I agree with your statement on - With Microsoft, Telerik, Kendo and Bootstrap all in the .LESS camp, I saw no reason to dive into SASS.
Watching video now...

Hi,

I have been following the good discussion here and just wanted to let you know that we are here if there are any issues on Sitefinity's side or if anyone needs help on the topic.

Thank you Boyko.

What I am currently trying to do is to marry up a design that is not based on this grid but on a 960px width with 10px gutters. And I have found that if you edit the Bootstrap layouts, it puts the width="" inline, so the column wrapping breaks.
I am reading up on the grid here: www.helloerik.com/bootstrap-3-grid-introduction
I think that I can just change the default content width of 1170 to 960 (or 970 too account for the wider gutter width) and the min-width break point from 1200px to 1000px and that is a good start....?
@media (min-width: 1200px)
  .container
    width: 1170px;
 

Then I plan to also remove the mixins.less and then add back in as needed until I get a handle on it all!  The controls (pulling custom data) will be built with MVC and the design was not built upon any boostrap elements.

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.


@Laura,
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

Hello,

Thank you, Jochem! That would be greatly appreciated!

Regards,
Boyko Karadzhov
Telerik

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.

Cheers

Richard