Styling with Resource Packages, Feather and Pure MVC Templat

Looking at the following link: www.sitefinity.com/.../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.? 

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.

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? 

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

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?

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? 

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? 

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

It will install all necessary dependencies

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

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

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

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

Hello to all!
Here is my question: I need to create several themes for a website using MVC template. Today I'm working with Sitefinity 9.1, so I would like to know what is the best practice since handling themes like old school is not the best practice. I read about that and it is like handle with Resources Packages. Somebody can guide me on how this would be possible? Regards.