This article is intended to provide a starting point for Developers to troubleshoot issues with their own custom Igloo application code, or anywhere else on the Igloo site where custom “one off” code is executing. It is also a useful resource for new Developers who wish to speed up their workflow when designing regular, stand-alone Igloo web applications.
The information herein does not apply to the Integration framework, where industry standard software development best practices apply.
Cascading Style Sheets (CSS)
Tip: It is a best practice to keep your CSS local to your application. Avoiding putting any custom CSS into the Advanced Theme Editor.
The order in which the platform and 3rd-party CSS files load on the page will effect the design of your application, so it is important to be aware of platform classes and use custom classes for unique HTML elements.
Note: It may not be a bad idea to include a light-weight CSS reset tailored to text selectors, padding and margins.
While it is considered bad practice in regular, “one off” web development, use of the !important rule in your CSS will be required when developing an Igloo application that runs directly on the page. This is because the application is not being rendered inside an IFRAME and thus effected by all of the platform CSS rules. Generally speaking this should only be required for overriding basic platform CSS item specificity such as as height, width, margin, padding, etc.
Tip: It is highly recommended to lint your CSS with a tool such as CSS Lint
In this case, it is standard practice to wait for the Igloo page HTML to be completely loaded and parsed before attempting to load custom code:
In more advanced scenarios you may have an iframe on the page, or the enhancement you’re building depends on image and other data to be fully loaded before executing. For these requirements, please use load or GlobalEventHandlers.onload instead.
Page load speed
An unoptimized application design or large amount of custom code and assets may negatively impact Igloo page load performance. In that case, please review the following:
- Assets loading from a CDN or elsewhere in the cloud may be timing out or slow to load
- Excessive use of or webfonts in a CSS file
The appearance/layout of my application has broken, what is the preferred method of troubleshooting?
After it has been verified that all of the required CSS files have been loaded, the issue would be caused by a small change to platform CSS classes during a patch roll out. The first thing to do is make sure you are familiar with what’s changed recently, and the corresponding known issues list.
If you are still having issues with your CSS after considering all of the above, please contact Igloo Developer Support for assistance.
Can I use modern workflow and prototyping tools such as Browsersync?
Due to the security and authentication model of the Igloo platform it is not possible to use the Browsersync npm module to develop and prototype applications. That being said, it is possible to emulate the functionality closely to speed up development time. That information is located in the HTML Content Widget overview article:
- [Application prototyping best practices])