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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up