2.3 Working With the Mason UI
In this, the third lesson of our short course, you’ll learn how to use the Mason user interface. More specifically, we’ll have a closer look at the visual editor you can use to build custom features. We’ll do a quick tour, see its capabilities, and see what we can create with it. Let’s begin.
2.3 Working With the Mason UI
Welcome to the third lesson of this course, where you'll learn how to use the Mason interface. More specifically, we'll have a closer look at the visual editor you can use to build custom features. We'll do a quick tour, see its capabilities, and we'll see what we can create with it. Let's begin. After you log into Mason, this is the page that you're gonna see first, it's basically My Projects. And if you have a project created here, you can select it. If you don't, you'll have a button here that allows you to create a new project. So right now, I have reached the limit of the number of projects I can use on my free plan. So to move forward, I'm gonna choose Tuts+ Demo, where I have this feature we created in the previous lesson. And right here, you can filter by features, you can see the publishing status. Right now, all my features have been published. And then right here on the bottom we have Features, Data Sources, and Updates. We're not gonna go over data sources in this course, that's moving towards the more complex side of Mason. But under Features, you'll find a list of all the features you created. On the right side, you have a list of your current members, and you can always invite new members here. Let's click on this feature to open up the visual editor. Now, this is pretty straightforward. Starting from the top, we have the two tabs that allow us to switch between Design and Configuration mode. Design mode is basically this canvas, where you can add elements, you can alter their properties. While Configure is the place where you can configure your data sources, your forms, your domains, and also your integrations. And in here, you can, of course, make some changes to the text, but you can't go very in-depth with the customization like you can under Design. Because in Design, when you select an element, this panel pops up on the right side, where you can basically style that element using a variety of controls. From setting width, height, to text styles, alignment options, colors for background, border, you can even add box shadow. And also something very cool, you can add spacing here. So if I want this bit to have larger top and bottom margin or padding, I can change it by using these controls right here. And of course, it goes right and left as well. On the top bar, right in the middle, we can see a switcher for the different breakpoints. Universal means that any kind of property you apply here will be available on all the other breakpoints. But you can switch between the different breakpoints, and you will see how your design adapts to those breakpoints. And you can make individual changes to each breakpoint. So for example, here, maybe I want to remove this top padding, right, because it occupies too much vertical space. So that got rid of the padding on mobile, but if we go back to tablet, That padding is still there. So any change that you make in a specific breakpoint, other than universal, is unique to that breakpoint. Anything you make under universal will be applied to all the other breakpoints as well. Here you also have an option to preview. So if you hit Preview, you get a new window with a preview of your feature. Here are options that we played around in the previous lesson, deploy and publish. And then on the left side, we have access to a couple of elements. We can add containers, which are just basically, well, containers, they service parents for other elements. You can add columns or you can add rows. And then you can add some basic controls, like text, headings, lists, buttons, images, and dividers. You can add forms and form elements, and some other components, like dropdown menu, tooltip, YouTube videos. And then, and this is something very interesting, you can add custom elements and Mason features. So for example, if I were to create a new feature, and let's go with black, let's say Testing. I can drag this in, Mason Feature, I can go to Attributes, I can select a feature, Demo sign in, for example. And this embeds that feature in another feature. So we can nest features in this way. Finally, right here at the bottom we have some undo, redo, zooming controls, and something very interesting, show and hide outlines. This is actually very useful when you’re creating the layout for a feature. You can hide it to see the final product or show it to make it easier for yourself to see other boundaries of each container, column, element, and so on. All right, that's a quick look at what the visual editor can do. Now, let's put it to good use and create a simple page from scratch. That's coming up in the next lesson.