-
Notifications
You must be signed in to change notification settings - Fork 1
Stylesheet Restructuring
As of December 12, there has been some significant changes of how stylesheets should be loaded within the framework.
Before today, there were two stylesheets. One that loaded for IE7/8, and one that loaded for all other browsers. I have restructured out master less files so the stylesheets are loaded in this order:
- framework.css - This file contains styles for the base framework (compiled from /less/framework.less).
- ualberta.css or faculty.css - This file contains the styling specific to the website (compiled from /less/ualberta.less).
In addition to those two stylesheets, two more are loaded if the user is browsing with Internet Explorer:
- framework-ie.css - This file contains IE overrides for the base framework (compiled from /less/framework-ie.less).
- ualberta-ie.css or faculty-ie.css - This file contains IE overrides specific to the website (compiled from /less/ualberta-ie.less).
The markup in the <head> should be as follows to load the stylesheets correctly:
<link href="./css/framework.css" rel="stylesheet">
<link href="./css/ualberta.css" rel="stylesheet">
<!--[if IE]><link href="./css/framework-ie.css" rel="stylesheet"><link href="./css/ualberta-ie.css" rel="stylesheet"><![endif]-->
Note: ualberta.css and ualberta-ie.css are site specific stylesheets, and will change based on the site. framework.css and framework-ie.css should be included on every site using the framework and loaded from the same location so it is cached.
From this point on all IE specific styling should go in the appropriate ie.less file. The file contains wrappers for each version of IE.
-
/framework/ie.less- for any IE overrides that will apply to every site using the framework. -
/**site_name**/ie.less- for any site specific IE overrides
For any fallbacks for features not supported by the browser (gradients, shadows, transparency, etc):
-
/framework/fallbacks.less- for any fallbacks that will apply to every site using the framework. -
/**site_name**/fallbacks.less- for any site specific fallbacks