...

Content Distribution Networks (CDNs)

Some popular CSS libraries files are hosted on CDNs.  To decrease load times (browser accesses a different domain) and potentially improve performance (a different application may have downloaded the CSS library file from the CDN and have it in the browser's cache), a CDN can be used instead of obtaining the library file from the Resource Server.  The CDN must support HTTPS to access the library so user's don't get security warnings.

When a portlet obtains a library CSS file from a CDN instead of the Resource Server, the library does not need to be mentioned in the maven-war-plugin in the portlet's pom.xml (don't need to have a local copy of the library file overlaid into the portlet).

...

• They might make it more difficult to run uPortal off-line when you don't have a network connection and the browser doesn't have a cached version of the desired libraryfile.  You can work around this by temporarily modifying the source code, or creating an entry in your machine's hosts file and  hosting the javascript library CSS file locally (see below).
• CSS files hosted on the Resource Server in both non-minified and minified versions allow selecting the non-minified versions by disabling Aggregation in the uPortal Admin UI.  If scripts CSS files are listed in a skin.xml file and included with the <rs:aggregatedResources path="skin.xml"/> tag you do get minified or non-minified versions accordingly.

CDNs are recommended for the following CSS librariesfiles.  Libraries  CSS fies referenced on CDNs should also be placed in the resource server so they are available when off-line in an emergency (see above).

...

Resources from a CDN should use the resourceURL tag library to load them rather than accessing the CDNs directly.  This allows the URL to be modified to a non-minified version when JS aggregation is disabled or running in off-line mode (though the resourceURL tag currently does not do this).  E.g. access like:

<link rel="stylesheet" href="<rs:resourceURL value='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'/>" type="text/css"/>

CSS Scoping

You'll notice in the first example above in CSS Loading that immediately after the CSS <link> element is a div with a class name specific to the portlet web application. This div is used to scope all style rules created for the portlet.

...