To let you build custom functionality that seamlessly integrates with the app you need to be able to adopt to the styling of the app. To let you do this we will provide you with a stylesheet that matches the styling of your app.


How to include the app styling?


To include the stylesheet in your HTML please add the following line of code to your HTML file (in the head section). 


<link rel="stylesheet" type="text/css" href="/bridge/styles.css">


What's inside?


The stylesheet contains a number of CSS Classes as well as some global styling.


body
We will automatically adjust the body styling to match the font and text color.


a
The styling for hyperlinks will be adjusted to match the text color and border color of the app. 


h1, h2, h3, h4, h5, h6
The styling of all the headings will be adjusted to match the text color and font family as specified in the app.


p
The styling for a paragraph will be adjusted to match text color of the app.


Additional classes


We also provide a set of CSS Classes you can use to style your JavaScript block.


.background-color
Applying this class will set the background color of the HTML Element to match the background color specified for the app (or block if custom styling has been applied)


.appButton
This class is ment to be applied to a button and will adjust the height, background color and text color of the button so it will match the styling of the app.


.appTextfield
This class is ment to be applied to a textfield and will adjust the height, background color and text color of the textfield so it will match the styling of the app.


.appTextarea
This class is ment to be applied to a text area and will adjust the height, background color and text color of the text area so it will match the styling of the app.


Color classes


Next to the additional classes there are a number of color classes you can apply. Every color class has three implementations, so e.g. the TitleColor class will have the following three versions:


.titlecolor: Affecting just the text color
.titlecolor-background: Affecting just the background color
.titlecolor-border: Affecting just the color of the border


The following color classes are available:



  • TitleColor

  • BodyColor

  • SupportColor