Native theming on UI pages/ Jelly

[johndewhurst]

I have been searching for a good source for styling UI pages/UI Macros and have come up pretty bare.

Want to work with native classes etc, hard code as little styling as possible (prevent issues later down the line if future UI versions change the rendering and make it look a mess)

What I would like is a resource of all the classes available for use in UI pages/Macros and all glide/jelly tags available, with documentation and demos if possible.

If I'm asking for the moon on a stick, even the jelly and glide schema would be helpful.

Also somewhere I can get a live preview without constantly having to save and test.

Thanks

[tltoulson]

Hi John,

Personally, I use my own styles because ServiceNow's styles are not documented and therefore subject to change without warning.   That said, Fuji uses a version of Bootstrap CSS they call Heisenberg.   You could probably reuse some of those classes but most of their other styles are classes for specific widgets.   There isn't really a general purpose framework for the styles.

I have done my own personal styling in UI Pages and have yet to have the css from my pages break between ServiceNow versions.

As for Jelly documentation, these two wiki articles contain all the tags:

Jelly Tags - ServiceNow Wiki

Extensions to Jelly Syntax - ServiceNow Wiki

Also TechNow has some good videos on Jelly:

TechNow - YouTube

[Jon Barnes]

and to add to that, you can see the bootstrap classes documented at getbootstrap.com

From what I have seen the heisenberg theme is pretty similar to the default bootstrap theme you see on getbootstrap.com.   When I am working on UI Pages etc, I usually have getbootstrap.com open in another tab for quick reference.

[Slava Savitsky]

As far as I know, ServiceNow UI team maintain a style guide that is used internally to ensure a consistent look and feel platform-wide. However, they are not ready to share it with the customers at this time. Hopefully this information will become public in due course.

[Jon Barnes]

the other thing I do to help myself in this space is "Inspect Element".   you can do that on an HTML element and see exactly what CSS classes are applied and can use that information to copy your styles on UI pages.

I did also notice that the Fuji version uses bootstrap modals, but many of our UI pages were called in a GlideDialogWindow.   If I changed those calls to GlideModal instead, I get the (much better in my opinion) bootstrap modal look on those.