Skip to main content

Style Manager

This video tutorial will help you know everything about the Style Manager. You can learn what the style manager as a UI layer is and how you can use it to make your web application interesting.

1. UI Panel​

Style manager is the UI layer of the web app. It helps to place objects as per your preference such as buttons etc. When you select a button the UI panel appearing on the right-hand-side can be used to make changes.

DrapCode SignUp Form

2. Alignment​

As the name suggests it aligns objects left, right and center. The object moves within the parent layer.

DrapCode SignUp Form

3. Display​

With this you can display or showcase the elements by choosing them from the dropdown.

DrapCode SignUp Form

4. Position​

This is the position attribute of CSS. It can be set to position the object as static, fixed etc.

DrapCode SignUp Form

5. Top, Right, Left, Bottom​

These are advanced options for object placements.

DrapCode SignUp Form

6. Dimension​

This option helps you set the objetc's height, width as maximum or minimum form.

DrapCode SignUp Form

7. Margin​

This defines the gap of the object from the top, bottom, right or left, within the parent component.

DrapCode SignUp Form

8. Padding​

The objects inside the component can be adjusted to the top, bottom, left or right with padding.

DrapCode SignUp Form

9. Font and Font Size​

You can add your preferred font to the chosen object. While you can customizes size of the font with font size.

DrapCode SignUp Form

10. Letter Spacing​

Add spacing to the letters with this option.

DrapCode SignUp Form

11. Font Style​

change style of fonts with font style

DrapCode SignUp Form

12. Font Color​

Change colors of your font using this option.

DrapCode SignUp Form

13. Line Height​

Change the height of the lines with this option.

DrapCode SignUp Form

14. Text Align​

Align the text using this option.

DrapCode SignUp Form

15. Text Decoration​

Highlight your text in various ways using text decorations like underline etc.

DrapCode SignUp Form

16. Text Shadow​

Apply shadow to your text using this option.

DrapCode SignUp Form

17. Decorations​

Add decorations such as shadow, opacity, background etc. to your text.

DrapCode SignUp Form

18. Border​

Apply border to your object with this option.

DrapCode SignUp Form

19. Animation​

Add animation to your dynamic web app using this option.

DrapCode SignUp Form

20. Extra​

Diversify your animation using these options in Extra.

DrapCode SignUp Form

21. Flex​

Use Flex properties to build a dynamic web app.

DrapCode SignUp Form