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