Styling

In this section you will learn how to use the utility classes for styling your app.

General styling

When the website operates within the app, we will include an additional attribute in the body tag, called startiapp. This enables the addition of app-specific styles by utilizing the following syntax in your CSS:

body[startiapp] {
  ...your app specific styles goes here...
}

Built-in classes

Hide elements when in starti.app

startiapp-hide-in-app and startiapp-show-in-browser

These classes hides the element in the app. It is useful for hiding elements that are only needed in the web version of the app.

Show elements when in starti.app

startiapp-hide-in-browser and startiapp-show-in-app

These classes hides the element in the browser. It is useful for hiding elements that are only needed in the app version of the app.

CSS Variables

Inset variables 

var(--startiapp-inset-top, 0px);
var(--startiapp-inset-right, 0px);
var(--startiapp-inset-bottom, 0px);
var(--startiapp-inset-left, 0px);

These variables can be used to position elements relative to the safe area of the device. The safe area is the area of the screen that is not covered by the status bar, navigation bar, etc.

When using the insets it’s important to set viewport-fit=cover in the HTML. This can be done using a meta-tag:

<meta name="viewport" content="width=device-width, viewport-fit=cover">

Example

In the example, we observe a page where one section is only visible in the app, while another section is exclusively visible in the browser. The text appears black in the browser and blue in the app.


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.starti.app/c/{YOUR_BRAND}/main.js"></script>
    <link rel="stylesheet" href="https://cdn.starti.app/c/{YOUR_BRAND}/main.css" />

    <style>
      body[startiapp] {
        color: blue;
      }
    </style>
  </head>

  <body>
    <h1>Styles page</h1>

    <div class="startiapp-hide-in-app">
      This text is only visible in the browser.
    </div>

    <div class="startiapp-hide-in-browser">
      This text is only visible in the app.
    </div>
  </body>
</html>
← Basic functionality
Debug →