KreativePro Masterclass
Hello, {first_name}
4.1
Cascading Rule
Learn to Build Websites with Editor X
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
25
lessons
4
hours
MINUTES
1
files
Level

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCESS
Overview

Editor X Cascading Rule

In this lesson, we identify all units of measurement and understand how the Editor X cascading rule works.

Try out Editor X for FREE

Reviews

Manases
Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
Noel
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
Mae
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

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.

Coming Soon

Editor X
25
lessons
4
hours
MINUTES
1
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

LIFETIME 💎 ACCESS
PRICE INCREASE IN
00
Days
00
hrs
00
mins
00
secs
🚀
Welcome to the Tribe! 💜 Something cool is coming your way...