Layout utilities

Appress provides a set of CSS variables and utility classes to help you build mobile-friendly layouts that adapt to different devices and platforms.

CSS variables

--appress-status-bar-height

The height of the device’s status bar (the area showing time, battery, and signal indicators at the top of the screen). This variable adjusts automatically based on the user’s device.

Use it to add top spacing to elements that would otherwise be hidden behind the status bar.

Example:

css

.my-header {
  margin-top: var(--appress-status-bar-height,0px);
}

Utility classes

.appress-sticky

Pins an element to the top of the screen, just below the status bar. The class automatically accounts for the status bar height, so the element won’t be obscured.

Useful for sticky headers, search bars, or any element that should stay visible while the user scrolls.

Example:

html

<div class="appress-sticky">
  <!-- Your sticky content -->
</div>

.appress-dismiss-first-launch-screen

This class is used to dismiss the first launch screen.