[Frontend Mentor] Social Proof Section in Bricks

0:00:00
What’s up everybody welcome back it is time for another premium training inside the inner circle. This is actually a really exciting day because this is going to be one of the first official bricks trainings inside the inner circle. Now I’m going to be doing a full website build for a real client inside of bricks very very soon. But I felt like one I needed to warm up to I saw I can’t remember if it was Tony or Wajee but in the inner circle. One of them posted a link to a website called Front End Mentor. And basically this is a site where they give you sample projects you sign up they give you sample projects they give you a figm a file they give you an assets folder everything is kind of handed to you on a silver platter and then you build it and then you can submit it for feedback to their community. Now I don’t really have any interest in that part but when I saw the concept I was like wow this is perfect for what we do at the inner circle. And for me recording tutorials because here’s the honest like truth about me recording client work I have a lot of working hours in the day but I don’t have a lot of recording hours in the day my recording time is actually very very limited. I’ve got three businesses I’ve got three kids young kids that scream all the time that always need things I’ve got calls throughout the day. And just to give an example if I have a call in 45 minutes I can’t record because I can’t be stopped by the call I can’t stop my recording do a 30 minute call and then try to come back to my I forget where I’ve left off and it’s just a nightmare. So I prefer to record in one take and that means I need a good solid chunk of time. And so with kids and calls and all this other stuff I don’t have a lot of solid chunks of time. And so if I’m trying to record client work what ends up happening is one I don’t do all the client work right in the agency I get my team handles a ton of the client work so if I have to do it because I’m recording it it ends up that every all the timelines get messed up right the clients it’s not fair to the client so it’s much better if front and mentor just hands me sample projects and then it’s we build it and we pretend. It’s a real client then I can record it on my time I don’t have to worry about deadlines none of that good stuff so I think that’s a really good way to go and this is going to be very beneficial for us so I signed up. And in this tutorial we’re going to tackle the first sample project now front and mentor gives you landing pages they give you sections they also just give you component projects we’re just going to tackle them as I see fit. And today happens to be a section now we’re going to look at this section I’m going to screen share here and you’re going to see that you know it does even though it’s a simple section it’s got some unique things going on and it’s going to present an opportunity for a lot of learning and a lot of growth for a lot of you.

0:02:55
For example it’s got these dual background images right here well you can’t do this natively in bricks as far as I know so that’s going to take a little bit of custom CSS it’s got these rating cards which are offset so once more to the left this one’s more to the right more to the right and then it has these review cards which are also offset. And so I think that this gives us an opportunity to see you know how we can approach stuff like this we also need to think about scalability maintainability you know achieving something like this with just hey let’s bump some top margin on each of these yeah that’s great but is it scalable is it maintainable is that a best practice we’re going to treat these like I said as if they’re real client projects and we need to cross our t’s and we need to do that. So we’re going to do our t’s and dot our eyes and really focus on best practices on each of these tutorials that we walk through so these are going to be very very very valuable for you let’s go ahead and get started I’m going to start on these from scratch by the way so I’ve done zero prep work. When I do these my goal is like you see everything just like you would on a real client side built alright so we’ve got the desktop version here we’ve got the mobile that needs to look like this very very straightforward let’s go ahead and I’m going to show you the assets folder alright so we’ve got the images here’s all of our assets right here alright so we’re going to be throwing those in and then we also like I said have the figma file that we’ll be using for reference. And let’s just go ahead and get started so I’m going to open up chrome I’m going to open up local I do have a I basically just duplicated my my local bricks blueprint here so I’m going to go ahead and launch WP admin for that we can see on the front end that this is a blank page so no issues there. Okay so the first thing I want to do is I want to just get my colors set up in automatic CSS I’m thinking about you don’t really see there’s no buttons in this section so I’m not really sure what this website’s action color is we’re going to pretend that it’s this color right here so I’m going to grab that and then what we’re going to do is we’re going to go into automatic CSS we’re going to go to our palette and we’re going to enter this as our website’s primary color. It would help if I put it with a hex code there alright the next thing we’re going to I’m going to close that tab real quick the next thing we’re going to do is put this in as our Bay I’m going to put this in as our base color so I can definitely see this I mean it’s obviously the base color of these cards right here and then you know if you look at this card it looks like a very very light shade of that color right there so I think that this would fit really well as our base so I’m going to pop that in as the base and then I really don’t see any other colors also notice that dark purpley color is the color of our text and our headings as well so I am going to go ahead and remember that is our base color so we’re going to go into typography and then on our headings we go to heading colors and we can do var base as our heading colors here we’ll just do it for all of them for now and then if we need to change those very very easy to change alright so I also want to make that my body text color so I am going to go to body text color pop in var base there as well white can be our background color that’s no problem alright we’ll work on typography scales and all that stuff once we actually start building something there’s no header on this site at all because it’s just a section of a website so we don’t have to mess with templates we’re just going to go ahead and make a page called add new and not call the add new but I’m clicking add new and we’re just going to call this social proof section right here publish publish alright let’s go ahead and edit with bricks alright so I’m going to click add new section and you’re going to see my default section padding is in there let’s go ahead and flip back to our figma file and just talk about what needs to happen first what I’m seeing with my eyes is two containers I have one well you can even see it in figma there’s one container and there’s another container this works exactly the same in bricks now this is actually I’ll just pause and talk about one benefit over oxygen does not give you access to the inner container so you actually have to create your own inner container inside of a section in oxygen which adds an extra dom element that’s not really necessary and it’s just a little bit more of a hassle but in bricks I’m given a section right off the bat and I can simply duplicate it and now I have the exact two sections that I need back on this figma file there’s one and there’s two now there is a gap between them there’s multiple ways to accomplish this I can use owl spacing so if I wanted to owl L or something like that it would space those out I could also because these sections are display flex by default I can simply use a gap of L I’m going to get the exact same outcome either way I could do a gap of XL or XXL just depending on what I need I’m just going to eyeball it right now and I will say XL or L is just fine it’s going to work either way and that’s something we can easily dial in as we go now what I’m seeing with this container is that it’s a two column containers place split right down the middle and you’ve got this content on the left you’ve got these little review cards on the right so I’m going to go ahead on my top container and we’re going to split that into a two column grid so I’m going to do grid to I’m going to do grid probably let’s see what our break points look like in this so they’re only showing the like what I would say is the S break point the small break point they’re not showing us what needs to happen in M or L or XL so I’m just going to rock whatever looks best at those I’m going to guess right out of the box that this pie needs to break at the L break point would probably be best but if we need to change that at some point we can so I’m going to do grid L one and I may do a gap here as well so let’s try a gap of XL and then that should be sufficient let’s go ahead and put in our blocks now this is another area where people should use a div or a block in a grid it doesn’t really matter because a grid uses F R units and so a div is going to be one F R just like a block is going to be one F R the only difference is that a block already has display flex by default and that’s just gives us a little bit of a shortcut here so I used shift command D on the keyboard to duplicate that block so now I have my two columns side by side ready to go ready for action.

0:09:59
So I’m going to take this heading right here we’re going to put that in that’s going to be an H2 now normally the only heading on a page would be an H1 or the main heading on a page would be an H1 but this isn’t a page this is just a section so I’m going to add a heading and we are going to grab that and make it an H2 and then I’m just going to paste in that content that we just found there and you can notice that it is significantly smaller and I don’t think they give you font files here I don’t know exactly what fonts we’re using let me look at our assets design here no no no font files so we’re just going to rock with the fonts that we have going on. The next thing we need to add is this paragraph text right here this little lead bird blurb so where is my block there’s my block alright so I’m going to add text here and I’m just going to paste that in and now you see in this block because it’s display flex by default I can simply do a gap on here of S or M or whatever I need to do and that’s nice and spaced out. Okay notice that these are not quite as wide so even if it’s a two column grid we it doesn’t take up the entire left column I’m also noticing that this entire thing is 1440 the width of this container is if I can select it in Figma 1110 that’s actually quite narrow. So what I’m going to do up here is in my theme styles for container I’m just going to try to match this 1110 that that’s exactly what they’ve got going on here now anytime you change that default container with you need to make sure that your automatic CSS viewport settings matches that so I’m going to make that 1110 as well simple as that and then I’m just going to refresh the builder and we’re ready to keep moving. Okay on the right hand side we’re going to need those review cards now we need to talk about scalability maintainability here I could easily just build these and copy them duplicate them whatever but I would imagine that we you know if this was a real website we would be using these things all over the website potentially and we don’t want to be in a situation where we don’t have global control over how they’re styled so I am going to build what effectively amounts to a custom component which means we’re going to assign custom classes so far you’ve seen me just use utility classes for everything this is an area where we break away from utility classes and we use custom classes so inside of this block right here and I’m going to go ahead and just to make this easy I’m going to put a stretch class and that’s what I’m going to do. I’m going to do a stretch class and that’s going to make both of these columns equal height and then I’ll just worry about alignment inside of here once we need to get that done but I’m going to add a div now and you could potentially add a block here but I still don’t know how we’re going to tackle this we’re probably this is aligned over here so this is these are not full width they’re not the full width of the container this is going to be interesting to see how we need to fit this in so there’s going to be some troubleshooting here because of how these are staggered but I don’t think I need a full width elements I don’t want the block I just I just want to div. All right and then inside of my div is basically going to be two elements really a container for these stars and then this title and this does not I would not recommend making this a heading we’re just going to use normal text in there. All right so this is going to be my we’re going to call this rating feature card or something rating because it’s rated five stars in reviews rated five stars and report guru rated five stars in best tack so we just need really a good name for what this component is going to be. I’ll do a rated I’ll do a rated card rated card just like that all right so we will call this rated card and then for now I’m going to make it a hundred percent with but we are going to probably tweak that in a minute and I don’t see I still know if we’re going to use I still know how we’re going to do a rated card rated five stars in a minute and then there’s multiple ways that we can approach this so without knowing I’m just this is just what you do you just start with one path and then you see where it takes you. All right so I’m going to go style I’m going to go to layout and I’m going to do a hundred percent with. All right good now I’m going to put in a div that’s going to be the rapper for my stars and then I’m going to put in text as well. What off the bat is that those two things need to go side by side so we see them in the figm of file stars are next to this so I definitely need to make those go side by side I’m going to call this our rated card right here and then we are going to use display flex and right there automatically there side by side now we can use our alignments here to make sure that everything is in perfect alignment except I’m noticing that I’m doing this wrong let’s stop what we’re doing here.

0:15:14
Let’s get rid of all of this I need to select my class you’ve got to do this stuff the whole point of creating custom classes that you do this stuff on your custom classes all right so I’m going to go back to flex and then I also centered it as well now inside this I’m going to call this rated card star stars rapper because there’s multiple stars so we’ll make it plural so rated card stars rapper and this will be rated card and we can call this you know text heading it’s not technically a heading so I wouldn’t call it heading label let’s do label rated card label that’s basically what it is it’s just a label for this this element. Okay so we’ve got rated card label let’s get some actual real text in there so we’ll take this and we will bring it in there okay perfect so next thing I’m going to do now that I’ve got my rated card stars rapper is I’m actually going to add my star icons now they have it I don’t actually know how they want this done it doesn’t specify okay so they gave a single star as an SVG image let’s just go ahead and use it I mean we could use icons. Since that icon is an SVG it doesn’t really matter either way if the client had given me PNGs I would definitely use SVGs instead but because they gave us an SVG actually you know what an SVG image is still not as flexible as just an SVG icon because I can’t actually change the colors so the most flexible thing to use here is an icon so I’m going to do an icon and it is going to be. I’m select the icon and this is going to be rated card star just like that all right and then we are going to do a better star than that font awesome solid star yeah that one’s just fine okay I’ve never used icons and bricks so let’s just play around with sizes here can I use oh this is different from oxygen you can actually use variables here let’s use a text variable okay there’s M size text L size text how big or how big are these I think they’re about M size text this will perfectly match our M size text the question is why is it cut off top to bottom or maybe that maybe just because I have it selected okay just appears that there we go okay just the way the outline is happening on there all right so I have you know what I okay it’s tricking me so this is an area where bricks definitely needs to improve the UX of like I added the class but then when I came back to the star the class wasn’t selected but easy fix easy fix okay now my color is going to be that gold color now I’m not going to take up an entire I don’t need buttons and links and everything else in this gold color so I’m not going to program in this gold color as an actual ACS color I don’t need shades of it I don’t need anything else I literally just need it for this one use case so what I’m going to do is I’m going to grab that color and I am going to put it in to my palette under ace I wouldn’t be ACS global it be my primary palette I don’t know what that palette is that’s not an ACS palette can I just delete it okay good all right let’s try this again so I’m going to go to color let’s create a color palette and we’ll do just global and then I’ve got an ACS global and then I’ve got just a global and then we’ll go ahead and put that hex code in and then we can use it now I don’t know okay I think you have to save here the the palettes area of bricks is one of the worst UX aspects of bricks aside from the gradients they improve how this color palette UX is and the gradients we’re going to be it’s going to be amazing I just don’t like it right now okay but we did get our gold color in there and then I’m just going to hit shift command E 2 3 4 and we’re going to have five stars and they’re all next to each other which is fantastic I don’t know how that happened by default because that wasn’t set to flex but okay and then on my column gap which is the gap between stars I’m going to do a 0.25 in or something like that something very very small how about 0.35 in let’s see how that looks let’s check our Figma okay that’s I would say that’s about actually there a lot more spaced out aren’t they I don’t know I say they’re more spaced out but I don’t I don’t necessarily think it needs to be we do need a column gap on our on our rated card as well this can probably just be like 1m or something like that and that is left aligned okay we also need to make I don’t know what I just clicked okay let’s take that get on our class and we’re going to come down to typography and we can do font weight of 700 so we can make that nice and bold and then our review card actually needs to have a background color now and it needs a little bit of padding inside of it so I am going to use our base color we’re going to use probably it looks to me like the ultra light version of our base color so on here I’m going to find the background area and then background color all I have to do is go down to base and then I need to find our ultra light which is right here bar base ultra light I can simply click this is the benefit of bricks this is actually so I just poop food on the color management inside of bricks the second ago for adding new colors but when using color variables light beyond what oxygen was providing to us so this you can just click the color you need they’re all preloaded in there for you from ACSS so this is this is that’s a dream come true honestly all right so now I’m going to go to our padding and again you can use a ACSS variable here you can use an M value it doesn’t really matter like this is just a little bit of internal padding that that we’re needing here so let’s just do something like 1m and make it super easy and then I will apply that to all sides and you see that effectively we have a review card here now my ultra light version of this base color is obviously not as light as this base color now I’m going to do a little bit of a trick here we’re going to open this in Figma and you can see the HSL values right here this is the lightness value 96 if I want this and I can also take note of the saturation value which is 23 if I want this to match exactly inside of automatic CSS I just take those values 23 and 96 we’re going to save our work we’re going to come over here to colors on our palette we’re going to go to our base and we’re going to find our ultra light shade okay so this is going to be 23 and 96 and we’re going to hit save changes and then I think that was the numbers right I have terrible short term memory 23 and 96 yes it is okay good all right now I’m going to refresh the builder we’re going to have that exact shade guys it is the exact shade because I just changed the saturation and lightness values to match it exactly the hue doesn’t change right on these shades it’s just it’s the same color family it’s just desaturated and it’s a little bit lighter and that’s exactly what we reproduce like that okay so all I’m going to do now is effectively duplicate those cards and then we just need to change our text so I’m going to come in here rated five stars in guru report which I’m guessing is an absolutely fake fake rating system and so is best tech all right so we’re going to come in here put that in best tech excellent all right I’m also seeing that probably what we can do is align this content to the center and once again I’m not on my class I wish it would stay on my class unless I’ve gotten off my class okay that’s actually not going to work because it is going to completely center these which throws the stars off of alignment so let’s find a better way to do that let’s take that off nope not that one that one and then probably what we can just do is more left right padding so I’m going to go to lay out and then on our right side I’m going to try 3m and on our left side not 31 I’m going to try 3m there and I think that that gets the job done much better okay if we look at our team that’s that’s much better okay maybe maybe it’s a little much maybe 2m on each side all right I’m done dialing that in the next thing I can do is on that block where are we out here in my let me get into my structure panel properly there’s my block okay on my block I can do a gap of let’s try S first to space those cards out and let’s think that’s perfect absolutely perfect okay I’m going to let that show for a minute I think we’ve we’ve done enough there we’re going to come back the complicated stuff that this kind of stuff to really bog you down so what I recommend is before we start messing with trying to get this going let’s get the rest of our page kind of built out we’re going to make more progress that way that’s where I recommend on the client sites as well right do the bulk of the easy work and then get to the little you know design elements okay so I’m going to do these three cards down here so all I’m going to do the same thing of grid three we’re probably going to do a gap of L on here and then a grid of M1 let’s try L1 L1 is probably better there so the L break point I only want one column and we are going to do a stretch class on here as well so make all of these the same height and then I’m going to add more block elements okay and then I’m just going to duplicate actually I’m going to undo those I only want one to start with let’s get let’s get this built out before we go and start duplicating everything so this is going to be called a review card and it’s going to have let’s check out what components it needs it needs a header right here and it needs a body section or this can be called media as well it’s really up to you you know these custom names you can do whatever makes the most sense to you and your team go with it for this particular card because it has more than the media the name and everything’s up here I’m going to go with header and then body so there’s going to be two sections to this card all right so I’m going to go add a div to this review card and then another div I’m just going to duplicate that this one is going to be called review card and actually let me show you guys this let’s let’s do this I’m still getting used to this myself let’s add a block these can be blocks because they do need to be full width across the entire card so it’s a little bit of a shortcut to add a block instead of a div so this is going to be called review card header and then this is going to be called review card body all right perfect now inside of my header I need another container effectively I’m going to have an image and a container and the container not a container I’m using it’s a wrapper okay I’m it’s going to be a div though so I need an image and then I need a div to house these two items so that the image and the div can be next to each other but the two items can be stacked inside the div all right so we are going to add an image here and I don’t think it added it there we go and then I need to find this guy’s photo it’s the dude in the plaid all right dude in plaid so I’m going to grab content select image and I actually need to go just go ahead and upload all this stuff haven’t uploaded anything yet all right there he is let’s go ahead and insert his photo and then he’s going to be review card media just like that or you could do let’s delete that one here’s another thing I really love about bricks the ability to delete really fast right there awesome review card avatar let’s do that okay and then I know immediately that I’m going to have to go to borders and we’re going to go to where’s our borders section border border radius is 50% and I get my circle okay now next to that I’m going to go ahead and add my div except it’s not next to it because we need to make this a flex row so our layouts let’s go back to here did display as flex I just need to switch it to row all right the next thing we’re going to do is put our some text in here and then actually another text element so I’m going to grab that and duplicate it and now I have two text elements but for some reason I can’t see my second text element let’s delete that basic text there’s this let’s get his name in there so we can not be dealing with all these giant paragraphs and stuff all right so there’s his name let’s see if we can delete or duplicate his name and then this is going to be his little label his little badge here now another thing we’re going to do because again I could I just I did this just occurred to me I could just build these cards but again I have to make the assumption that there’s going to be review cards all over this website if it was a real website which means these need to be custom post types your reviews need to be custom post as we need to query these onto the page so we’re going to end up doing these a little bit differently so I’m still going to build them exactly the same but and here’s the other thing guys I really want to stop and make this point let me go back to camera to make this point just make sure this is working listen to me very very carefully I’ve said this explicitly multiple multiple times if I wanted to race and build this section as fast as possible I would use pure utility classes I could style at the ID level I could whip this thing up in minutes I promise you I can whip this thing up in minutes but that would screw the client and it would screw you if there would be no scalability there would be no maintainability and this is what I caution you I desperately caution you when you watch other tutorials and they’re just whip and stuff up all utility classes styling at the ID level nudge and stuff around just like to get things to where they need to go and there’s really no thought about scalability or maintainability please highly caution you do not follow those tutorials as if that’s best practice that you should be following for client websites when you try to build a site that is truly scalable and maintainable it always takes longer it always takes more work more thought okay and there’s a lot of people who are like they’re probably watching me do these tutorials and they’re like I can’t be I can be bothered with this time is money and they just they just want to whip things together right that is not being a professional that’s not scalable that’s not maintainable that’s not best practices you want to be the best you can possibly be and here’s the thing you and you explain it you and you explain this to your clients it takes longer up front to build it right and it caught you’re going to pay me more money to build it right as well because there’s also all the knowledge of best practices and all the you know all of the learning and practice all this kind of stuff that goes into getting to where you need to be to be able to build a scalable and maintainable website but going into the future when we need to iterate when we need to add things when we need to make changes it’s going to be way faster and cost way less money because we built it right from the beginning and that’s what I want to encourage you to do okay I just want to put that out there because people are going to feel like man the workflow feels a little slow and I may even be doing it faster than you but it feels slow to me it feels slow to me because I’m being methodical and I’m being calculated and I’m making sure that this is scalable and maintainable going forward it always takes more work it always takes more thought all right the sooner you get okay with that the better off you’re going to be all right so on my review card header I’m going to add a row gap of what is going to go back to 1m here and for some reason we did not get a row gap between my image and my div I should have a row gap of 1m why don’t I have a row gap of 1m what if I choose pixels what if I choose REM what if I choose okay maybe we just need maybe we just need the builder to refresh let’s try that I win a I win a while in back to camera I came back things are working as well all right let’s see there’s my image there’s my div I should have a gap oh it’s not there look at that oh no it is it is there oh duh what am I doing what am I doing see I thought it was bricks it’s just me it’s just me being dumb I need a column gap not a row gap all right then I also can align these to the center okay so this is going to be a review card name and then this is going to be a review card and what actually is that’s verified buyer like status I don’t know the status is a verified buyer all right so on his name I really need that to be typography font weight 700 or 600 let’s do let’s do 800 oh gosh it’s storming outside I just had big lightning strike and thunder okay and then verify but these are all also look like how big is this body text 19 okay mind 18 how big is this this is 17 so it’s just a little bit small smaller I’m going to see what happens if we go with var text s here okay and then we can do var text s here as well it’s just a variable for small text and then I want to see how they’re spaced out it’s kind of close together all right I’m going to make this be while we’re here I’m just going to grab a CSS global and grab our primary color because that’s what we’re seeing there and then that’s white so that’s good let’s put our card color on there as well so I’m going to grab my div div I should start naming these things okay so it’s going to be our review card this is going to be our header this is going to be our body and then I’m probably covering this up so let me collapse all these there you guys can see it now so there’s my review card my header my body then this is my avatar this is my header info and then we have basic text and basic text that’s fine whatever normally care about that that much all right let’s put our review body in there this is going to be a block quote I don’t actually know how to do so block quote element in okay I think you just do basic text and then we can probably just change the HTML tag to custom block quote there it is now it’s going to have default styling of course we’re going to go ahead and fix that this is going to be review card quote just like that and then I need to go just style this up so text him and then definitely on the layout we want like no padding we want no margins this is all that default styling I see a border on there too we’re going to go border border with style how about none okay good what what why is the get even change the font so let’s go font where do we where do we go for font I don’t even know typography font family can I just inherit or initial how do we because that’s definitely not the same font right I don’t know how we get we need to be able to inherit the font family all right so all we’re going to do then is we’re going to go into code box and grab my global here and then this is the review card quote so we’re just going to review card quote font family inherit save well I don’t even see any text what’s going on what’s going on where’s my text there it is okay all right let’s try inherit oh first of all I didn’t even put a period before my I didn’t even put a period before the class okay I’m just going to do a block quote font family inherit I don’t even know if I need important let’s try it without important first yeah I don’t okay it’s fixed like wow sorry massive brain fart there all right next thing I’m going to do is we’re going to check out our spacing on this car let’s let’s get the padding in the background in there so we can actually see what’s going on so let’s go to background background color we’re just going to choose our base color so from ACSS global we have our base right there and then for typography well gosh it’s not on the class again okay cancel that back to our class now choose base ACSS global base great typography color we can do under the shade we’re going to choose white white in here for shade that’s black how do I add one I’m going to do raw var white and then I’m going to say okay now now it’s part of that palette all right we’re good there and then let’s just go ahead and add some padding so I am going to use a variable here of space in at least to start out with just see let’s compare that all right that’s so close so close let’s try L and just see if that helps things makes it look better and guys I’m not I’m going to do a whole right up on like making things pixel perfect online is not a thing anymore it’s not a thing it’s like does it look good or does it not look good right the fact that this might be you know eight pixels different padding than the padding I’m looking at here in it means nothing to nobody it’s not going to make this company any more or less money no nobody cares nobody’s even going to know nobody’s even going to know so you got to stop worrying that’s that’s the kind of stuff you can definitely stop worrying about all right next thing on my review card I am going to use a row gap here we’re going to do var space S get a little S spacing going on and let’s get actual text in there so I grab this and paste it in now you can see mine is a lot I don’t like the quotes in here I’m making an executive decision to remove these little quotes everybody knows it’s a quote all right if we look at this gap is let’s do a gap of M on that maybe I don’t know gap of M and maybe we just it’s probably better if we do small text here as well and then what I’m going to do is probably adjust my scale so that my that small text isn’t that small or I can just bring in my there’s actually a couple ways that we can handle that there’s one way that’s going to be the easiest way to handle that all right so let’s take a look on the front end real quick at what we’ve got going on all right we’re getting there we look at our fig month our image definitely needs to be smaller so let’s go ahead and tackle that I’m going to grab my avatar right there review card avatar and what’s the best way to do this just size let’s go with width of 20 rim oh that’s way too big for five let’s do five okay and then I definitely need some rounded corners there as well so review card I’m going to go to borders and under radius we’re going to go with var radius of M all right that’s game in my rounded corners all right so I’m going to go ahead and hit save and what I want to do is go back in here to typography now and I want to go to my text minimums and for my S minimum what is it on here 17 okay so the easiest way to do here is if we want our small text to never go below 17 we go ahead and hit save there and then I probably bump my excess text up to here these are going to be different based on the font you’re using right some fonts are naturally larger wider and so and that’s another thing that we’re looking at here that you know the values for this font I can’t just match them exactly in fact I’m going to go like 16 because it’s different font right and I’ll do 14 for my XS and now you’re going to see those get a little bit bigger see that so these are still small but they’re not as small as they were very easy to make those kinds of adjustments in ACSS the other thing I’m going to do is on this verified buyer the status badge I’m going to go change the line height to something like 1.2 and then on here on his name I’m going to do the exact same thing and that’s going to bring those two things closer together just like they are in the design and that’s actually better to you don’t need that much line height on just single line items like like those so now I have my card created I am free now to just duplicate it so that’s exactly what we’re going to do so I’m going to grab my card and 1.2 and we’re going to have two more of them and actually I I shouldn’t do that because now again in my brain it’s reminding me it’s like no that needs to be a custom post type so we’re going to go into metabox real quick I’m going to show you how to just whip this up new post type it’s going to be reviews and then review and that’s I like to make this slug plural we’re going to go to advanced and we’re going to turn publicly queryable off because I don’t want these to have their own URLs I’m going to turn query far off and I’m going to turn archives off we’re going to go ahead and publish and then under reviews I’m going to go add a review and this is going to be that guy’s review so it’s Colton Smith and then I’m going to show you how to make some custom fields real quick as well so Colton Smith publish publish let’s go back and now we’re going to go to metabox custom fields add new this is going to be for reviews add field this is going to be for text just the normal text field this is going to be for his name so reviewer name and then I’m going to go to another to be a text area reviewer quote and then I’m going to do an image advanced we’re going to limit this to one file I’m going to call this reviewer avatar and then I’m going to go ahead and hit publish now under settings I’m going to change this and assign it so those custom fields only show up on review types so I’m going to go to all reviews Colton Smith I’m going to grab this guy’s name in fact yeah this is the best way to do it because sometimes for admin purposes you need to add other things up here you don’t want those displaying on the front end so I’m going to do Colton Smith there I’m going to grab his content of his review paste it in there and then I’m going to grab his avatar and I’m going to select it so now we’re going to update that I’m going to come in and add the other two all right so the next person is Irene Roberts all right perfect so Irene Roberts here’s her review did not copy from Figma what’s going on here copy copy okay paste that in I don’t want the quotes get those out Irene Roberts there add her media is right here I don’t know which ones I mean but it doesn’t really matter now I’m going to go back and I’m going to add the last one which is and Wallace okay and Wallace paste get rid of quotes add her media and paste her name publish perfect okay so very very simple very very quick and that just adds tremendous scalability and maintainability to this website so what I’m going to do now is I’m going to delete this I’m going to delete this and in bricks all I have to do let me reload the builder first because none of what we just did in the database is probably available in the builder so now I’m going to just turn this card into a post loop right a query loop and then I’m going to edit my query which is post post type is reviews and that’s really probably all I have to do I’m going to go ahead and limit this to six so post for page I’m going to say six include exclude exclude current da da da da da da da da da da da da no results okay I think we’re good to go all right safe and now all I have to do is swap the data out with our dynamic like dynamic data swap it out with what’s in the database so for example we need here’s the image I just get rid of that and then select dynamic data as my image and this is amazing here that you can just hit review and then just grab the reviewer and then I can actually choose something like I have something super small thumbnail that’s all I need right there okay and then under the name I want to just clear this out and I want to put in our review name and then under verified buyer that’s actually good to go on this I need to clear the quote out and just dynamically insert reviewer quote and then I had saved and look at this guys scalable maintainable right now we need to do something else here if we really want these things to be correct so these actually need to be lies and this container right here needs to be a UL because this is a list of quotes so for like accessibility purposes semantic HTML accuracy you want these to be list items so we are going to go ahead and change this to a custom tag of UL and this is going to create some additional just ridiculousness right which is like default left padding or margin or whatever and we’re going to have to fix that stuff again like I explain doing this stuff properly takes extra time little extra work little extra knowledge I’m going to grab my card here and then this is going to be custom ally just like this and I’m going to hit safe perfect now I am going to go to the front end I want to show you this let’s inspect it now see how clean our HTML is I have a unordered list right here that is a grid I open the unordered list and you can see I have three list items this is the benefit of using builders like bricks and oxygen ultra clean code semantic HTML accuracy going the extra mile doing things right following best practices so what I need to do now though is just see that my UL right has some padding or or margin on it let’s see yeah right here margin block start of one in right there is what’s causing that so my UL I’m going to create a utility class for this most likely and it’s going to be list I don’t know if I want to use none unstyled list unstyled just like that all right now I’m going to go back into code box we’re going to do list ah geez I can type come on list unstyled all right and then this is going to be a this only applies to ULs all right so the margin left is zero let’s see if that remove that it did check that out we’re now in perfect alignment and I don’t see anything else influencing from the list so I think we’re pretty good to go here let’s flip back to our Figma and let’s see what else we need to do so that age two needs to get bigger for sure now there’s a couple different ways that I can do this in automatic CSS I can increase my scale I can increase my heading base size in this case I don’t have any other headings to look at to reference to know what needs to happen so just for this specific purpose I can just override the age two size so I can see that this is 56 pixels here so I’m going to go into a CSS and I’m going to go to headings under typography I’m going to go to heading over I’m going to go to heading over rides age two I’m going to put a 56 pixel max so I’m going to hit save and then we’re going to see that gets bigger uh oh we lost something here what’s going on uh you uh oh that’s right that’s right hold on we need to think about this it’s not UL list unstyled margin left uh that’s what it is padding inline start of 40 pixels okay zero it is not that’s that’s causing the problem it’s this padding inline start of zero okay thank you that should be good I don’t like the line height that we’re dealing with here uh oh also keep in mind guys you know a lot of the work that I’m doing is work that you would do on an entire website right like you know the heading size the heading line height that kind of stuff so don’t just think again that oh it’s taking so long to build this one little section a lot of the stuff I’m doing applies to the entire website that we would be building right it’s not just I’m not just doing it for this little section uh but we need to tighten up our typography line height so on our headings line heights we’re going to go like 1.1 I don’t know if that’s enough maybe I can go all the way to 1 let’s just see yeah let’s go all the way to 1 so 1 there I’d probably put one there on the H ones as well there we go all right check out our Figma all right we’re looking really good now what we can deal with is this kind of let’s bump move things around I want to tackle these first and again this is an area where you don’t want to just like pop on a utility class with margin top or something like that I mean let’s see let’s see what would happen so I’m going to grab this card right oh I actually in this case because you’re using a repeater or a query loop I can’t even click on these cards I can’t even access them but that’s actually a good thing because if I could and I could do something like margin top on individual ones it would be encouraging me to follow best practices to not follow best practices so it’s actually good that this is happening so I’m going to do a class on our wrapper here which is there’s my cards my three cards I so I’m going to do no those are the wrong ones container here’s my review card query loop this is our review card grid so I am going to do a class of your review card grid just like that okay so now we can happen a code box and it’s actually be good because we can do a little bit of sass here as well just show you show you a little bit of basic nesting so we’re targeting our review card grid and then I want to target the direct children of the review card grid which is our review cards right so I’m going to just put a star that actually gives me more flexibility because it’ll target any direct child it doesn’t have to have the class of review card on it so it’s a little bit less breakable I guess going into the future ultimately I don’t really think it would matter but whatever then we’re going to open brackets just like that so I’m targeting all direct children at this point so if I did a border five pixel solid red right here you would see all of them get a five pixel of border red but I don’t want that remember we only need to nudge the second one and the third one so I need to target the second one and the third one independently so in order to do that I have to use what’s called in child and so I’m going to remove this instruction here and I’m going to in sass you can do this with nesting where you do in child and then if I do two in that is the second child and then I can paste my instruction there and now we’re going to go and we see that only the second one has that border then I can simply copy this and paste it and do three in and then here I can do blue and I can see that we can target these separately where I have one is red and one is blue so that’s getting us exactly where we need to go the thing is we don’t need to add a border to them we need to actually move them we need to nudge them down the best way to nudge them I think in this situation is a is a transform so we’re going to do transform of translate and it’s going to be translate why and then I need probably let’s just do a one m nudge on there and let’s see see that so we’ve nudged it down one m and then I can grab this whole statement here and I’m effectively just going to double it and I can even use variables here that auto double as we go I don’t think that level of customization is quite necessary but there’s our little nudging effect that we’ve got going on there now we can actually see what that looks like on mobile and we can see that that actually that nudge is going to apply on mobile and we don’t want it to apply on mobile so what we can do here is we can do at media and we can do min with let’s do min with of what’s our break point value 992 okay and then we can open and all we have to do is put this inside of our media query now I wish this did all of our formatting for us but it doesn’t but now that should only take effect at 992 and above which we actually might need to make that 993 nope there goes it’s fine like that the nudge just went away all right so perfect so only on desktop is it going to get that little nudge that’s how we handle that all right next thing we’re going to do is deal with nudging these things right here and let’s see here at L is this too wide or do we want to get to here before we break things I think we can do it at M instead so instead of grid L1 let’s do grid M1 and then the m break point is 768 so I’m just going to change this from 992 to 768 and then I want to see what we get now so now see we still have the three columns here this up here maybe can still be let’s look at it let’s take grid L1 and go grid M1 okay these these are too big keep in mind I’m zoomed in as well we looked at it like that that’s what we’re really looking like here I see right off the bat that our review card label I’m going to go back to desktop here and I’m going to go to typography this line height only needs to be like 1.1 there and then let’s see what those look like at the m L okay I don’t really like that it breaks there but it’s not that big of a deal when I have the line height in there correctly maybe we can just change the gap to like gap it’s still going to break on this one anyway so whatever all right the last thing we have to tackle is just staggering these little review card things so remember in the beginning I said I’m going to probably take off the 100% with that was on them I’m going to actually go ahead and do that on my rated card I’m going to take off the 100% with so you can see that because we need to stagger them like this in the design which means we need room inside the container to work with they can’t all be the same they can all be the same width but they can’t be the full width of the container that they’re in the other thing I’m noticing is this bottom one this last one is perfectly aligned with the edge of content over here which tells me all these cards need to be aligned to the right hand side so I am going to put a we’re actually going to do a lot of things with this container right here so I am going to make a class we’re going to do review card review cards because there’s multiple review cards wrapper something like that and then let’s go ahead and align these so that needs to be aligned to the end so now since we’re aligned to the end they all are in alignment with this side of our page width so to speak so the next thing I need to do is I just need to nudge them over to the left a little bit just the first one and the second one the third one is going to stay exactly where it’s at I also need to put these in the middle of their container okay now we’re going to write some custom CSS to go ahead and nudge these over because I want the nudging to happen automatically and be nice and scalable and maintainable so what I’m going to do is basically exactly what we did here but just a little bit different so I’m going to do review cards no that wasn’t called review cards it was rated cards wrapper did I name that class correctly nope I didn’t I need to delete that review those are not review cards review cards wrapper let’s delete that they’re rated okay rated cards wrapper all right so in code box I’m going to have rated cards wrapper and I’m going to be targeting direct children again I’m going to target the in well actually I can just type target the first child so first child just like that and then let’s just see if we’re targeting correctly that doesn’t need an extra s okay so I have selected the first one correctly so this one let’s just copy this and do a in child to and just see if we yet now we’re targeting the second one as well okay so instead of border five pixel salad red I need another transform we’re going to translate X this time and I want to pull the first one over minus 2m so 2m over to the left and then I want to pull the second one only minus 1m and that’s what are we getting here that’s interesting let me save this oh oh okay that’s right because I deleted that class we lost our align cross axis to the end and we lost our centering okay I was like what were those styles go so let’s check it out okay the only thing I’m seeing here is this one’s not as long as this one so it doesn’t actually look like it’s offset so what I’m going to do is find a width we can actually just do it in here I’ll just grab the rated card remember I took off the 100% width I just need to find a width that works like there’s 90% maybe we can stick with 100% we just end up a little bit close to our content over here but if I change my gap that’ll give us some extra space to work with and then let’s see what we look like in our Figma it’s actually a lot more of a gap so I’m thinking instead of grid yeah grid too we need to do a stagger like an uneven grid so maybe like a two three where it’s a smaller first and then a larger second that’s better and now we need much more of a gap so we can do gap of like XXL we can even make this container this rated cards wrapper ooh could be a width of 90% or something so now that that width is different it’s kind of not aligned with the edge I think I can probably just get away with putting a margin left of auto on here and now we’re really really close yeah now we’re looking we’re looking really good I’m still not buying that this is only 1100 pixels right here I feel like we don’t have nearly as much room to work with as they do like this is clearly looking wider so I’m not sure that that is accurate what we can do is go up here and just give ourselves a little extra room in this container let’s go to like 1280 there we go now now we’re looking good these these can actually all be like hmm we actually at this point can go back to just an uneven grid so let’s just do grid 2 there we go I’m I’m I’m basically calling that a date that looks that looks good I mean this you could still tighten up if you wanted to can even do like a width in them on here or something yeah you check out the Figma it’s good to go I do want more of a gap on the gap on my containers on my section here so I had a gap of XL let’s do a gap of XXL because there is just feel like there’s more space in the in the Figma than we had here so that gets a little bit more white space all right I’m just thinking now that these could just be a little bit bigger here so maybe like 3m 2m that looks really good that looks really good okay I’m good with that let’s see how these look on yeah so on in devices actually don’t care that that’s still maybe they should all be the left on him devices so we’ll do the exact same thing again just making decisions here I can actually just grab these what’s cool about nesting is I can put all these instructions here very easily okay and then we get the same effect where that does not do that okay but we have another issue which is that margin auto on that container needs to be gone at this break point so 0 pixels 0 there you go just need 0 all right that’s better right there I like that and then we just need to change our gap so our gap at m is m very easy to change okay all that looks good on mobile we are good to go so I’m going to save we just got to do our background so we’re going to create a class for our background this is going to be called blurb background or bg blurb something like that and effectively what we have to do is this and this and we can’t do two of these background images in bricks I don’t believe I mean let’s look at it real quick we can go to background select image you can only select one as far as I can see we need to position them and all that kind of stuff so we’re going to go back into code box for this so this is going to be bg blurb and then for this I want to do background image and I want to do a URL and we just need to know what the heck the URL is so let’s go to media and here we go right here so this is the top mobile what is this bottom desktop bottom mobile where’s top desktop there we go right here so I’m just going to grab this and let’s do background size I’m going to do 50 let’s just try 50% and then background repeat is no repeat let’s just see what we get there oh let’s do a let’s do a background position I was like can I see it is it’s too light background position left top there it is poy-fick it’s in there okay now I need the other one which is going to be on the bottom what is it called I imagine it’s just bottom desktop that’s bottom mobile bottom desktop we don’t even need to use the bottom mobile bottom desktop thing so what I’m going to do here is if you actually put you can hit enter here tab over get a little comma action and just put the other one in and then this is going to be bottom desktop and then left top we do bottom right as our position we just use the comma separator background size is 50% on both no repeat on both I can actually should probably have that there think I think you have to repeat all the instructions let me see okay I’m actually I’m not seeing any of them now let’s close this close this okay I see the bottom one now let me save this there it is there’s the bottom one right there it’s very very light it’s very difficult to see I don’t even know if you guys are going to be able to see it but we do have them both and I’m inspect I just want to see the behavior of these things on mobile so it’s staying there it’s getting really small though it’s getting too small and this is why they gave a mobile file and a desktop file for your background image but we can still trick it so anytime you need something to stop going smaller it’s kind of like think about this is responsive typography or response and spacing we’re not going to use like a clamp function for the size I guess technically you could use a clamp function for the well I don’t I don’t even know if background I guess it would background size 50% let’s use let’s use you couldn’t use a clamp function but it’s easier just use them what’s called a max function which actually it just takes the greater value of two things and basically effectively caps a minimum so 50% or it doesn’t matter what order these go in either I don’t want to use this is one area where you probably would use pixel values just because they’re more static so let’s do the same thing here and let’s just see what we get now so now I get smaller and it should stop and it does not appear to okay max 50% 300 pixels there we go okay 300 pixels wasn’t quite enough so 500 pixels seems to do the trick I’m really hoping you guys can see that but it’s scaling down down down down down down down down down down down down down down down down down down down down down down down and it stops right there so it’s coming straight through here still and then the bottom one is coming straight through here still so it’s actually like perfect at that now this these are getting a little squished but they’re about to break see that there are stack I always say break but really like stack is probably more productive word the only I’m worried about is these getting very squished in there and unfortunately it doesn’t give us it doesn’t give us in Figma any view of what should happen between these two sizes oh it also these need to stack on mobile I didn’t even see that before that’s easy though so I’m just going to come in here on our review on our rated card down to here and I’m just going to change to flex column there and then our row gap can be like 0.5m and that that’ll look perfect and then also wherever these break yeah like right there we can just go 100% width on the zero style layout with 100% oh where am I setting the width no I was already hold on let me think about this oh it’s this it never mind it’s not the card it’s the container for the cards can be 100% with yeah it’s on that wrapper so 100% width right there all right that looks good and then maybe this would look what’s the font size here 17 17 so that’s the S so on the label style typography bar text S there you go that’ll give us a little bit more room as we start to break down that’s much better much much much much much better I also think probably at this break point our card why can I select my card where’s my rated card there we go our left and right padding can go to like 1m here and that’s going to give us a little bit more space in there gosh I wasn’t doing it on the class again rated card that’s a little bit of needing needing to improve things on the UX side with bricks okay I’m good with that I’m good with everything we’ve got a background in there we’ve got all this up in there only thing I’m seeing being a little bit picky on this rated card the padding should probably be like 1.5 on the top and 1.5 on the bottom it’s a little bit bigger little bit thicker okay takes a little bit more space think we’re all good so let’s go back to camera that is that as far as this tutorial goes thank you for watching comments are welcome down below this I think was a good you know warm up in bricks obviously there’s still some quirks I got to figure out some brainfarts in there but you guys get to see pretty much everything that’s it hope you guys liked it hope you guys found value I’m out peace