Editor X Cascading Rule

You guys made it to the fourth module. This module is all about going responsive or in other words, making our design. Mobile friendly. If you recall, back in early days of first-hand devices, having getting a website was a huge pain. You had to zoom in and pinch your way across a website in terms like responsive or mobile first were confusing.

Luckily those days are long gone. The most significant thing we need to understand. When building websites with editor X is that we always work using the cascading rule. Basically it means we start from desktop breakpoints and any layout or style changes we make in this view, board will trickle down to lower breakpoints, thus the name cascading rules.

Now from time to time, when we get totally zoned out and we're making edits and different break points, we realize they don't get applied in larger break points. This can be so fresh. Because we totally forget about the cascading rule editor X has a really cool solution for this. For example, let's say we're going to the mobile break point in our Creek demo, and let's go ahead and drop in any button.

Let's quickly change. It's designed properties.

If we changed the break point to tablet or desktop, all those tiles are gone, but if we right click and select copy from break points, We can quickly pull from lower break points, be aware that these only work on styles. So if you move the position within end section, these changes, won't get rendered to other break points.

The same rule applies. If you move this button into a container break points will always respect structure. So you need to keep this in mind when you're building. Your layout, another awesome feature in editor X is the ability to create your own custom break points. This is really, really helpful, especially when you design for unusual divides resolutions, and there's no simple way to customize a minor pixel or margin.

Simply use the handlebars to find the exact point that you need. Then on the top next to the break point icon. Click the three dots and add your own break point. It's that easy. If you're a pixel perfectionist like myself, this will make you really. Anytime you need to force any element properties into different break points.

Always use the pixel and whenever you need to make anything scale, organically, always use percentage values. Why is this important as well? If we remember in many cases, You don't want your floating elements to scale out of control. So you'll be better off manually scaling them with a fixed size when it comes to sections or containers.

The best unit to stick with is VW and V H viewport with and viewport height. These units are meant to be used along with the minimum and maximum attributes. If we have a hundred VH and no max height. It can really mess up your designs in a much larger lender, be mindful and use these units with care, the fr or fraction.

It's a relatively new unit. It's used to scale columns and rows within a grid system. This unit is basically one fraction of the available space. For example, similar to how we did the movies. End game cards. I used it for the sake of simplicity. If I have three cards, I just set the car to have 80% in the middle.

And that's it. Editor X takes care of the rest using the one fraction on each side. Why don't we go ahead and apply what we've learned and start making our stream VR website, mobile friendly. Do this.

‍