Styling Images

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