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

Forums / Designing & Styling / Using Third Party Frameworks (Blueprint, Foundation, Bootstrap, Etc.) with SiteFinity

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

33 posts, 0 answered
  1. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    22 Apr 2013
    Link to this post
    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!
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    23 Apr 2013 in reply to Luke
    Link to this post
    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


     
  3. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    23 Apr 2013 in reply to Jochem Bökkers
    Link to this post
    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.
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    23 Apr 2013 in reply to Luke
    Link to this post
    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.
  5. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    23 Apr 2013 in reply to Jochem Bökkers
    Link to this post
    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!
  6. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    23 Apr 2013 in reply to Luke
    Link to this post
    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...
  7. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    23 Apr 2013 in reply to Jochem Bökkers
    Link to this post
    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.
  8. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    23 Apr 2013 in reply to Luke
    Link to this post
    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.
  9. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    24 Apr 2013 in reply to Jochem Bökkers
    Link to this post
    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.
  10. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    25 Apr 2013 in reply to Luke
    Link to this post
    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
  11. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    26 Apr 2013 in reply to Jochem Bökkers
    Link to this post
    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,
  12. Highrad
    Highrad avatar
    15 posts
    Registered:
    22 Aug 2007
    23 Aug 2013
    Link to this post
    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. 
  13. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    23 Aug 2013 in reply to Highrad
    Link to this post
    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% (https://github.com/twbs/bootstrap/issues/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.
  14. Highrad
    Highrad avatar
    15 posts
    Registered:
    22 Aug 2007
    23 Aug 2013 in reply to Jochem Bökkers
    Link to this post
    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. 

  15. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    26 Aug 2013 in reply to Jochem Bökkers
    Link to this post
    "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.
  16. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    26 Aug 2013 in reply to Luke
    Link to this post
    @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?
  17. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    26 Aug 2013 in reply to Jochem Bökkers
    Link to this post
    Video link can be found here: https://dl.dropboxusercontent.com/u/19007909/sitefinity/twbs300.mp4

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

    Jochem
  18. Highrad
    Highrad avatar
    15 posts
    Registered:
    22 Aug 2007
    26 Aug 2013 in reply to Jochem Bökkers
    Link to this post
    Thanks Jochem! I will take a look at it and let you know.
  19. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    29 Aug 2013 in reply to Highrad
    Link to this post
    @Highrad

    I've uploaded the release on Github just now, https://github.com/jbokkers/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.
    ---
  20. Simon
    Simon avatar
    9 posts
    Registered:
    25 Jul 2004
    17 Oct 2013 in reply to Jochem Bökkers
    Link to this post
    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
  21. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    18 Oct 2013 in reply to Simon
    Link to this post
    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.
  22. Highrad
    Highrad avatar
    15 posts
    Registered:
    22 Aug 2007
    18 Oct 2013 in reply to Jochem Bökkers
    Link to this post
    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
  23. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    19 Oct 2013 in reply to Highrad
    Link to this post
    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
  24. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    13 Nov 2013 in reply to Jochem Bökkers
    Link to this post
    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

  25. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    14 Nov 2013 in reply to Laura
    Link to this post
    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 

    @import "../LESS/kendo/kendo.common.less";
    @import "../LESS/kendo/kendo.bootstrap.less";

    If you don't want the flat UI and not bootstrap theme (which adds shadows & borders) simply remove line 11 from sfproject.less

    @import "../LESS/bootstrap/theme.less";

    Compile the .less, or if you're using VisualStudio with the WebEssentials extension, simply hit save and it's removed - couldn't be simpler no? The only thing to keep in mind, less's drawback so to speak, is if you change something in variables.less, you need to recompile (open & save) the sfproject.less file again before the changes will take effect.


    Customization is also up to you. 
    Everything in /less/bootstrap is 100% out-of-the-box so you can add/remove what you like.
    Don't need jumbotron? Open /less/bootstrap/bootstrap.less, remove line 31 and done. 
    Same goes for almost any of the 'components' http://getbootstrap.com/components/ some are dependent ofcourse ('navbar' needs 'nav', etc).

    In the end, think of '/less/sfnormalize.less' (or css/.min.css) as the reset stylesheet that loads all the framework styles in one optimized file. The 'global/sfproject.less' (or .css) is where you add your own project/theme styles. I just @import sfnormalize.less into sfproject.less so I only end up with 1 stylesheet (and thus save me 1 request) but there's nothing against using 2 or 3 stylesheets.

    Buttons
    Ideally you'd use /less/bootstrap/variables.less and /less/bootstrap/theme.less to style the basic components and then all you'd have to do is extend/add them to fit your need.

    Bootstrap uses button classes like .btn-default, .btn-primary, .btn-success, .btn-warning, .btn-danger and .btn-info suppose you want to add a .btn-secondary that's 20% darker than the .btn-primary.
    If you're using .less you can simply do the following:

    Open up /less/bootstrap/variables.less and go to line 126 and Add:

    @btn-secondary-color: #fff;
    @btn-secondary-bg: darken(@btn-primary-bg, 20%);
    @btn-secondary-border: lighten(@btn-primary-bg, 5%);

    These are the variables to declare the colors. On sfproject.less add this:

    .btn-secondary {
      .button-variant(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border);
    }

    If you're using the bootstrap/theme.less (which adds nice shadows and borders) you'll need to add it to the theme.less file as well:

    Line 18:
    .btn-secondary,
     
    Line 64:
    .btn-secondary { .btn-styles(@btn-secondary-bg); }

    If you wanted to do this with .css you'd have to do the following:

    .custombutton
    {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.428571429;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-image: none;
      border: 1px solid rgba(0, 0, 0, 0);
      border-radius: 4px;
      -webkit-user-select: none;
      color: #FFF;
      background-color: #428BCA;
      border-color: #357EBD;
    }

    And if you had the shadows & borders (theme.less), you'd needed to add this as well:

    .custombutton
    {
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
      background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e0e0e0));
      background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
      background-image: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
      background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
      background-repeat: repeat-x;
      border-color: #ccc;
    }
     
     
    .custombutton:hover, .custombutton:focus {
      background-color: #e0e0e0;
      background-position: 0 -15px;
     
    .custombutton:active, .custombutton.active {
      background-color: #e0e0e0;
      border-color: #dbdbdb;
    }

    ---
    Imagine you want to change the box-shadow on all buttons.
    With css you'll have to find-and-replace all box-shadow declarations, with less you open theme.less, edit line 23 hit save and be done.
  26. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    14 Nov 2013 in reply to Jochem Bökkers
    Link to this post
    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 ?
  27. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    14 Nov 2013 in reply to Laura
    Link to this post
    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.
  28. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    14 Nov 2013 in reply to Jochem Bökkers
    Link to this post
    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...
  29. Boyko Karadzhov
    Boyko Karadzhov avatar
    56 posts
    Registered:
    05 Dec 2016
    18 Nov 2013
    Link to this post

    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.

    Regards,
    Boyko Karadzhov
    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 Public Issue Tracking system and vote to affect the priority of the items
  30. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    18 Nov 2013 in reply to Boyko Karadzhov
    Link to this post
    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: http://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.
33 posts, 0 answered
1 2