How To Use The Inspector

This document explains how to use the Inspector sidebar in the editor of apprat.io

Using the inspector, you can modify various styles for a selected element without any CSS styling knowledge while having a real-time preview directly in the app builder.

Element Visibility

The buttons at the top of the inspector control the selected element's visibility on the phone, tablet, laptop, and desktop. If the button's background is white, the selected element is hidden on that device. These configuration options help to build genuinely responsive apps.

Screenshot
Modify the element visibility for various devices

Attributes

Attributes section of inspector contains:

  • Position - This is the same as aligning text left/center/right, but for elements instead of text.
  • ID - A unique ID for the selected element, so the CSS is applied easier to it.
  • Class - All the selected element classes are listed here, you can remove them by clicking the X icon next to the class name, you can apply new custom classes to an element by clicking anywhere on the input (gray background), entering your class name and hitting enter or clicking the green checkmark. There is a bunch of predefined classes that you can use; for example, text-danger makes the text color red. You can find more predefined classes here.

This section has various other attributes depending on what element you have selected, for example, if you have a heading selected it has a heading type attribute so that you can choose between h1, h2, h3, h4, h5, h6.

Screenshot
Modify the position, the ID, and the Class easily

Background

The Background section will allow you to set a background image, color, or gradient for a selected element.

Color

Click on the Color button to bring up a color picker. Here you can choose from over 100 different predefined popular colors. You can, of course, select an utterly custom color by dragging your mouse in the color palette and selecting transparency with dragger underneath, you can also enter a color code in the input below.

Screenshot
Change the color easily

Image

Click on the Image button to bring up an image background panel, here you can apply one of over 40 textures included with apprat.io and control the background image alignment and repeating. You can also click on the upload image button to upload and use a custom image.

Screenshot
Add a background image easily

Gradient

Click on the Gradient button to bring up a gradient panel, here you can choose from over 30 gradients included with apprat.io to use as selected element's background.

Screenshot
Apply a gradient pattern

Shadows

You can use shadows panel to apply shadows to a selected element or text inside it.

  • Angle - to control shadows angle, click on the green knob in the circle, and drag it around.
  • Color - to control shadows color, click on the white square, this brings up a color picker, same as the one for elements background color.
  • Distance - this controls how far away the shadow will be from the selected element.
  • Blur - this controls how bright the shadow is.
  • Spread - this controls how big the shadow is.
  • Box/Text - this applies the shadow to either the element box or text inside it.
  • Inner/Outter - will either apply shadow to the outside or inside of the selected element box.
Screenshot
Apply a shadow

Margin And Padding

Margin controls the spacing between selected elements box and the content outside, while padding controls the spacing between selected elements border and the content inside it.

To use the dragger, first select the sides you want to apply margin or padding to and then drag the handle until you have your desired effect. For more precise control, you can enter your margin and padding values in the input boxes, and the big one applies the value to all sides while the smaller ones represent a particular side of the element's box.

Screenshot
Modify or add a margin and/or padding

Text Style

This panel controls the appearance of the text of the selected element.

Font

Click on the desired font, to change selected elements font to one of the native browser fonts, or click the G icon to open up google fonts modal so that you can choose from one of nearly 700 Google Fonts.

Style

Click on of the buttons under the fonts to change text boldness or make it italic, underlines, overlined, or crossed-out.

Size, Color, And Alignment

You can change the text size by entering the desired number in the input box, and you can click one of the alignment options to align text left, center or right or you can change the text color by clicking on the square at the bottom of the panel to bring up a color picker.

Screenshot
Modify the text style

Border / Border Roundness

In the last two panels, you can control the selected elements border appearance, and it's corners roundness.

Width, Color, And Style

To change border width and color, select the border sides you want to change at the top and then either use the dragger or input boxes at the bottom to get the desired effect. To change the border color, click on the square under the dragger to bring up a color picker.

Roundness

To change border roundness, apply the border you want via the border panel, then select the corners you want to change at the top and use the dragger or enter the value you want in the input boxes.

Screenshot
Modify the border style