Native theming on UI pages/ Jelly

johndewhurst
Kilo Explorer

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

6 REPLIES 6

ChrisBurks
Mega Sage

If it's the classes/styles that SericeNow uses couldn't this be accessed via the development tools and looking at the stylesheets - Heisenberg is there too?



sn_stylesheets.png



Or I find this tool helpful at times for extracting classes, ids, and inline styles from html markup.


extractCSS - Online CSS Extractor


danpatino
Tera Expert

I haven't seen any type of 'one-stop shop' as you are describing but I usually feel safe using bootstrap with the the same UI macros as the OOB UI pages.   You can find them by searching "ui_" in sys_ui_macro.name.   Many of the components are documented pretty well.   Here is the OOB reference field as an example.



Name: ui_reference


Description:


Creates a selector showing records from a specified table.



Attributes:


name= what you want to name the select


table= the table from which you will select


value= the initial value for the select (may be omitted if nothing is initially selected)


show_popup= true/false whether the popup icon is displayed


show_lookup=true/false for lookup list to display the magnifying glass or not


completer= set to another completer class if you do not want AJAXReferenceCompleter (for example, AJAXTableCompleter)



If you are using completer=AJAXReferenceCompleter, you can also use:


columns= if you want to show additional columns in the drop down (semicolon separated list)


order_by= if you want to sort matches in the drop down by a particular column


query= if you want to limit the results (for example, active=true)