Skip to content

Instantly share code, notes, and snippets.

@dbouwman dbouwman/Tech.md
Created Aug 31, 2017

Embed
What would you like to do?
Theme Blog Tech

Static Generated Css

For the last year, when a Hub Site was saved, we had been taking your theme colors, and sending them to a server which would generate a complete stylesheet, based on those colors. The resulting css was then stored as a "resource" with the Hub Site item, and would remain static until the site owner edited the theme in the Layout Editor.

In general, this processed worked pretty well, however over time we noticed a number of issues.

The first issue, which caused the most problems, was due to the css being generated and persisted. When Esri updated the underlying application code, all sites would be running that code immediately - however, they would load with the old css. Although we went to great lengths to ensure no catastrophic changes, with tens of thousands of sites, many highly customized, inevitably issues would arise, and customers would have to edit and re-save the site.

The second reason for making a change is that Hub Sites With be included with the ArcGIS Enterprise 10.6 release, and in that environment, there is no css generator service.

Finally, fetching this stylesheet and injecting it into the DOM added ~500ms to page load time.

Dyanmic Theme Css

The new Theme system addresses all three issues with the old approach. We now generate the theme css on-the-fly, in the browser. The css that is generated is much more focused - it only generates style rules to override the colors, and does not duplicate the "structural" css rules.

The benefits include:

  • faster page load time, which will help with our overall goal of improving Site SEO
  • this solution works in ArcGIS Enterprise and ArcGIS Online
  • all sites get structural css updates as soon as Esri updates the Hub applications (typically this every Tuesday morning)
  • much greater flexibility to extend the themeing capabilities of Hub Sites
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.