How to use Bootstrap or other CSS frameworks on a small part of a page without affecting the rest of the page’s style

I’m currently working on a project where I have an AngularJS app (a form), that will be displayed on several different external websites. This means that I have to style the form to fit into several different page designs, with different existing stylesheets.

The form itself is styled using Bootstrap, one of the most commonly used front-end frameworks.

TL;DR: To style only a selected part of a website using a CSS framework, I create a container div around the app with a unique id, and then use LESS to change all the style definitions in the framework to only affect this particular id. This process is done automatically on build using .NET MVCs bundling framework.

Continue reading “How to use Bootstrap or other CSS frameworks on a small part of a page without affecting the rest of the page’s style”

AngularJS and .NET MVC: Convert templates from html to javascript and bundle app and templates together

I am working on a project where I have an AngularJS app on my own .NET MVC website, and I will display this appΒ on several remote websites.

TL;DR: To get the AngularJS templates to load correctly on the remote website, I needed to convert the html template files to javascript and bundle them together with the rest of the app. This article will try to explain why and how to achieve this.

Continue reading “AngularJS and .NET MVC: Convert templates from html to javascript and bundle app and templates together”