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

Forums / Designing & Styling / Styling with Resource Packages, Feather and Pure MVC Templates ignores Sitefinity Templates

Styling with Resource Packages, Feather and Pure MVC Templates ignores Sitefinity Templates

9 posts, 1 answered
  1. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    03 Jul
    Link to this post

    Looking at the following link: http://www.sitefinity.com/developer-network/knowledge-base/details/app-theme-does-not-render-on-the-frontend

    It suggests : "When utilizing Feather and pure MVC templates layout files and resource packages have to be used instead of App themes"

    It also references three links, but none of those recommend an approach or best practice for adding customizations in such a way that won't interfere with package updates. 

    Also, you have to setup Node.js etc. and use SASS to stick with the practice being used within the package. 

    Is there a document describing best practice for where to store your custom CSS, Images, JS, etc.? 

  2. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    04 Jul in reply to Jacques
    Link to this post

    Hi Jacques. 

    IMHO. It is better to create new resource package and store everything related template(images,css,js,saas,less,bower) inside this folder.

    And for SAAS/LESS tricks, bower and etc, you dont need to install node.js. I want to suggest to use http://vswebessentials.com/. This plugin is amazing.

  3. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    04 Jul
    Link to this post

    Thanks Victor. 

    So to use Bootstrap are you suggesting perhaps making a copy of the Bootstrap package, giving it a new name and then making your own changes in there? 

    As for Web Essentials. Thanks I'll have to check it out, but off-hand does it handle SASS/LESS compiling, minification, etc? 

  4. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    04 Jul in reply to Jacques
    Link to this post

    Yes. I think it is better to create copy, instead editing existing.

    Web Essentials  handle compiling, minification, bundling, bower and etc. I can't live without this plugin

  5. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    04 Jul in reply to Victor Leontyev
    Link to this post
    So going the custom package route... how do you handle Package updates? I.e. if the default Bootstrap package gets updated how do you make sure your own package gets the needed updates?
  6. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    04 Jul in reply to Victor Leontyev
    Link to this post

    Hi Victor, 

    Here's an example of where I'm not sure how to replace the NodeJs route with Web Essentials. 

    On a standard installation the basic site will render a Bootstrap Template with sitefinity.bootstrap.css which is obviously compiled but it comes from sitefinity.bootstrap.scss which has the following references: 

    //Import Bootstrap from npm
    @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss";
    @import "../../../node_modules/magnific-popup/src/css/main.scss";

    These don't exist I assume because Node and all the relevant modules haven't been installed. 

    I'm not sure what those files contain, but going the Web Essentials route, how do you configure the build so that all relevant files are built and output correctly? 

  7. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    04 Jul
    Link to this post

    Wow I'm having a ton of problems doing this. 

    I installed all the Web Essentials components, made a copy of the Bootstrap package and gave it a sensible name, then right clicked on the sitefinity.bootstrap.scss file selected compile and compile on build. 

    No matter what I do it keeps failing on the sf-mt-xxs issue reported by Jochem on GitHub even though I've replaced it as recommended. 

    From what i can tell it's not picking up the variable names used in _common.scss. On line 26 and 27 of _common.scss it also makes use of mixins which it can't find even though they're there in the _mixins.scss file. 

    Do I need to reference the _mixins and _variables files in _common.scss? 

  8. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    05 Jul in reply to Jacques
    Link to this post

    Hi Jackues. 

    To compile sitefinity.bootstrap.scss you need to do some short steps to configure web essentials

    1) I am using bower instead npm. You need to add bower.json in your resource package folder

    {
      "name": "appname",
      "version": "0.0.1",
      "dependencies": {
        "bootstrap-sass" "*",
        "magnific-popup" "*"
      },
      "private": true
    }

    It will install all necessary dependencies

    2) You need to change lines in sitefinity.bootstrap.scss. Replace npm to bower

    //Import Bootstrap from bower
    @import "../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
    @import "../../../bower_components/magnific-popup/src/css/main.scss";

    3) You need create(or edit) compilerconfig.json in root of your VS project

    [
      {
        "outputFile": "ResourcePackages/Bootstrap2/assets/dist/css/sitefinity.bootstrap.css",
        "inputFile": "ResourcePackages/Bootstrap2/assets/src/sass/sitefinity.bootstrap.scss"
      }
    ]

    After this steps you will be able to successfully compile sitefinity.bootstrap.scss file

     

     

     

     

    Answered
  9. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    05 Jul in reply to Jacques
    Link to this post
    If you still have problems with that, just write me on email victor (dot) leontev (at) gmail (dot) com and i will answer to all you questions regarding resources packages
9 posts, 1 answered