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

improvement of Clinical Governance in the context of diabetes.faello Cortina, Milano 1995 success story.

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

What happens if I just include bootstrap.css on the external website?

This was my first attempt at styling the form. At the beginning of the javascript code for the app, I added the following code:

This bit of code adds an extra link tag to the head of the page, referencing the stylesheet I use for my form.

The problem is, that the loaded stylesheet affects everything on the page, and usually ruins the design of the site.

Here is one example of the styles in bootstrap.css:

This sets all links to be blue. As you can see, there are no class names or ids on the style, so this style will affect link tags on the whole page, without any limits.

Separate the form from the rest of the page

To be able to create styles only for the form, I started by giving my app container a unique id:

The id of the div containing the form is “ccapp-container”. Now I can use this id in my CSS to only target that part of the page

Följaktligen Àr det rimligt att diskutera fördelar, risker och kostnader för de tillgÀngliga behandlingsstrategier med patienten och har patienten deltar aktivt i valet av terapi (delad beslutsfattande).Kontrollgruppen hade minst medelvÀrdet för alla komponenter. viagra online.

Orsaker och riskfaktorer Psykogen Performance Ă„ngest Förlust av attraktion relationssvĂ„righeter Stress Psykiska Ångestsyndrom Depression 20Neurogenic Trauma Myelodysplasi (spinal bifida) intervertebral skiva lesioner Diabetes mellitus Alkoholmissbruk bĂ€ckenoperation Endocrine Hyperprolaktinemi Hypo- och hypertyreos Hypogonadism leder till testosteronbrist arteriogen Hypertension Rökning Diabetes mellitus Hyperlipedaemia perifer vaskulĂ€r sjukdom Penile sjukdomar Peyronies sjukdom narkotika och substansmissbruk Narcotics Antihypertensiva (tiazider, betablockerare, metyldopa, spironolakton) Antidepressiva medel och lugnande medel NSAID H 2-antagonister (cimetidin) Diverse lĂ€kemedel (ketokonazol, agenter hyoscin, anti-cancer) 21EVALUATION oCH BEDÖMNING Standard FrĂ„geformulĂ€r omfattande sexuella, Medical & psykosocial historia Fysisk undersökning Laboratoriestudier hjĂ€rtstatus Evaluation sida 23EVALUATION oCH BEDÖMNING Patienter brukar inte frivilligt deras problem med ED. viagra 200mg 43 mg / kg) av Sildenafil citrate..

mĂ„nader eller hjĂ€rtsvikt, instabil angina eller livshotande arytmier under de senaste sex mĂ„naderna). viagra för mĂ€n Ökningen i fri plasmakoncentration av sildenafil var cirka 40%..

TillrÀcklig uppmÀrksamhet pÄ dessa detaljer under historien kommer utbilda ofta okunniga patienten om komplexa natur sexualitet, och förbereda honom för att förstÄ behandling och utfalls realiteter. viagra pris Upprepad dos toxicitet av sildenafil efter oral administrering studerades i möss (upp till 3 mÄnader), rÄtta (upp till 6 mÄnader) och hund (upp till 12 mÄnader)..

BegrÀnsningen av denna studie var varaktigheten av studien (akut) i motsats till kronisk som kunde ha gett mer ljus pÄ patologi. where to buy viagra Följande patientgrupper var representerade: Àldre (21%), patienter med högt blodtryck (24%), diabetes mellitus (16%), ischemisk hjÀrtsjukdom och andra kardiovaskulÀra sjukdomar (14%), hyperlipidemi (14%), ryggmÀrgsskada ( 6%), depression (5%), transuretral resektion av prostata (5%), radikal prostatektomi (4%)..

Identifieringen och erkÀnnandet av ED associerade medicinska och psykologiska faktorer i den enskilda patienten mÄste understrykas. cialis online Undersökande studier har visat att musen Àr sÀrskilt kÀnsliga för effekterna av sildenafil pÄ mag-tarmkanalen..

. For example, I could change the CSS mentioned earlier to this:

This will set the links inside the div with id=”ccapp-container” to be blue, but no links elsewhere on the page is affected.

But then what? Bootstrap.css is more than 6000 lines of CSS code, so I can’t possibly change all the styles by hand.

Use LESS to add the id to all styles in bootstrap.css

LESS is a kind of programming language for CSS. It enables you to create reusable modules and then compile these modules into CSS.

Using LESS, I can create my own version of bootstrap.css where all the styles contained in it are modified to only affect the div with this id

and a ‘long term solution’. The disadvantages of penileevery patient receiving treatment for ED. The goals of viagra 100mg.

.

I called this file “bootstrap-in-container.less”:

Note that I have to specify that the CSS files should be treated as LESS files, by adding (less) after the import statement. When you import files with the .less suffix, that is not necessary. The reason I don’t simply rename bootstrap.css to bootstrap.less, is because I want to use the downloaded version of bootstrap.css without any modifications at all, which makes it easier to update Bootstrap later.

Transform LESS files using BundleConfig

In a standard .NET MVC project, BundleConfig.cs is used to configure the project’s bundling and minification of javascript and CSS files.

My BundleConfig.cs looks like this:

To load the transformed stylesheet, I change my script that loads the style to this:

If I have a look at the transformed stylesheet, and compare it to the plain bootstrap.css, I can see changes such as this:

The same is true for every single element in the stylesheet, each one has an added #ccapp-container.

Override style settings for the html and body tags

This works well for almost all of bootstrap.css, but there are a couple of exceptions. All style directly targeting the body and html tags will not work after the transformation.

Here is one example:

The CSS after the transformation does not work anymore, because the browser is now looking for a body tag within the container with id equal to “ccapp-container”
. This container does not contain any body tags and therefore this style does nothing.

To solve this, you need to create a LESS file where you add all the styles in bootstrap.css that target the html and body tags directly and replace those with #ccapp-container. Simply open bootstrap.css and search for “html” and “body” to find these instances.

I created a file called _overrides.less, which looks like this:

Then I change bootstrap-in-container.less to this, to include the _overrides.less file:

All done

Now I have my own, customized version of Bootstrap that only affects my app, and not the rest of the page where the app is displayed. Since almost the whole process is automated using LESS and BundleConfig, it is really easy to update Bootstrap later.


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.