Video Transcript
hello and welcome back to part three of the build with bricks Maven Series in the previous episode we looked at the figma file more in depth we built out this um homepage structure with the structure the con components from bricks Maven and we um got it all done we also looked at briefly how I styled and kind of what changes I made to kind of give this a little more cohesive branding really not much as I mentioned but it’s a little bit different and we’re you know we’re just going to build it out in bricks all right so that’s the next Point uh we’re going to go over today so let’s get started we’re going to I’m going to come here to my server Avatar application for my deployment of applications and servers for WordPress you can use whatever you use if you use local that’s fine you can do it locally we’re going to use a subdomain because I’m used to working with the team uh to uh get projects done and you know they work in different parts of the world and they need to be able to log in so um we are going to deploy a just a vanilla site here I have just bricks here and we’re going to clone that let’s come here uh that is set on a subdomain on on just my personal um email or domain and we’re going to clone that so let’s go select server and we’re going to call this be I I already had to do this a couple times um so that’s why it’s typed in here new database name DB uh what’s called the demo video and let’s clone that all right so we’re just making sure we clone the right application the right database and creating a new one and then we’re going to add this to a subdomain so that should be done come back to my applications and I’ve got other ones here uh we’ve got you know just the BP importer uh let’s just come here to the site and what I can do is add a domain to Bricks Maven let’s do that bricks Maven demo d demo. brendon.com it’s a long one but hey at least we’ll be able to remember it so that’s cloning um it’s now is a good time any to say uh go ahead and hit that like And subscribe button I know you want to all right uh so this is the one we cloned I can close that I can close that um let’s open up site so the other thing I’ve done I’ve come into my my domain here at Cloud flare I’ve added a uh this is the the bricks vanilla one that’s the IP address this one’s on a different one uh this is a wild card so anything that I put in the subdomain field will automatically point there as long as I have an application set up for it which I do here bricks Maven Das demo go here that’s looking a little little wonky but I bet it’s just caching WP admin and wonderful of course we don’t have a oh you know what I need to do I need to set this to the primary AR domain so we’re changing this to the actual subdomain from the temporary domain right let’s keep going okay now I’m going to close that and it should be pretty much instantaneous yep the admin log in already got bricks installed version 1.9.4 um I’ve got light speed cache that comes with it let’s get rid of these antip spam Hello Dolly goodbye Dolly all right so we have advanced themer on here let’s also get um core framework we’re going to use that here uh this is just using the bricks Maven core framework uh oh sorry it’s not a plugin oh no it is a plugin I’m adding first the plugin right so plugins and I’ve got a bunch of plugins here where are my bricks plugins core framework there we go activate plug-in and the other thing I’ll mention here when I first did this video I had to re-record it because I don’t think that it works with um PHP 8.2 I had to where is it here um when I first recorded it I was using 8.2 make sure you I’m pretty sure you need to use 8.1 for now core framework installed perfect let’s go to core framework let’s go to manage project we’re going to find oh failed to get preset from database okay so good I’m I’m actually glad I’m running into this error again so hopefully this will work settings we’re going to go to permal Links we’re going to change it from plane to anything else and save it and I’m I’m just in the habit of double saving permal links because sometimes I feel like that needed to be done uh core framework please work please work come on okay uh valid SSL do I need that let me see let me go into make sure that I have added the S here l in again or framework come on baby come on come on come on come on why P
cash why you doing this to me why links post name I don’t know swear if I have to record this another time um yet oh oh wait there we go okay maybe it was per links okay okay moving along sorry maybe if I if only I was a good editor I would uh you know get this all right so let’s that’s enabled okay I think that’s all we need save manage project brous files bricks Maven Alpha Library core file override all this is pretty much the same it looks like there’s some background colors and text color differences I haven’t gone through all of it to like compare one: one but um in any case if you are a bricks Maven customer you will have that we have our bricks add-on that’s all good uh let’s go to I don’t know let’s just make sure we get our color in there let’s let’s grab that before we forget anything else the most important thing primary let’s change let’s change this to a hex if we need that yeah it looks like we do um we’re not going to maybe use a color I don’t know what we’re going to do actually we’re just going to have this in for now change that to hsl I don’t know this one can be like five I don’t know we’re not we’re not going to worry about this yet we’re just going to save that make sure that’s in there let’s go back and get our secondary let’s go get that guy
that change attex
again
yeah we can do this and this will actually regenerate Shades too sometimes I wonder why it did that on that anyway that’s okay we’re we’re we’re going to come back in here later on so I’m going to close that I might need that I don’t know let’s close it um what else what else do we need to get started I would highly recommend you read this article uh from strear on bricks Labs about setting up core framework in bricks essentially what we’re going to do we’ve already done some of this we’ve activated the bricks plug-in we’re going to set up the max container with uh what else we are going to uh set up the conditions for the site we’re going to set up the custom break points some of this stuff uh is already kind of done okay so let’s let’s just jump back into it let’s go to our bricks templet let’s get started new let’s go add
header edit with bricks come back to our figma file which one do we have we have header
four oh let’s see we have not set up bricks yet jumping ahead too far here all right come on let’s let’s get focused this is not going to take long SVG custom break points we want that um perfect save that Builder access we want code execution yes templates now let’s get templates I’m going to come back into my other file here we’re going to do the core bricks Maven so we have access to the remote templates that we’ve already talked about in the figma file uh Builder we’re going to let see turn off element spacing duplicate delete we want those on collapse on pagid yes expand active element yes and expand active element let’s do 50% here normally again again this would be set up this is like a blueprint setup that you would already have set up that I would clone I’m just doing this so you guys can see uh although for that matter I’m skipping performance because it’s not going to be a live site and I’m not going to worry about any of this stuff but I think we’re good um before we go back into core Let’s do let’s do uh let’s do Advanced themer okay so General we have only Builder tweaks turned on the other thing I’m going to do is turn on ACF so I get the custom post types that we’re going to use later on come back to Builder Builder tweaks here have everything turned on here let’s go here I want grid mode turn or I don’t want grid mode some I mean you can use it if you want uh X mode I’m going to use contrast Checker probably open link yes class manager big one make sure you have that on basically every project structure panel turn that on developer mode uh let’s turn all these on and uh let’s turn on our quick ad feature this is another massive time saer literally just that alone is worth the price let’s let’s up that uh that and uh you know there’s so much stuff to go over here I I I don’t know there’s this is a whole other video but I’m still waiting for my um my check from from Maxine to cash so um wonderful let’s get the extend Global classes and styles find a replace yes Dragon drop glasses like I don’t even think I need that uh we’ll keep ID styling on CU we might use some of these features like extend Global classes and styles and this export feature keep that on and count classes no SLE indicator yes a lot of this you don’t you only use if you’re using the uh CSS U framework built into at clone class yes copy class keyboard yes um autofocus to First unlock class that’s nice if you have a bunch of classes on an element and one of them’s unlocked it’ll on that one break point indicator yes IND indicator for Styles yes Save elements let’s do I don’t know I don’t particularly like the tab shortcut personally I know a lot of people do uh disable pin close all styles by default I also don’t like having this turned on personally I like being able to see all the tabs uh shortcut I want overview shortcut class manager shortcut yes lurm Epson generator sometimes is useful grid Builder we might use later power CSS yes okay apologize for going through this so quickly uh a lot of this is just like you can do it yourself kind of how you want it this one is on by default that’s fantastic that should be in Bricks by default maybe I’ll create a feature request and everyone can hopefully upload that uh figure for images caption no caption yes text input yes yes yes uh overflow hidden so I don’t have typ I can do a little drop down it’s all about about saving those precious precious clicks all right trying to be respectful of everyone’s time let’s keep going and um get into bricks again so let’s go to our templates go to
header and what did I say it was header four go to our templates header
four get that in there going to foro putting the theme Styles in hey wonderful there we’ve got that and let’s go also create some pages um what do we have we have Services contact we have FAQ I don’t remember if we have an about us but we just want to create some of these and those into a menu oh I think I need to make sure that they are published edit yes status published back here refresh menu name primary menu number of times I type that in uh okay we’re just going to add select all add and maybe remove the Privacy P put contact at the end sample page I guess okay save that come back
refresh okay there’s our menu got that going what do we have here we’ve got header four let’s rename these uh let’s go to our component class manager bulk actions duplicate this is called header 4 uh we want to find all those classes replace header for which just header um that add an extra Dash interest um you know you could add a prefix here you can add a suffix if you’d like we’re going to remove the old classes we’re going to assign all these duplicated classes to the same element delete the old classes from the database perfect save post okay so now we’ve just got header so you know you could you could keep these named you know if you’re I don’t know you’re going to rename them here you can rename them you can uh rename the classes whatever you’d like but in any case there we go those are full bmed out again with our new classes for just header most well I would say what 90% of websites are probably going to have one header uh okay so that’s done for now let’s get out of here oh before we do that let’s go make sure that we have uh Global theme create oh uh sorry create Global theme conditions [Music] everywhere uh typography I’m going to come in here and put my b m for the heading uh let’s let’s also just do normally you should um upload your font download it and upload it to the server uh what else are we going to do we’re going to come in here to container and do 1400 for the bricks Maven website with and of course you can update these you just you know you got to change it project by project um what else would you need to do here I’m going to also uh break points we want to change some break points we want to change configure uh edit main breakpoint I think we want to do here should change it I think yep nice just see the enter worked this one is supposed to be I’m finding it 911 that should be good uh what’s this one 767 now I might I might have actually already oh no no sorry these are the default brick lines excuse me uh so this yeah this does need to be 992 and I don’t think it’s going to break your site if you don’t do this but good practice to get into and you know it’s it it it it could break it what am I saying don’t break things all right one uh this is going to be 480 all right so those those should be good to go and let’s go out of here go back to here um for framework other I’m going to create a new selector group for bricks
utility utility classes uh I guess I don’t know um although this isn’t really a utility class where we want the bricks section we have [Music] padding not not quite used to the tabbing yet okay but it’s super easy to do um now we want to do now according to the article again uh I will share this in the description me go back here where am I at um this guy this guy yeah so this is saying now you can do this in the theme settings where I just was but so the saying wherever there’s a brick section do padding of 4X and s so let’s go out of here out of there there let’s do space or uh 4XL and
space for the top and the side padding and the other thing you could do if you want your stuff spaced out is like where we XC uh container you don’t like container Gap you do container gap of uh space what space m uh maybe space l and then we could duplicate that and do bricks container we could do bricks um yeah let’s let’s just leave it leave it there for now in fact I don’t even know if this is going to mess with our project but but I don’t think it will any case you should do this on your on your sites anyway uh okay header templates done we already did that let’s go back to footer our putter I apologize I’m like all over the place I recorded this like four times and driving me nuts uh footer template all right so
for we’ve got foter one very complicated
stuff
one put this in
there okay and again same stuff we’re going to component class manage this we’re going to duplicate we’re going to look for footer one copy that replace footer one with just footer and that’s pretty much it delete the old classes remove the old classes
okay everything’s footer now fantastic I think this had a uh like crazy crazy background like that so let’s just get a little bit of styling in there so much styling all right what else we got um this was the CTA that’s above uh that’s like basically part of the Twitter section and CTA 5 let’s get that in there to [Music]
okay
CTA all do action by okay and again we’re g to we’re going to have to go back and change some of this stuff out but um there CTA 5 let’s again component class manage and I believe this is the only CTA that we’re using on this site you know normally you might have a bunch so just make sure you name it appropriately CTA CTA 5 yeah TTA 5 sorry um replaced with just CTA
okay okay great there GTA believe that’s also part of that so um again we’re going to come back and style this later on but we’re getting our structure in place I don’t think I need to do yeah right there’s no template stuff on for Footers okay we are moving along so let’s let’s get the homepage let’s get this going uh in fact I if I put this open I have it open on another screen I should be able to be good to go we’ll get through this I don’t know how long it’s been hopefully we’re getting out out of here under 30 minutes um class is in session wait do I already have a
homepage all right homepage and uh you know if you’re still listening I appreciate you sticking around I don’t know if this is like helpful or I don’t think it’s that entertaining there’s no way there’s no way people like listening to this stuff all right so templates we are going to find a hero section I don’t remember which one it is now
20 20 that doesn’t work like that 44 oh some of them have dashes okay keep that in mind when you’re searching uh 0 20 we’re just going to get structure in place and remove this interesting ah look at I’m getting extra section padding because I did that thing in in core framework let me see here I can just leave need this I’d say uh yeah maybe maybe don’t put it in maybe uh maybe know what you’re doing before you do it remove remove actually can I redo that oh well well wait let me just do yeah let’s just get rid of them we don’t need them over complicating it all
right okay there we got our normal padding again sorry about that remove this I I don’t I don’t remember it ever called that move oh remove
the huh I don’t know what that is I’ve never seen that before but whatever I’m getting distracted here all right I got to keep that open on another page uh hero and then we got a header section oh wait that’s that’s the header page seven header page
seven
enter page
seven grid
five if I can search like this perfect I love that uh no theme style grid five I know we’re going to reuse so I’m going to call this I’m going to rename it to duplicate we’re going to call we’re going to look for for grid what is this grid card five grid card five search for that because that’s the initial part of it and we don’t want to replace uh those we want to just replace that and we want to call this I’m going to call this feature Rd okay and yeah okay let’s make sure we delete those duplicate duplicate
oh keep zooming in I’m used to used to being in figma now okay so this one probably doesn’t need to be a tertiary let’s do button secondary I haven’t made secondary buttons yet that’s okay we’ll do that later uh perfect so let’s keep going grid five we got that we’re going to do a custom section next so I’m just going to leave a space uh templates templates templates come on come on now feature 10 why is this why are you doing this to me you doing this to me there feature
10 oh where’s
one there’s another one I think we are going to reuse so before we do anything going to delete this one I think we’re just going to use use it like that and let’s just let’s just uh again componentize it look for feature 10 and we’re going to replace that with like what do we want to call that that’s like the feature alt yes I don’t know alternate version of it I don’t know it doesn’t really matter let’s
duplicate H it
again did it work wait
no oh okay it already did it I I guess I missed the little H preview all right so that’s that’s good uh whoa what have I done oh I just saved over my classes that’s okay that’s okay let’s keep going let’s keep going we’re not going to worry about it right now I’ll come fix it after we’re going to do a pricing section next uh [Music] pricing I can spell price pricing pricing section 10 hello no and I’m GNA I’m going to skip the BM classes just because I feel like we’re going to take too long so let’s just keep going this is already way too long all right I thought I thought I could build build faster wow I guess when you’re talking through it it’s uh it’s a little bit slower pricing we’re going to do feature [Music]
22 that one’s also going to be reused a couple times um yeah that’s okay we’re going to we’re going to keep going you get the idea at this point I don’t think you need to keep watching uh all this stuff testimonial the the thing we’re going to do though we then normally you know your header page is not going to or your hom page is probably not going to be that long but we’re going to componentize this later so that we can use them on other pages so I just want to get everything on the homepage at least and then I’m signing out accordion accordion [Music]
4 Okay so so you get the idea I’m going to call it there I think I’m going to probably just template the rest of these out the other thing I’ll do because it’s like really the only template other template I’m going to do besides blog I’m just going to do a single I don’t know I think I might have to use
section okay that’s okay that’s all right guys let’s keep going um okay and for the one that we’re basically going to be reusing is this one you can see it appears on other Pages lots of different pages uh so that one is header
10 it’s like header page 10 keep mind those are different header page one header page two header page 10 there it is okay and then this is just going to be our page name name post title I guess this will just be excerpt for now okay and then this is a template so we want to apply this template to everywhere uh we do want to actually apply it to the entire website but then exclude the front page exclude the front and check that out there we go we got the start of our secondary page template all right this this is dragged on you get the idea uh we’re gonna I’m GNA probably just add the rest of the pages I don’t know like if everyone is watching till this point like I don’t even know what the point is Right single blog this will take a second go ahead and go ahead and turn the video off don’t even do anything don’t even do anything with me all right keep
going I think this is just the first uh
blog blog page I think it’s like a whole Blog Page normally we would probably build this out and I still might I just want to get this blog single
one we don’t even have blog post yet so it’s not really going to matter conditions we’re going to apply this to all uh post type post it’s be single post and get another template quickly and I I’ll go ahead and add the uh uh block log archive and it’s going to be an archive fantastic all right what else next next video we’re going to hopefully add all this and style it and get some custom post types going maybe go over some of the war workflows for um Advanced themer blog archive one it nice and simple of course we have no blog posts yet all right so you get the idea we’re we’re starting to we’re starting to take shape uh we we have uh let’s see I don’t have my homepage
signed make sure you do that I should probably have that done on the don’t have a Blog Page set up anyway so you get the idea that we [Music] are I
not
homepage apparently I didn’t save this is the homepage uh okay there we go right so starting to take structure all right it’s uh looking a little Bare Bones but we’re going to get some stuff in here uh but any case we’re going to try and get to this end point soon as we can uh I appreciate everyone sticking around and signing out bye
