Bricks 1.3.5 - CSS Classes, Pseudo-Classes & Pseudo-Elements

thomas from bricks here so we've just released bricks 135 and in typical brics fashion i'm going to show you a quick overview of the main new features if you head over to brexit io slash changelog you can find the change log entry with a list of all of the changes here so in this release we've got more than 60. the new features are mainly uh style related so we're going to go over those in a minute but there's also a lot of improvements inside of the builder the build interface itself and as you can see down here we've also got a lot of bug fixes so that's something we always focus on as well not just to keep adding new features as quickly as possible but to ensure as the builder itself the platform itself grows in its feature set that it's going to grow in a stable and healthy way so that means also a lot of time spending fixing bugs all right so what are we gonna have a look at in this video the first main feature or the biggest feature of this release is the introduction of global css classes so we're going to check that out in the builder and you can now also create your own pseudo classes and pseudo elements so we can style a specific element state or a part of an element and that's something that we're gonna explore in the second part of this video beyond those styling um features we now also support toolset so if you use the toolset plugin as your dynamic data provider it's now working with bricks as well there are various improvements and new features um related to the form element and then also to the container element itself and you have new flex settings the flex grow flex shrink and flex spaces css properties you can now set those visually as well and you can render bricks data inside of the post content element that's also very helpful feature but the only two features i think that needs some more explanation here in this video are the global css classes and the css pseudo classes and pseudo elements all right let's dive into the builder okay so i'm here inside the builder and the first feature we're going to explore are css classes in brics now a css class is a set or collection of styles that you can apply to any element on your site so if you have a certain collection of styles that you want to apply to let's say different buttons which is what we are going to do in this video so we're going to style the button up here and the button here you would create a class then you can add your styles visually in bricks and then you can just add those to any elements that needs them anywhere on your site and in order to do this and how we can actually create our class we would first select our element in my case that's going to be the button because we are going to create a class with some button styles and then up here you've got this new input by default you would edit the styles specific to this element here if we click on this um element id you can now see the css class name menu and all we need to do in order to create our classes just to give it a name so i'm gonna call that one button doc and then i'm gonna press enter now my class is created and it's already assigned to this element i also have this little counter up here telling me how many active classes this element has if i click on it you can now see i've got under element classes my button doc class okay so all the styling changes that i will apply now will be added to this css class not to this element itself but to the class this element is assigned to all right let's go to styles and change our background color to dark and you can already see it's being updated here now we can apply multiple changes as many as you want in terms of the stylings i'm just going to keep this very simple so i'm going to style my text color so now we've got white text color and the dark background now if i would to remove this class from this element i'm not going to delete it it's still in my database but i want to say i don't i no longer want to use this on this element i can just go here click remove and now you can see the counter is gone the class is no longer selected and it also doesn't appear here anymore in the preview now let's apply it again because i actually want to use it but i also want to use it down here so i click on this button you can see right now it has no active classes there is no counter i click on the element id you can now see the list of my classes if i click this one i assign it to this element and then i can also just continue editing this one if i choose to do so so let's say i want to change this to red background color now you can see this affects all the elements that have this class assigned to it so it's affects our button up here as well right let's undo this i actually want to keep this as a dark background color and let me show you how you can add another class because you're not limited to just add one class to an element you can add as many classes as you want so we already got a dog button dog class so let's create a light one so i'm gonna call that one button light hit enter and now i've created my second class you can also see this element now has two active clauses if i view them here you can see element classes the dark one and the light one so this is what's going to be applied first the dark one and then my light class so if both of those classes have the same css property defined like the background color the one from the light class is going to be used because that one takes precedence over the first one here let's just copy some styles show you how that one works as well so i can just grab the ones from my dock button and then i can just paste them here to my light button you can see immediately i can see the settings indicators you can see there's just been a change my light button light class now has those settings as well and then i can just basically overwrite those in my case i want to use a light background color and a dark text color so just the other way around and you can see now this order is taking precedence so it first runs the dark style and then the light style that's why now this one is light to remove it again i can just say i don't no longer want to use it click on the remove icon and now i just have one active class which is my button doc and then we can also rename a class so let's say you had a typo in your clause or you changed your naming system for your classes then you can just click on the pencil icon maybe you want to prefix it i'm going to call this prefix button dock make the change now it's renamed you can [Music] reset the styles as well if for some reason you want to start over with your styles without having to manually go through every setting and just clear it you can just go here and reset your styles now you can see they've been resetted and they're gone here and if you want you can also delete the style so i can just click here delete sure all right now they are deleted i actually want to apply some styles and let me just bring back this one here and yeah that's basically how you would work with css classes in bricks and that brings us to the second part of this video which is the pseudo classes and pseudo elements in bricks one three five so prior to riggs 135 we only had the ability to edit the hover state but obviously there are much more states for your website elements for example an element could be active it could have a focus state for your links they have a visited state and it's actually a whole a very long list of element states i will also provide a link to an article in the video description you can have a look as a reference and what's available in case you're not familiar with those states but yeah now you can use all of those states um brics comes with some predefined states but you can also add your own states via pseudo clauses so let's just have a look at the most commonly used state which would be the hover state and what am i going to change here let me just grab the heading and let's just say we want to change the heading color when i hover with my mouse over this heading now in order to do this um there's the same control up here but now when i click it i'm not entering the hover state because now we have we can basically choose which state we want to edit and you can see this new input up here select or create a pseudo class so if i click here i can now see three predefined states or pseudo classes hover active and focus we want to apply a hover effect to our heading so i click it and now you can see it's also highlighted and you can see the state that we're currently editing active pseudo class is hover now we want to change our text color let's just say we want to have it red when we hover with our mouse over it and you can see a preview right now so we're not editing the normal state we are editing the hover state but in order not that you have to hover over it and then go back and make another change that's basically the preview how it would look like when you hover with your mouse over this heading now once we are done with we've applied all of our changes in our case it's just going to be text color we can just leave this state we can just clear it here and now we're back into the normal editing mode now you can see up here this little counter which is basically the same concept that we use for our global classes telling me that we have one at least that we have one active pseudo class or pseudo element so if i click here you can now see that my um hover state has a setting because it has this little indicator that we also use down here for our normal settings and i can see it now if i hover over my heading here that it's gonna change the text color now what you can do you can also work with css transitions in order to make this transition between the normal state and the hardware state a bit smoother so i would just edit my heading or any other element really then i can go to css and then you can apply a css transition and this can be a super simple or you can chain it depending on if you want to add different css transitions to different css properties but the easiest syntax that you can use it's just simply to specify the transition duration so what you can do you can just say i want to have a transition that lasts 0.1 seconds so you would just put it in like this and then now you can see if i hover over my heading i have this transition effect and this only affects this specific element if you have your button and you apply a hover style you can set a different transition as well all right now that's how you could add a pseudo class such as hover you can also add your own ones for example if you want to style your visited links you could just create a visited pseudo class hit enter and now we actually got our very own custom pseudo class we're not going to work with this one in this video because i want to show you how to use the pseudoelements and pseudo-elements in css are there to style a specific part of an element for example the first letter of a word or a sentence or when editing a paragraph you could also style the first line of a text paragraph we're going to show both of those um use cases selecting the element again and we will create a we're gonna start with the first letter that's a pseudo-element so it's basically prefixed with a double colon i will leave a link in the videos video description as well about the pseudoelement so you can see a list of all of the available pseudo elements and explore those in more detail on your own but yeah that's basically it the one that i would create first for the to style the first letter of the world click save and now we're editing the first letter pseudo element what this is going to do because i'm editing my heading here if i make a change now to my typography color it will change the first letter of my heading which is this g so let's change it to this color and now you can see the change is already being applied and we can also make a change here change the font size if i put this you can see this only affects the first letter because that's the pseudo element that we are currently editing now you can use another one like i said for example we can create a pseudo element named first line that's another one hit enter now we're editing that one same principle and if i change now my text transform to uppercase you can see now the first line of this paragraph here is being styled nothing else um same goes for the text color if i want to change that and make it blue it looks like this and this is how you work with pseudo elements as well all right i think that's everything i wanted to show you in bricks 135 of course there are many more improvements and new features make sure to check out the change log here over at brix build io changelog i hope you enjoyed this update um happy building and i see you in the next one bye

Channel: Bricks - Visual Site Builder for WordPress

Views: 1,056

Keywords:

Id: OWSMJmBL6RQ

Length: 14min 30sec (870 seconds)

Published: Fri Nov 05 2021