Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video, we're going to write three different types of modifiers for styling image elements.
-
0:00
When categorizing our Sass rules with SMACSS,
-
0:03
it's important to remember that our rule sets should only inherit and
-
0:07
add to previous rules, so we shouldn't need to undo properties.
-
0:11
So if we, for instance, ever need to remove an element's padding, margins, or
-
0:15
borders, we probably applied them too early.
-
0:18
Let's take a look at an example.
-
0:20
So here, we're going to write three different types of modifiers for
-
0:24
the image elements in our project.
-
0:27
So, the first thing we're going to do is go over to our base directory and
-
0:32
bring up our base.scss partial.
-
0:34
And here, we're going to define some default styling for
-
0:38
our main image element.
-
0:40
So, right above our list rules or anywhere really, I'll go ahead and
-
0:45
add a comment for images, then I'll target the image element.
-
0:50
And let's give our images some default bottom margin, so
-
0:54
we'll say margin-bottom and we'll make the value equivalent to 24 pixels in ems.
-
1:01
And right below that, let's also give it a max width of 100% and
-
1:07
we'll also wanna set its height to auto.
-
1:10
So we'll say height auto.
-
1:13
Okay. So
-
1:13
before we move on, we'll need to go over to our console and have Sass watch for
-
1:17
changes in our project by writing the command sass --watch scss:css.
-
1:25
So now when we save our base.scss partial and refresh the preview,
-
1:31
we can see how our images are now at a 100% max width.
-
1:37
So, what we'll do next is go over to our modules directory and
-
1:42
bring up the newimage.scss partial for images.
-
1:47
And we're going to write our image module rules
-
1:51
by first defining a class of image or img.
-
1:55
Inside the rule, we're going to include modifiers for wrap, avatar and hero.
-
2:01
Those are the types of modifiers we'll want for our images.
-
2:04
So first, let's go ahead and include a modifier selector with the modifier mixin.
-
2:10
And we'll want to create the class image wrap by passing wrap as an argument.
-
2:17
So now we'll create two more, so
-
2:18
I'll just go ahead and copy the one we just wrote and paste it right below.
-
2:22
And to create the class image avatar, we'll pass avatar as our argument.
-
2:30
And finally, we'll want to create the modifier class,
-
2:32
image hero, for our main hero images.
-
2:35
So instead of wrap, we'll pass hero as our argument.
-
2:39
So, each of these image modifier rules are going to
-
2:42
inherit the base styles we just gave the image element.
-
2:47
And now, we're gonna add to those rules.
-
2:49
So first, inside the wrap modifier rule, let's give it a border property,
-
2:54
and we'll make the value 1 pixel solid gray.
-
2:58
So we'll use the palette function to call an extra light shade of gray,
-
3:04
so we'll say grey, x-light.
-
3:08
And let's also give our wrap modifier some padding.
-
3:12
So we'll say padding and
-
3:14
we'll make the padding value equivalent to 12 pixels in ems.
-
3:19
Next, let's go inside our avatar modifier rule and
-
3:22
let's start by giving it a display block, and we'll give it a border radius.
-
3:29
So, we'll use the border-radius property and
-
3:32
we're going to use the br--round variable that's located in our config file.
-
3:37
Finally, in our hero modifier rule, we'll want to give it a margin-bottom property.
-
3:45
And let's make the value equivalent to 42 pixels.
-
3:51
Our hero image will [LAUGH] usually be pretty big, so
-
3:53
we'll wanna give it additional margins.
-
3:55
Now, here's a case where we're resetting that base margin
-
3:59
of 24 pixels with this new one here in our hero modifier.
-
4:04
Now, we could have extended the base margin property with a placeholder since
-
4:10
it's shared by the two modifiers above here, the wrap and avatar modifiers.
-
4:15
But in some cases, instead of extending absolutely everything in sight,
-
4:19
resetting certain styles is okay if and when it makes sense.
-
4:24
Remember, we're not aiming to remove every last bit of property duplication from our
-
4:28
CSS output.
-
4:30
We just need to make good decisions on when it makes sense and
-
4:33
I think it does here.
-
4:34
Okay, so now let's try our classes out in our markup.
-
4:38
So, we'll bring up the HTML file and let's find our main hero image.
-
4:44
There it is.
-
4:45
So, let's give it a class attribute.
-
4:48
And we'll give it that image hero modifier class.
-
4:52
Then, all the way down in our image examples right here under media,
-
4:57
we'll leave the first one alone since we don't wanna apply any modifier classes
-
5:02
to that one, but we'll give the next one the image wrap modifier class.
-
5:07
[BLANK_AUDIO]
-
5:12
And finally, we'll give our avatar image the image avatar modifier class.
-
5:21
I forgot an extra dash here in the image wrap class.
-
5:25
Okay, so let's save our index.html file and
-
5:28
let's take a look at our workspace preview.
-
5:30
So, I'll refresh and it looks like we're all set.
-
5:34
Let's scroll to the bottom and take a look at our images.
-
5:37
So, the wrap now has the border and padding, and the avatar is nicely rounded.
-
5:42
And as we can see, the max width is still set to 100%.
-
5:46
Cool.
-
5:48
Hopefully now, you're seeing the benefits of using a naming convention inside
-
5:52
an organization method like SMACSS.
-
5:55
Again, these are merely suggestions and guidelines to help you out.
-
5:59
What's important is that you find what works for you and stick with it.
-
6:02
Just try to be consistent.
You need to sign up for Treehouse in order to download course files.
Sign up