Layering CSS and JS Files

Cascading Style Sheets (CSS) follow ordering rules, where styles that are defined and loaded later in the page rendering process will have higher priority.

<linkrel="stylesheet"href="/blog/css/blog1.css">
<linkrel="stylesheet"href="/blog/css/blog2.css">

In the example above, if there are duplicate rules in blog1.css and blog2.css, the system applies the CSS rules in blog2.css. 

Approach to Customized CSS and JS

In some applications there is a need to manage multiple CSS and/or JS files and control their use and loading during runtime. The LogicNets Designer Project Settings allows the definition of CSS ordering rules for the project. In Version 7.3 on, CSS and JS file locations are specified in the Project Settings (rather than in the Framework Settings).

Projects created prior to version 7.3 will still work as expected but need to be edited to follow the new approach below to take advantage of multiple files and ordering. See end of article for more information on the conversion.

In the example below are stylesheets in the CSS folder, in the pdf subfolder and the overrides subfolder. (Note that CSS folder can contain any number/hierarchy of user-defined subfolders. Folders and subfolders are created using the Explorer icons at the top of the Explorer bar). In this example, the Designer User wants to specify ordering rules such that the project_css_handler CSS is loaded, followed by the additional_css, and the PDF_custom CSS is ignored (and reserved for the PDF generation process only)

Resources/Layout/CSS Folder Structure Example

Project Settings Example

In the Project Settings, the Designer User  dictates the load order of CSS folders using the syntax project@/resources/layout/folder/subfolder/subsubfolder/*. When multiple files appear in a folder, the system loads the files in the order shown on screen.



In this example, during page rendering the system first applies the CSS styles from any file in resources/layout/css, followed by styles in resources/layout/css/overrides. Even though the PDF folder exists within resources/layout/css, the system does not use the PDF stylesheet during rendering, because the PDF folder is not directly referenced in the Project Settings.

CSS Layering with Custom Frameworks

In more complex application setups there may be a custom framework with its own set of CSS folder settings similar to those above. If so, the ordering rules are dictated in similar fashion as follows:

• Loaded First: LogicNets Product CSS (e.g. Assessment Framework)
• Loaded Second: Custom Framework CSS (and order of multiple files at custom framework level dictated by custom framework-level project settings)
• Loaded Third: Project CSS (and order of multiple files at project level dictated by project-level project settings)

For more information on the ordering rules within CSS files, see such Internet resources as https://www.w3schools.com/css/.

A useful graphical representation can be found here and is shown at the end of this article.

JS Files

JS files follow the exact same approach as above.

Basic Approach to Customized CSS and JS

When using a LogicNets framework created prior to version 7.3, the simplest set up with customized JS and CSS is where the Designer User specifies an individual file for each in the FRAMEWORK SETTINGS (see screenshot below).

No action is required for these projects to continue to work in later versions of LogicNets. But in the event the Designer User wants to take advantage of the new approach (e.g. to specify multiple CSS or JS files and dictate the priority order), first of all, the FRAMEWORK settings shown below for custom JS and custom CSS should be cleared. (Custom PDF CSS setting is limited to a single file so is not featured in the advanced approach).

Guide to CSS Styling Order