Using Third Party Frameworks (Blueprint, Foundation, Bootstrap, Etc.) with SiteFinity - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

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

  • Using Third Party Frameworks (Blueprint, Foundation, Bootstrap, Etc.) with SiteFinity
  • 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:
    <%@ Master Language="C#" %>
     
    <!doctype html>
    <html lang="en">
    <head id="Head" runat="server">
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title></title>
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
      <div id="PublicWrapper" class="sfPublicWrapper">
            <asp:ContentPlaceHolder ID="cph_content" runat="server" />
      </div>
      </form>
    </body>
    </html>

    All the extra's are just to make it fancy.
  • 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,
  • 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. 

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