0:00:00
Welcome back to our short series on getting started with frames. In part one, I showed you how to use frames to create a completely custom wireframe for a new website. I showed you how quick that is, how simple it is. I also showed you how to make some easy adjustments really fast to those wireframes to really dial them in to get them exactly how you want them. Now what I’m going to do in part two is show you how to take that wireframe and create a completely custom design. As I go through this, I want you to focus on two specific things. Number one, how easy it is to style these frames into any look and feel that you’re wanting to achieve, simply by targeting the classes that are already on these frames. Obviously, that’s going to give you a scalable, maintainable design at the end of the day as well. The second thing I want you to focus on is how there are basically no limits to your creativity when it comes to customizing these frames.
0:00:59
I don’t want you to feel like there are limitations because there aren’t any limitations. Literally, we could take this wireframe right here that I’m going to be working on. We could create a thousand different unique designs and looks and feels from this one wire frame. Using frames, it’s all very simple and easy. There are no limits on your creativity. What I don’t want you to focus on are the specific design decisions that I’m making in this tutorial. You may not like some of the design decisions that I’m making. That’s perfectly okay. That’s not the point of the training. The point of the training is to demonstrate that you could do this however you want. I want to show you the methodology. I want to show you the workflow. You’re free to make your own design decisions.
0:01:49
As you watch me, just note that this is pretty easy to make these design decisions and there really are no limitations. I could be making whatever decisions I want to make and achieve whatever look and feel I want to achieve. As long as you focus on the right things, you’re going to understand the point and the purpose and the value in what I’m showing here. I’m going to go ahead and share my screen. We’re going to take a quick look at the wireframe that we created. The only change that I’ve made to this wireframe is I remove some of the, let’s play around styling on these cards that we did in part one. I basically put these back to their exact default state that they would be coming out of frames. That’s pretty much it. I have not touched anything else. I will say that we designed up this footer as an example in part one.
0:02:38
If you haven’t watched part one, you definitely need to go watch that first. Then come back and watch this part, but I styled this frame in part one and we’re actually going to leave it exactly as it is. I know that one of the big questions people are going to have is, hey, frames is like a base unstyled wireframe slash layout system. By default, the web has a light base. You see all of these are like white backgrounds and light grays and things like that. That’s typically how we approach wireframes. But if we want to go with a dark base for our web design, how easy is it to get from where frames is as a starting point to a completely dark base for the entire website? Because I know that’s going to be a question, I’m going to do that in this example. We are going to turn this particular website into a dark base website because I want to show you how easy it is with automatic CSS and frames. Just keep in mind, this doesn’t have to be the decision you make. This is only one example.
0:03:42
We can take this wireframe and do it a thousand different ways. This is just one way. Okay? Let’s go ahead and get started. So to start my dark base, I’m actually going to do this from the automatic CSS dashboard. I’m going to go to typography and under typography, I’m going to go down to body styling. You’re going to see that yes, I can style body text in line height and all of this good stuff here, but I can also style my body background color here. Just the background color for my entire website. So if I do a var base here, that’s our base color. I recommend using whatever the darkest color of your backgrounds is going to be. I recommend using that as your base color. So I put in var base here and my entire website now is going to be a dark base. If I go over to palette and I look at what my base color is, it’s actually set to black. And then of course down here, you can control all of your shade variations as well.
0:04:39
Right now I have it set to dark black. Now I’m going to hit save and we’re going to go look at this on the front end. So I’m going to refresh and immediately you’re going to see that this top section up here is black. This is all black. Everything is black. We’ve converted this website with one setting, well, basically one setting into a dark base website. Now we do have to solve for the text issue right here. So what I want you to notice is that every frame, this is a section, this is a section, right? This has a background image. So obviously it’s not going to, you’re seeing the image, right? This section right here, they didn’t have background colors set, right? They were just inheriting whatever was behind them.
0:05:20
So I don’t have to go frame by frame by frame by frame, converting them all to a dark base. They simply inherit the dark base that I gave the website. It’s very, very powerful and insanely efficient, okay? So that right off the bat, you don’t have to do a lot of work to get this to look the way you want. The only thing I need to do is I need to make all of my headings and text a light color so that it shows up properly. It says this is a dark base website. So there’s two ways to do this. Number one, an automatic CSS. Again under our typography tab, body styling, we do have a body text color. However, if you’re using bricks builder, bricks has a buzz. And there’s already a bug report filed and they’re already acknowledging and working on the bug of it overrides body text color.
0:06:06
So if you set this here, automatic CSS is not going to be able to control your body and headings properly, okay? So what I would recommend you do to solve for this until the bug is fixed. Once they’ve announced that this issue is fixed, you can absolutely do it from right here in automatic CSS. But for now, go to theme styles, go to typography, under body, go ahead and set your color right here. And I’m going to go to my shade color palette and I’m going to choose basically var white, which is just pure white. And I’m going to go ahead and hit save. Now why don’t you see the dark base inside the builder here? The reason is because I changed it in automatic CSS and I haven’t refreshed the builder yet. But if I refresh the builder, you’re going to see that change take effect. And if we look on the front end, you’re also going to see the change take effect here. And so with two settings, I was able to convert this website into a black base.
0:06:58
Now you see two other problems here. These had colors set on them. Okay? So now what I’m going to do is I’m going to scroll down in the editor and I’m going to grab this text right here and I’m going to go see what our color is set to. It’s actually set to base medium. Now I actually want to keep it at base medium. I just wish the base medium was a little bit lighter than it currently is. And guys, this is another reason why you know some people ask, hey, why does automatic CSS give you all these shades and opacities and things like that? I don’t really use those. Well, the answer is you should be using them probably. I don’t want all my text to be white, right? I want some text to be lighter than other colors and it adds more dimension and depth to the design.
0:07:42
And it just makes things more visually interesting. So I use a base medium shade on our text right here when I want that text to be lighter than white. Now the thing is, is out of the box, as you see, this is out of the box, the color may be a little, it’s a little too dark, all right, for the base website that we’re going for. So what I’m going to do is I’m going to go over to palette and I’m going to go down to base and I’m going to look at the lightness value for my medium and I see that it is set to 50%. It’s very easy to make shades lighter or darker in automatic CSS simply by changing the lightness value. If I change this to 70, it’s going to get lighter. So now we’re going to go on the front end and refresh and you see that this text is now lighter and that’s probably accessible now where it was not accessible before. And we can run an accessibility checker on this to see what the contrast ratio is.
0:08:37
If this text needs to be lighter, guess what? It’s so easy. You go back here, you bump this lightness value up a little bit more until it’s passing the accessibility check and then you’re pretty much good to go. So automatic CSS gives you the ability to create these adjustments on the fly. You don’t have to think about generating all of these different colors. What are the hex codes? What are this? No, you don’t have to worry about any of that stuff. It’s all pre-configured for you and then you adjust it as you need to adjust it. Now what about these icons right here? I’d actually like them to be my website’s action color. So I’m going to go ahead and edit those. Now the one rule that you need to follow when you’re using frames and creating your custom design is 95, 97, 98 percent of the time you’re going to want to make the change at the class level.
0:09:26
So I click on the icon, I see that there is a class here and I click on the class. Now I’m free to make the change. I’m going to go to the icon color right here and I’m going to go to my action palette and I’m going to choose my action color and you see that all three of them adopt the change that’s because I’m editing the class. If I edit at the ID level, which is the default, see this is the ID right here and I don’t have the class selected, if you edit the ID level it’ll change that one icon. None of your other icons will change. I want all of my icons to be the same color, right? Just like I wanted all of my text to be the same color. So we need to make sure as we do these kinds of tweaks and adjustments and customizations that we do them at the class level. Now I’m going to continue to play with this card. So I’m going to make sure that my card class is selected, I’m going to go to style and I’m going to go to layout because I want to add some padding to this card, maybe medium padding, maybe large padding or I can choose any value I want or I can choose a frames utility variable such as FR card padding.
0:10:36
If I want all my cards to be very consistent in the padding that they have, I can use FR card padding on all my different card types, they’ll all have the same amount of padding and they’ll all be adjustable from the automatic CSS dashboard. Now this is a decision that you’re going to make. Thankfully with automatic CSS it makes your decisions very easy. Some people might hit this little toggle right here and put 2M and get 2M of padding, am I, oh that’s margin, we don’t want it to that, 2M of padding and you’re going to see I get 2M of padding here. However, this is what we call in design a magic number or development, a magic number. There’s really no reason that I chose 2M. I just chose it out of thin air and I maybe decided that it looked good. The problem with doing this is that there’s no consistency across the website or if there is consistency it’s because you’re constantly going back and checking different elements and seeing what was the value I use there. Okay now I use that over here.
0:11:35
What was the value I use there? Oh okay now I use it over there. No consistency whatsoever. A framework like automatic CSS brings easy consistency into the mix. You just know hey let’s just use card padding on all our cards or let’s use space M on all of our cards and not only is everything consistent it’s also responsive. Okay so what we’re going to do here is use a variable. Almost in all cases when it has to do with spacing you’re using variables from automatic CSS or frames. When you’re using colors you’re using the color system right. You want to keep as much as possible operating within the automatic CSS and frames systems. You don’t want to just go rogue throwing random values everywhere. Just like you don’t want to go rogue throwing styles on IDs or switching to using utility classes when you have custom classes already pre-made for you. Stick within the system and it’s all going to work out for you.
0:12:32
The reason the system is there is because it’s the most maintainable and most scalable system available. Right so if you abandon the system you’re also going to abandon scalability and maintainability to some degree. Okay so I’m going to use space L on this and I’m going to get my L padding on all of my cards. The next thing that I’m going to do is I’m going to add a border. So I’m going to go into border. I’m going to go here. I’m going to just put a one. So one pixels on all sides. I’m going to make it a solid border. And here’s another area to answer that question. Why does automatic CSS provide only shades and transparencies and things like this? Why want a very faint light border around the entire card?
0:13:13
I’m talking really light. Like if I took a white color and I made it 10% of that then that’s the kind of color that I want. Well guess what? That color is already available to you in automatic CSS. So I’m in my base palette. I’m going to go to light trans 10. Which is my base color, which is almost black, it’s the light version of that, which is almost white, and then 10% of that. So if I put base light trans 10 on here, I’m going to get a very faint light border. And I actually want to make it a little bit thicker. Let’s see. Is it 1.5? And then if I decide that’s kind of hard to see, if I decide I want that to be 20, now I make a 20 and look at this.
0:13:56
So we’re going to go the front end. The main card now has a base light transparent border on it. And it’s all that L padding. It’s looking really, really, really good. Okay. Now the next thing that I want to do is I actually want to make this section kind of dark. So maybe like the base color but ultra dark. Base is already dark, but I want a darker shade because I want to start kind of creating some more depth in this design. I don’t want every section to be the same color. Right? So I’m going to go ahead to FR Content Section Alpha. Now there’s here is a legitimate decision. Remember I said 95% of the time you want to edit at the class level. The question is do I want every version, every copy of this element to have this same style or do I want this one element in existence right here to have this style.
0:14:52
And when I add this frame somewhere else to another page, I’ll make another decision. As to what I want the color to be at that point. Because on another page I might use the same frame but in a different part of the page and a different part of the page might mean it needs a different background color. So here’s an example where I’m actually not going to set this at the class level. I’m just going to use a class called BG base ultra dark. Same is using the ultra dark color from the palette, right? But I’m not applying it to the class level. I’m using a class to apply it to this one frame, right? It’s not going to apply to this frame anywhere else. So I hit BG base ultra dark and it’s going to apply it. Now what we’re going to do is go check on the front end and you’re going to see, oh wow, hold on, it actually made it lighter. Why did it make it lighter than like how did ultra dark get lighter than the base color already was?
0:15:43
Let’s go back and look at our palette. So you have our base color right now set to pure black. There is no shade that can be darker than pure black. Pure black is pure black. So what we actually need to do is adjust our base color. So I’m going to choose more of a charcoal. So we’re going to go to 222. I put enough twos in there. Okay. So all twos, that’s going to give me like a nice charcoal color. Charcoal color. I’m going to save changes on that. We’re going to go look at this again on the front end. Oh, and now things have switched up. Look at this.
0:16:15
Ultra dark suddenly is darker. And then my base charcoal is applying to all of my other sections by default. Okay. Now things are starting to make sense. When you have pure black and you’re like, I need darker than pure black. You’re not going to be able to get there, right? So you really don’t want dark pure black as your base color. But a nice dark charcoal works really well because now I can have that charcoal color and I can have a darker version of that charcoal color wherever I want it via a utility class, a variable, whatever. Okay. So we’re starting to get to where we want to go. All right, the next thing that we are going to do is I would like to have a little bit of a background pattern inside that section. But once again, I don’t want this background pattern to always have to be in this particular frame.
0:17:05
I want to be able to apply a background pattern using a class wherever I want that background pattern to show up. So here’s what I’m going to do. I’m going to go get a class ready. I’m going to click on this frame and I’m going to add another class. And this is going to be BG double dash will do pattern dark. Okay. I might want to spell pattern correctly. So BG pattern dark. I’m going to put that class on here. And then what I’m going to do is I’m going to go get myself a background pattern. So I’m going to go to my utilities here. I’m just using this thing called pattern monster. I’m going to come through and I’m going to see if I can find a pattern that might look decent.
0:17:44
This one right here. It’ll reverse triangle things. Okay. So all I’m going to do here is I’m going to choose black. I’m going to bring this down to something really low. Like 0.10 something like that. I could even do white here if I wanted to be light. I don’t know which one I want actually. And this is where you get into a territory of this. You’re going to have to play around with some things. Just like you would do in Figma or anywhere else. You really just want to play around and see if you can find. I mean, look at that. That’s pretty. Pretty good.
0:18:15
I mean, when I say light, I want it like light, light. It’ll go like real light. Let’s go ahead and grab our CSS. It’s just going to hand me the CSS. Now on my class, BG pattern dark, I’m going to go and I’m going to go to the CSS tab. I’m going to go into the root level in bricks. You want to paste all of your CSS into the root. And then I’m just going to paste that. And you’re going to see, look at that. I got the light background texture that I was looking for. I do want to make it a little bit lighter. And there’s somewhere in here, here it is right here. Maybe 0.2, there we go. Very, very, very faint. OK, so let’s go in.
0:18:52
And you can see it right back there in the background, very faint little pattern. Just to provide a little bit of texture to this section so that all of my colors aren’t completely flat. And you can see that I’m going to be able to apply that because it’s a white opacity. I’m going to be able to apply that to any of my base colors. It’s going to work flawlessly out of the box. OK, the next thing that I want to do is I want to come in and on this card, because right now these cards don’t have a background color. I’m seeing right through them. I’m going to go to backgrounds. I’m going to go here. And I’m going to go ahead and choose maybe dark. And I’m going to save. And you’re going to notice right off the bat, Kevin, that’s not looking so hot. That’s just really not a great, gray color there.
0:19:39
OK, no problem whatsoever. I used a shade from Automatic CSS called base dark. And it didn’t look the way that I wanted it to. So the question is am I stuck? Do I do I abandon ship? Do I do I ask for a refund? What do I do in this situation? Well, the answer is you go tweak the shade. That’s it. So you go back to Automatic CSS and you say, you know what, my dark here, here’s my darker here. It’s 25% lightness. If I make that less, it’s going to get darker. And my ultra dark is at 10% lightness. So if I make my 25 closer to my 10, they’ll come closer together.
0:20:14
I don’t want them to match, obviously, because I want them to be different. But I don’t want it to be so light. So maybe I’m going to go from 25 down to 15. We’re going to hit save. And now we’re going to see what that does to our cards. So I’m going to refresh and look at that. So it just changed. And it changed everywhere I’ve used that color. So that’s looking pretty good. Now I make a decision. So I want to extend that background color through to these cards, like not the background color, the background pattern, perhaps. Let me refresh the builder so that we can see what we’re working with in the builder. All right. So if I want to do this, I’m just going to grab, we’re just going to see if this works.
0:20:52
We’re going to see if I can, if I like this or don’t like it, okay? We’re playing around. We’re experimenting. We’re working through a design process. So I’m going to go ahead and grab content section, actually, sorry, we’re going to grab BG pattern dark. Remember, I put it on a custom class. So style, CSS, grab all of that code right there. And in this case, I would want every card, every feature card alpha to have the same background pattern. Because I don’t want to go card to card to card to card to card choosing whether it has a pattern or not. That’s not the game I want to play. So I’m going to paste this in and you see immediately our exact same background pattern enters into the card.
0:21:33
Now what you can actually do here is you can change the scale on that pattern. So it’s actually smaller on the card than it is in your normal section background. I might even go like 1.25 there. And that’s going to give those cards, again, a little bit of texture on the front end. And I’m kind of, I’m kind of liking that kind of, you may not like that, but I’m kind of liking it. While I’m here, I’m just going to pop in content, okay? So we’re going to throw this content in because I want this to actually be, you know, I want to look somewhat realistic, right? So I’m just going to throw in the content that we prepared ahead of time. Yeah, we did this very quick. This is in a real client site, right? We actually didn’t even put descriptions in for this. So I’m going to go ahead and hit save. And then now we have our content in.
0:22:21
Okay, perfect. Next thing we’re going to do is we’re going to throw our content in on the top side up here. So I’m going to throw this in and I’m going to get this paragraph going just so we can see what some real content in here would look like. This is going to say more about us. This is really like about the company right here, a nice little opener. And then what we want to do here is I actually want to add a video here, not an image. And I’ll say once again, we don’t provide the same frames for different purposes. But this exact layout is not provided with an image here and then a separate one with a video here. Why? Because we know you’re smart enough to just delete the little image placeholder and put a video player in. Okay.
0:23:08
So I’m going to show you exactly how to do that. We see over here in the structure panel, there’s a media wrapper and there’s an image. Leave the media wrapper there and just get rid of the image. And then inside of that media wrapper, what you’re going to want to do is add a video player. Very easy to do inside of bricks. And I’m going to go ahead and I’m going to grab without playing the audio. I’m going to go ahead and grab the video. All right. And we’re going to come over here to our video and we’re going to put in our ID. And there you go. It’s going to swap right to our video. Now the reason the wrapper is there is because the wrapper gives you more flexibility. Let’s say that I wanted to round the corners on this video. Well you could try to do that on the video player.
0:23:52
Because you run into issues because these are iframes and all this other stuff is going on. But if you use the wrapper, it’s very, very, very easy. So I’m going to grab the class here because I want every section alpha media wrapper to have this exact same effect. I’m going to go to style. I’m going to go to border. I’m going to go to border radius. And remember what I said before. If I can’t at all possible, stay within the automatic CSS system or the frames system. So for radius, I have two options. I have an automatic CSS variable or I have a frames variable. The frames variable and there are cheat sheets for all of this. Would be fr card radius. If I wanted to have the same radius that all my cards are going to have or I can simply use like radius s from automatic CSS, which is a small border radius.
0:24:45
I’m going to apply that to all sides. And you’re going to see that we actually don’t have rounded corners here yet. And this is kind of where there’s a little bit of a learning curve just in web design in general. So a wrapper, when you put a border radius on it, is going to actually the border radius is going to be behind the image that is in the wrapper unless you tell the wrapper to not allow content to overflow it. Right now the corners of the player are overflowing the wrapper where the radius is. I can now chop that off by setting all the overflow on this wrapper to hit it. Now, this isn’t a frames thing. It’s not a bricks thing. It’s not an ACSS thing. This is just web design. OK, if you don’t know these things, then there’s going to be a little bit of a learning curve and you might be a little bit frustrated.
0:25:32
But this is not because of you’re using frames. It’s not because you’re using automatic CSS. It’s simply because you don’t know the basics of web design yet. And that’s perfectly OK. You just have to know, oh, I’m probably not that good at web design. I’ve got to get better. It’s not frames or automatic CSS. It’s hard to use or anything else. So what we’re going to do is we’re going to go to layouts and then on the overflow, we’re just going to write the word hidden right there. And now you’re going to see refresh on the front end. Not only is our image gone, our placeholder, but we have a video that’s working and that video has rounded corners. And the wrapper actually made that really easy to use. The wrapper that we provide you also makes it easy to use pseudo elements.
0:26:16
If you want to use a pseudo little pattern over here behind the video player, you could do that. You could use a box shadow very easily using the wrapper. The wrapper is very, very, very handy. So you saw, I just deleted the placeholder image. I threw in a video player. I popped in my video ID and then I styled my wrapper a little bit and here we are. So now I’ve got a completely designed section here. This is exactly the way that I wanted to look and I’m just going to go ahead and save. And now we’re going to work on our hero section up here. So the first thing I’m going to do with my hero is simply replace this image. I want to get rid of this image. So I want to use this photo right here. I like the guy peering up into the into the cards. It’s kind of a good intro thing.
0:27:00
It’s like, you see right off the bat visually. Ooh, this is a mechanic. This is a repair shop, right? It’s not just a picture of a beautiful car. It’s like, oh, this is a mechanic. It’s a repair shop. It visually makes total sense. Okay? So I’m going to go ahead and insert this here. And that’s exactly, it’s pretty much how I want it right out of the gate. So what I’m going to do is I’m going to paste in our content. All right? Put this in down here. Perfect. I actually want to bold these things right here.
0:27:31
I always do command B because I think it’s bold and it’s not. It’s actually one of the mobile utility class or mobile shortcuts to see the mobile view. All right. So I’m going to get this. I’m going to bold that. Okay. So you can do all your normal little tech stuff that you would do. What about this heading right here? So I don’t want it to be so long. Now I have an option. In automatic CSS, you can actually limit the lengths of all of your H1s, all of your H2s, so on and so forth. Or I can just use FR hero India heading and say, hey, anytime I use FR hero India, I want my H1 to be this length right here. And that’s what I’m going to choose to do in this case.
0:28:12
So on FR hero, FR hero India heading, I’m going to go to style and I’m going to do width of let’s do 28 CH. And that’s going to make it 28 characters. That’s actually, that’s actually about what I want. And then I’m going to make sure that the max width is 100%. And I’m going to go ahead and hit save. I do want to add a little bit of a design accent here, okay? Like I said, you can go any direction you want to go with these designs. So what I’m going to do is on this class, hero India heading, I’m going to go ahead and I’m going to add a after element. So we’re going to go up here, click on after, under my content, I want to be open quotes, this is going to be blank. And then what I want to do is I want this to be 100% width of my heading. I want it to be 2.5 pixels tall and I want it to have a background color of my action color.
0:29:07
So I’m going to go here, I’m going to go to my action palette, grab my action color, perfect. And I want to do a display of flex. And I think we’re already seeing it. There it is right there. You guys see that blue line? Let me view on the front end so you can see it. Now, here’s the thing about this. It’s a little bit close to my heading. But I want to pause for a second and show you or make the point again that people say, what does insane consistency mean, Kevin, when you talk about insane consistency in your design and how automatic CSS and frames makes this very easy. Well I happen to know that the gap between this heading right here and this content is equal to a variable called FR content gap. It’s the gap between all of my content.
0:29:55
So I know that if I can make the gap between this blue line and my heading also equal to FR content gap, I don’t have to know what the value is. I just need to know that it needs to be equal to the same variable, right? Then it’ll be exactly the same. And I’ll achieve that insane consistency that I always talk about. So what I’m going to do is on that class, I’m going to go back to my after element right here that I was, that’s my blue line. And I’m going to go to margin top. And that’s going to be equal to FR content gap. And now when I save and I look at it again on the front end, look at that. It’s equal distance from my heading to my text below. I didn’t need to know what the value was. I was a 2M, was it 1.5M, was it some magic, what was the magic number? Don’t know, don’t care, don’t need to know. I know that all of my content is spaced out with FR content gap.
0:30:45
So when I needed to space out my pseudo element, my after element from my heading, I knew that the value was supposed to be FR content gap. I don’t have to know anything else, right? It makes it so easy. You’re just referencing these tokens over and over and over and over again. Okay. So I’ve got a little accent design line in there. The only other thing here is I need this to be a call to action. So schedule a repair. And this one right here is going to say learn more. Okay. Now I’m going to go ahead and save. And guys, look at this. I’ve got a hero section. I’ve got an intro section.
0:31:20
Everything is starting to come together. Now I’m going to scroll down and I’m going to start throwing in my content down here. All right. So I’m going to paste in here. And now we get to the accent heading. And in fact, what we decided is we did not want your, here we go again. This is actually a pause. I’ll go slow here. There is a lead paragraph given to you inside of this frame. This is FR feature section India. Lead paragraph given to you. You might come here and say, I don’t think I want to lead paragraph in here. What is this lead paragraph supposed to say? I can’t really think of good content for here. This heading of what kind of car do you drive?
0:31:58
That’s enough context for people. They don’t need this intro heading. So what do I do? Do I give up? Do I ask for a refund? Like what do I do in this situate? Guys, guys, you just be a human. You’re like, hey, I don’t need it. Okay. Get rid of it. Just delete. Gone. Okay. So that’s gone. Next thing we need to do is style our little accent heading right here.
0:32:22
So I’m going to go ahead and click on this. In fact, I need to get back to it in my structure panel. Bricks is hiding it on me. Okay. So let’s go into intro alpha, accent heading right here. And I need to select the class. But oh, check this out, guys. There’s two classes on here. What do we do? There’s FR accent heading. There’s FR intro alpha. That’s this intro frame right here. This is an introduction frame. FR intro alpha accent heading. Two classes that apparently seem to be assigned to do the same thing, but they’re actually not.
0:32:58
And this is where, again, we talk about scalability, maintainability. We give you these options knowing you have decisions to make as you build the site, as you design the site. So here are the decisions you make. When you style this accent heading, do you want it to only look the way you’re going to style it inside of an of this intro alpha frame? Or do you want it to look this way on all of your entire website? And so every accent heading is going to have the FR accent heading class, every single one on your site. So if you want this style that you’re about to give it to apply everywhere on your site, then you apply it to FR accent heading. If you want to be, if you want this accent heading to be unique to this particular frame, then you style it with the FRAME accent heading class. And you have a third option. If you only want it to look this way in this one instance, in this one section, and nowhere else, then you can style it at the ID level.
0:33:57
Okay, so you have three different options. That’s how much flexibility you have. Don’t look at it as confusion. Look at it as flexibility because that’s exactly what it is. If this class didn’t exist, there are going to be people who are like, no, I want this accent heading to look this way in this kind of frame all across my website, but nowhere else. Okay, well, you need this extra class. If however, you want all of your accent heading to look exactly the same across your entire website, which you would probably do in most cases, then you simply use the FR accent heading global class that does is not affected by any specific frame. And that’s what I’m going to do right here. Okay, so I am going to go to the style. I’m going to go to typography. I’m going to go ahead and make this font weight 800.
0:34:41
I’m going to make it uppercase. And what? Okay, I was like, whoa, what’s happening with it? It looks weirded out for just a second. I’m going to see if var text s looks appropriate for size here. I want it to be a little bit more spaced out. I’m going to go 0.25 m 0.025 m. I’m getting a little bit of lag on that side of the builder. So I’m going to go ahead and refresh. All right, we’re back. And by the way, guys, the lag is we’ve run so many tests. It’s unrelated to automatic CSS. It’s unrelated to frames. We’re actually able to reproduce the lag in a clean install, no CSS, no frames, and even no classes just styling at the ID level.
0:35:23
It appears to be almost completely related to the number of DOM elements on a page. And again, the lag also only happens pretty much in this panel over here on the side. If it’s lagging as you type text here, go try and type text here. It doesn’t lag. It’s really weird. And we’ve reported all this data to Thomas and team. I’m pretty sure they’re going to have it fixed very, very, very soon. So it’s a non-issue. But I wanted to make sure everybody knew we’ve reproduced this without automatic CSS without frames. It’s completely unrelated to ACSS and frames. Okay. All right. So let’s continue on with what we were doing. So I’ve styled this.
0:36:01
We’ve got a little bit of letter spacing. We do the typography. There’s our letter spacing. Little bit bold, upper case. Now what I’m going to do is do another after element. Blank content up top. This is going to be just like what I did before, but it’s going to look a little different. So I’m going to go 100% with height’s going to be 0.25M. These are just magic numbers I’m throwing out because I’m not sure what this looks like yet. Position is going to be absolute. And then our display is going to be flex and our background color is going to be action. However, we want to use a shade, maybe like 60%. There it is right there. Look at that.
0:36:46
So and once again, people are like, why all the transparencies, why all the shades? This is why. Look at all of these different areas where I’m having to use a shade. I’m having to use a transparency. These things are all configured for you. It’s very nice to have all these ready to go. Notice that it’s like, it’s like shooting off of the page here. That’s because I positioned it absolute. And my actual accent heading is not position relative, so it’s not containing it. So I’m going to go over to layout. I’m going to go to position relative. And there we go. Now it contains my thing. Now I actually don’t want this to just look like an underlying. That’s kind of boring.
0:37:22
And it almost looks like a link. I don’t want that to look like that. So what I’m going to do is I’m going to move my after element. And guys, if you’re saying, wow, this stuff’s really complex. I don’t know this much about web design and CSS and all of this. It’s fine. I’m showing you complex stuff because I want people to see that you can do whatever you want to do. You don’t have to do all these advanced things, right? You could just stick to basic stuff, style it up, save, move on with your life. I’m showing, hey, if you want to do advanced stuff, if you want to do whatever you want, there are no limitations to using frames. Okay. So let’s move this a little bit. So I positioned it absolute.
0:38:01
I want it zero from the left and I want it zero from the bottom. And that’s actually going to move it up to within there. But I actually want to go maybe minus from the bottom. How about or plus from the bottom? Sorry, 5%, 7%. No. Let’s actually, if we do this, let me go out of our pseudo element. Let’s go down to typography. I want to set my line height to one. That’s going to help us out here. All right, perfect. Now let’s go back to my pseudo element, my after. Let’s come down back to our positioning. I actually want it to be maybe a little taller, 0.35M. And then I want it to be behind the text.
0:38:45
So I’m going to use Zindex. We’re going to style layout, Zindex minus one. And then this is kind of an advanced technique, but I’m going to come back out. I’m going to go to style and I’m going to go to CSS. I’m going to isolate this just so there’s no stacking issues. And we’re going to go ahead and hit safe. And now what I’m going to do is refresh. And now we get this kind of like light, pseudo, underline, half background kind of effect on our accent heading. And this is just going to say choose your car. OK? Choose your car. And maybe I was a little aggressive on the opacity there. Let’s go 0.9. OK.
0:39:24
Maybe even 0.95. So I don’t want to be 100% but I don’t want to be too light either. OK. That’s better. All right. Perfect. Next thing I want to do, I want to get the right images into this spot over here. So I’m going to collapse this. I’m going to come down into feature grid India. And I’m going to make sure I grab my image here. All right. Let’s use this one and just see if that looks good. There we go. That one will do. OK.
0:39:51
Now we’re going to go with RBMW, which is going to be the same. For Audi, I’m going to open this card up and edit our Audi. By the way, you could use a query loop to just make one of these carbs and then query these dynamically. I’m not going to go that far into the tutorial because that’s way outside the scope of frames. And I actually want to show you something else here that’s going to be really important for you guys to understand. So I’m going to choose this Audi right here. And for the Volkswagen, no, we’re not doing a Volkswagen. Why is that say Volkswagen? We’re going to do Mercedes Benz. So Mercedes Benz. It’s like that. And let’s go ahead and choose our Mercedes Benz.
0:40:29
Let’s see which one we want. It’s this one right here. I’m going to insert. Awesome. Now notice the position of these carbs in these carbs. I can actually tweak on a card-by-card basis their position. For example, this Porsche right here, I actually want, see how it’s like too low inside the card. So all I have to do is at the ID level, because I want to affect all of these independently. So at the ID level, I’m going to come down, choose Object Fit Cover right here, 50% from the left and right. So it’s still centered. But now I want to choose 20%. Oh, that pushed it down. I want to go the opposite direction, 80%.
0:41:06
That pulls it up. Maybe 90%. I’m getting it positioned exactly how I want in that frame. So it looks perfect. The other thing that I would like to see is this heading right here. So if I grab this, see the Content wrapper, I want that to be a different color. So I’m going to choose that class because I want this to be a different color on all these carbs. All right, not just one. So I’m going to go to Style, Background, and I actually want these to be my Action color. So we’re going to go to Action, and I’m going to see if we want it to be Pure Action. No, that’s too much. I want it to be a transparent version of my Action. Do I want it to be 80? Do I want it to be 60?
0:41:46
Do I want it to be 40? You see how helpful it is to have these options available to me? Let’s go with 60 and see how that looks. We’re going to hit Save, Refresh, and look at this now. We’re getting a completely different look than we were getting. But still looks good on hover by default. Got that nice blur effect back there. Guys, this is looking sharp. Looking very, very, very sharp. Okay, so let’s move down to this section now. So I keep going to the dashboard for some reason. Let’s grab this, and we’re going to go ahead and change. Here’s Testimonial Section Golf, this background image. And I’m going to choose Insert. I really like this one because it’s like you’re showing the team as you talk about the team with the testimonials.
0:42:33
Right? So it’s like, let’s show a team member while we talk about how great the team is with our testimonials. That’s kind of what the idea is here. Now, I actually want this section to be taller. I want there to be more spacing in here, and I actually want there to be more spacing above the testimonial slider than below it. So all I’m going to do is grab the whole section here, Testimonial Section Golf, Style, Layout, and I’m going to just change the padding here. Now do I use a magic number? Do I just say, hey, it should be 87.5 pixels. No, I don’t do that. I stick within the system. So I’m going to use a section spacing variable because this is a section and I’m applying spacing.
0:43:14
So a section spacing variable, super matches with what I’m trying to do. So I’m going to do section space XL. So I want extra large at the top. Maybe I want extra extra large. You guys see I’m able to adjust this, right? And down below, I’m sticking with my normal padding. So the section all just got taller. But the card looks like it’s kind of down toward the bottom part of this section. So I’m going to go ahead and hit save. If you wanted bigger than that, you can always use a calc. So look, I’m going to do a calc. I’m going to paste in my variable for section spacing and I’m going to multiply it by whatever I want. And now look how tall the section is, right? 2.5, look how tall we’re getting, right?
0:43:56
I’m still operating within the system. But Kevin, there’s no option for that. There is. You know how to do basic multiplication math. There is an option. There’s endless options, right? Sticking within the system. So very, very easy to do there. I actually, maybe let’s just stick with 1.5. We’ll just do something like that. All right, so I do want an overlay on that, though. So I’m going to grab this overlay that’s right over here. See, we give you an overlay element. I’m going to grab the class for it and I’m going to come down to background and I’m going to experiment with, hey, if I do an action colored overlay, oh, there’s these transparencies that we need again.
0:44:37
We didn’t need those before, but we need them now. I’m not liking that, though. It’s a little aggressive. There’s too much blue going on, right? You could use the complementary color. There’s a lot of stuff you can do. But I’m actually just going to go darken it. So we’re going to go to base and I’m going to do ultra dark chance 20, 40. Let’s make it about that. So when I do that, it actually doesn’t make sense to have this be dark. Does it? So to swap up how this card design is behaving right here, all I want to do is select the card and really just select the area that it’s in because there’s really two things that we’re dealing with here. There’s the slider and then there’s the cards that are within the slider.
0:45:18
Okay? So I’m going to grab testimonial card golf. That’s what’s inside of the slider and I’m going to make this have a light background. So we can do a shade. I’m just going to make this pure white and then I’m going to go to the typography tab and I’m going to have the color be base ultra dark or base dark or something like that. And then I’m going to go ahead and pop an image in here. Let’s see if we have a headshot of any sort. Let’s grab this one, insert him and he’s going to show up right there and look, I didn’t have to crop it and make it a square. I didn’t have to do anything else. Frames is already doing that for me. Okay? So white testimonial card, I’m going to grab that testimonial card and style it up a little bit more.
0:46:02
Down here on this name, I want it to be bold. So we’re going to go 800 Kevin Smiley. How’s that man? Kevin Smiley. All right. And then this person is a Porsche owner. Porsche owner. And then what I would personally do is I would query these with a query loop. But I’m just going to go ahead and duplicate these testimonial cards and just for the purposes of seeing the card slide back and forth, I’m going to go ahead and choose a different photo for each of them. So we’ll insert that one. And I want to see it. We got to go to the next slide to see it update. There she is.
0:46:38
Now you might run into these situations with your headshots. It’s exactly like I showed before. You can simply override the object position. So cover 50%, 20%. And that moves her down in the frame. 10%. Now it’s perfect. And I’m doing it at the ID level. So it only applies to that one right there. But normally what I do, again, query loops and all that good stuff. So that’s done. Except for, let me do one other thing. Let’s go select my slider. Since that is technically the parent element. And once again, do I want this to be on all slider alphas?
0:47:17
Or do I want to be on only testimonial section golf sliders? That’s your decision that you get to make. I’ll do this on all alpha sliders. Border, radius, bar, FR card radius, boom. And we may have to do an overlay hidden, overflow hidden, I mean, not overlay. And then let’s go ahead and save. And check this out, guys. We’ve got a completely different little effect going on here, right? Or my background color and my background image are really darkened. And then I’m going bold with like in your face white testimonial card, which also happens to be a slider. And I get my rounded corners effect there. The other thing I can do if I want to on testimonial slider golf or FR slider alpha, whatever, I can go and add a box shadow. I’m going to go box shadow, box shadow, 2, 2, 80, minus 5, going really big on our box shadow here.
0:48:18
Base Ultra Dark Trans 90. It’s going to have to be pretty dark because it’s already a dark background. I’m going to save, refresh, and boom. We got a nice, deep shadow coming, like kind of popping that card up off the screen just a little bit, okay? All right, let’s move down here. So I want this button right here to say all articles. This is really my get to my blog section. And I don’t like the fact that that’s an outline button. So all I’ve used is remove the class button outline and now it’s solid. Check that out. Okay, next thing I’m going to do is I’m going to put in my content, paste in there, grab this content here, paste in, perfect. All right, let me paste in an extra space. Let me get that out of there.
0:49:06
Okay, that’s good. So we got all articles. It’s going to go off there. I really like these cards. We’re already styled. I really like how those are turning out. I do want to round their corners just a little bit because that’s what we’ve been doing everywhere else. So I’m going to grab article card echo and I’m going to do a style. I’m going to go to border radius, var, fr card radius, all sides. We’ll go make sure the overflow is set to hidden just for extra bonus points there. Refresh, check that out. We’ve got nice rounded corners. So got a good effect. I am not liking this though.
0:49:50
This text right here. So I’m going to grab the info wrapper. That’s wrapping all of that text. And I’m going to go typography, var, text, s. Make that really small. Maybe even xs. And then maybe even change the opacity on that just a little bit. Like point eight. It’s kind of really dark in that down a little bit. And actually these post titles, I’m going to grab echo title. And we’re going to see if we can maybe make those a little bit bigger. Those are h3s. Okay. Let’s go var h2. Can I make them as big as h2s?
0:50:31
Maybe tighten up the line spacing on that a bit. So line height 1.1. Maybe 1.05. Tighten it up a little bit more. Let’s see what we’ve got. Oh, I don’t know. That’s looking pretty good. Pretty bold. Okay. Now down here, we’re going to leave our footer the way it was. We talked about that. My buttons. Because I’m rounding my cards a lot. I think I want to round my buttons a little bit too. It’s not great to have like, I got a little bit rounded on our cards, on our video, on our images here, and then square buttons.
0:51:09
So what I’m going to do is go back into automatic CSS to buttons and links. And I’m going to go to button border styling. And I’m going to put var fr card radius on my buttons. So it’s actually going to match all of my other stuff that I used fr card radius on. Okay. So save. Let’s go view the front end. Check out how all of my buttons have now adopted the exact same radius that I’m using everywhere else. That’s the value of a contextual utility variable. Okay. All right. I also want to add a little bit more padding to my buttons. Let’s go one M top and bottom. 1.75 left and right.
0:51:50
Or actually maybe even two M. Let’s go two M left and right. Check this on the front end. Now my buttons are a little bit bigger, a little bit thicker. Oh, look at this. We got a problem. I hover and I’m getting a black border on hover on my white buttons. So no problem. Easy to fix. Let me go down to my white button styling. Let’s check out what our hover border color is. Look at that. It’s var shade black. I want this to be action hover. Now it’s actually going to match the hover color. So we’ll refresh here.
0:52:25
Perfect. On both of those, that’s fixed. Yes. I like it. I like it. Okay. What about button line height? Let’s look at a little, let’s see. Button text styling. Line height is already set to 1. Okay. That’s good. All right, guys. We got to fix this header situation up here. So now what I’m going to do.
0:52:44
Make sure we’re saving our work. I’m going to hop over to our header. And let’s get this styled up. So FR header bravo. I’m going to go style the backgrounds. I’m going to choose maybe just base. See how that looks? I think that’ll look fine. I think that’ll look fine. Our logo, we’re going to have to swap out with a different image, a white version of our logo. What did I just do? I obviously, I gave it a background image. That’s not where I want to switch it out. I want to switch it out right here.
0:53:18
Okay. Now we have a white logo. I’m going to go to style width. And let’s go with like 12m. I want that logo to be bigger. That’s not the client always want the logo to be bigger. Safe. All right. Let’s grab this menu FR Bricks nav alpha top level menu, typography. And let’s change this. We want this to be. Let’s just make it white. But let’s also make it bold. So we’ll go 800. Check that out.
0:53:48
All my links are looking good. What’s going on up here? Let’s grab these FR header bravo top link. Okay. Let’s edit that. So let’s see. What should it be? Style, typography, color, shade family. Let’s get that white color. Check that out. They’re automatically now. Want to change their hover? Is action, hover. Now, let’s look at the front end. Now we have it exactly where we want it to be.
0:54:18
Okay. What about these? These are not hovering. Okay. So let’s grab this. Bricks nav alpha. And I believe I think you still do it the same way. So I’m going to grab hover styles here. And top level typography. Let’s see if we change this. Go to our action. Go to our action hover. Yes. That’s looking good. Save.
0:54:42
Check us out on the front end. Nice. And of course, we can add pseudo element hovers and all this other fancy stuff to do it if we wanted to. I’m not going to go that deep into it. I’m just showing you no limitations. Right? Okay. Now let’s check this out on mobile. Oh, the icon on mobile. Not looking good. So what we’re going to do is we’re going to come down to our mobile menu. Top level menu, sub menu, hamburger toggle. Right here. Color.
0:55:08
We need this to be shade family. We need to be white. There we go. Now we’ve got a white hamburger. White and on hover. Now we go back into our hover. This is why I write custom CSS a lot because I hate navigating these panels. Hamburger toggle color. Action. Hover. Perfect. Okay. Sidebar over here. That’s our. That’s our.
0:55:38
Not our top level menu. That’s our mobile menu. Okay. So mobile menu. Typography. Let’s get out of hover. Top level menu. Yeah. It gives us top level menu now. Okay. Now we choose shade. Now we choose white. See when when frames has a menu element, it ain’t going to be like all this. Okay. This is what I’m talking about when it’s like, hi, the user experience is not that good.
0:56:08
Right. This needs to be dramatically improved. Well, that’s why we’re building native components for frames so that we can fix all the things that are wrong in experiences like this. Okay. Now let me go into hover because this is like, man, it gives you a thousand of these like things to look at. And then that when I change it to hover is changing everything around. Okay. Now we go to action and this is a bricks thing, not a frames thing. This is like I’m digging through panels and bricks. Um, hover. Okay. So save and now let’s check it on the front end. Excellent.
0:56:44
So we got a working menu. This is all looking the way we want. Oh, you know what? This is an old frame. It’s still using the primary color for our button up here. That definitely needs to be button. Um, I select it. Thank you. That needs to be not button primary. It needs to be button action. Save and then what do we want to just say? Book now. Okay. Book now. Perfect.
0:57:12
Save. Refresh. Now let’s just check on responsiveness real quick. And let’s just see out of the box. I have, have you guys really seen me touch a break point yet? I really haven’t touched a break point. So I’m curious to see what this looks like as we get down to mobile. So look at our menu. Goes down and there’s our hamburger. Okay. We’re going to click that. Look, we open our icon is the right color. We’re getting out. It’s hidden behind the admin panel. The bricks, some menu thing is terrible.
0:57:41
Again, this is why we’re building native frames components to fix all this kind of stuff. Okay. But check this out. The button here should go away at some point, I believe. Yep. So first it drops down because it’s like, I’ll still kind of be there. I’ll try to be there. But then it’s like, we just don’t have room for me. So then it’s going to go away address stacks. Here we go with our menus still looking good. And that’s a very small screen right there. Look how our font, our typography is scaling. Look how our buttons came to life. They went from not full width to check this out on mobile to being full width when they stack.
0:58:21
Just nice stuff that is automatic. It does it for you. Everything looking nice and responsive. Look at the stacking here. Look at this. I mean, absolutely perfect. Every single section, every single time. This still works. You can drag it. Coming down all articles. Look at this. Remember how big I made those headings on desktop? Did you ever see me edit them at a break point? No. They’re automatically responsive.
0:58:53
That’s what I’m talking about. How easy this makes things. So I’m going down, down, down. Just making sure there’s nothing out of whack. Look even the footer. Everything. Everything. Perfect. Consistent. This is the power of using something like frames. Not only did we go from a wire frame to a completely custom design, I basically did no work at any of the break points and I have a fully responsive website. So let’s go ahead and let’s call this a day. Let me get back to camera. That’s a wrap on part two of your introduction to frames.
0:59:28
I want to reiterate this point. Even if you didn’t like the design that I chose, I wanted you to see that you are only limited by your own creativity. You can do basic things. You can do advanced things. You can take that same wire frame and create a thousand different looks from it. So what I want you to do going forwards is experiment and play. See what you can come up with. We are going to be creating a frames gallery. And I’m going to allow people to submit their designs for inclusion in the frames gallery. Not only are you going to get the exposure, you’re going to get a back link to the website that you submit from the frames website. It’s going to be absolutely fantastic. I cannot wait to see what you come up with using frames. And the point of this gallery is to show people that when you have a finished website, nobody is going to know that it was built with frames unless they inspect, right?
1:00:26
They look under the hood. But visually, nobody is going to look at a site and say, so you can look at a site and go, that’s a tailwind site, right? But if you look at a frame site, you’re not going to know because people can do whatever they want with it. There are no limitations. It’s just a fantastic starting point. It does 70% of the work for you. You do the other 30 to 20 to 30% and you’re good to go. But nobody knows when they look at a finished product, whether it was built with frames or react or anything else, okay? So that’s it. If you have any questions, let me know. Drop your comments. I’m happy to jump in and help.
