7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Creating Helper Classes

Sometimes you may need to override some of your default styles. In that case, you could create helper classes to keep things organized. In this lesson, you will learn the RSCSS way for naming and organizing such helper classes.

Related Links

3.1 Creating Helper Classes

Hello, and welcome back. In this lesson, I want to briefly talk about using helpers in RSCSS. If you've ever used Bootstrap for any amount of time, then you might be familiar with the helper classes that they have. Suggest pull left and pull right, which is a class that, if you apply it to an element, will cause that element to flow to the left or flow to the right. So, these helper classes are basically meant to override certain CSS values. They're usually the kind of things that you would put a exclamation point important in front of. So they're not the kind of thing you would use very often but they're there when you need them. And in RSCSS the naming convention for helpers is very simple. You simply start the class name with an underscore. If you have multiple words in your helper class, that's fine. You just put a hyphen in between them But the class name itself starts with an underscore. So one helper class we might include on our page is a full-width helper class. Where if you apply this full-width class to any element it will Said it's with to 100% of whatever it's apparent container is. And the reason we need that for this specific example is because our image here in this middle section doesn't quite reach the edges. Our image is a little bit smaller. Than the container that it's in. So we wanna stretch this out just a little bit and make it 100% of the width of it's container element. So again, the way we create a helper class. First of all you can find the URL for this in your course note for this lesson in which you open up. Go ahead and click on to create a new copy. And in our new copy, in our CSS, I'm gonna go down to the very bottom, and I'm gonna create a new class called _full-width. And all this is gonna do, is it's gonna set the width of whatever object we apply it to to 100%. And then we're gonna put !important in front of it, so that it overrides any other width settings. And as always you wanna be very sparing with your use of exclamation point important. So, once we've got that rule created all we need to do is to go into that image inside this header or inside this card. And apply that forward that class to it. So, we're gonna jump into HTML and then we'll scroll down to our section here Which has our long description in it, and we're going to find our image, which is right here. Right now it has a class of image. We're going to add another class of _full:width. And that should take care of it. So let's look at it, and when it refreshes, we see that it does now reach the edges of the screen. So these helper classes are very easy to implement, and as long as you consistently name them with And underscore as the first character and it's very easy to tell where your helpers are. So thank you for watching and I'll see you in the next lesson.

Back to the top