Developer Docs - Mobile Docs - Utilities

Leverage built-in CSS classes to powerfully style your application.

Margin & Padding

Applies to: View

Many elements inherit from View and therefore can have margin and padding applied to them. Below are the utility classes for adding margins to your views.

The format for specifying margins is .m{sides}-{size} and similarly for padding is .p{sides}-{size}.

Where the sizes are represented as:

And the size is one of the following:

Examples

This would produce a margin of 16 on all sides.

This would produce a margin and padding of 16 on all sides.

This would produce a margin of 8 on top.

Opacity

Applies to: VisualElement

You can apply the following classes to change to opacity of an element.

Visibility

Applies to VisualElement

The following classes can be used to show/hide an element.

Spacing

Applies to StackLayout

The format for specifying spacing is .spacing-{value}.

Where the values are represented as:

Examples

Grid Spacing

Applies to Grid and Responsive Layout

Examples

Adds a row gap to the grid.

Adds a column gap to the grid.

Border Width

Applies to: Button, ImageButton, StyledBorder

The following border width classes are provided to help with styling buttons.

Border Radius

Applies to: BoxView, Button, Frame, ImageButton, StyledBorder

The following classes are provided to adjust the radius of borders.

Targeting Device Platforms

If you need to target styling to a specific platform (iOS or Android) you can use the parent classes .ios or .android.

.ios .heading1 {
    font-size: 33; 
}

You can also target specific platforms in XAML with an On Device Platform extension.  

Targeting Device Types

Similar to platforms you can also target device types with .phone or .tablet.

.phone .heading1 {
    font-size: 33;
}

Targeting Pages

When configuring a page you can provide a CSS class you would like to add to the page. This will allow you to scope the styling of elements on that page.

.page-aboutus .heading1 {
    font-size: 33;
}

Targeting Blocks

.block-calendarview .heading1 {
    font-size: 33;
}

Text Shadow

This property allows you to add a shadow to Labels. The syntax looks like this:

-rock-text-shadow: [distanceX] [distanceY] [blurRadius] [color]

Example:

.hero .hero-title {
    font-size: 24;
    color: white;
    -rock-text-shadow: 2 2 4 black;
}