In the last section we got each video item to show what the title of the video it's representing an
image next to it as well.
Now this does not look too good as it stands right now.
So in this video we're going to work on just a little bit of styling to get started.
I'm going to pull open my semantic you eye docs.
Remember you can get you're out semantic dash you white dot com.
And then on the left hand menu under the elements section I'm going to find the link to list inside
of the list documentation or then scroll down a little bit to this kind of a little get hub looking
examplar right here.
It We'll take a look at the source for it.
So the wrapping div..
The div that contains each of these individual items needs to have a class of UI relaxed divided list
and then each individual item has to have a class of item.
So to translate this into our current component hierarchy we're essentially saying that our video list
component has to have a div of UI relax divided lists and then each individual video item has to return
an element that has a top level class name of item.
So let's do that refactor right now and hopefully ill will fix up a little bit of styling.
All right so I'll start at my video list right here.
So here's the div that wraps every individual video item that needs to have a class name of UI relaxed
divided list so relaxed invited list.
And now I'll flip back over to my video item component and now the root div inside of here needs to
have a class name of item.
So I'll put on the video items div a class name of item art.
So there's a couple of more class names we have to put in here.
But let's at least test this as it stands and make sure that we see at least some difference inside
of our application.
So I'll do another search.
And I at least see the little kind of dividing line right there.
That tells me that we're at least on the right path but we still need to do a little bit more than this.
So if I look at the documentation over here again on notice that I have a div inside there the first
settlment is essentially going to be some image or icon that is going to be displayed to the left to
on side.
There's actually another example inside of this file where this page right here that shows us how to
make use of an image on the left hand side.
So let's scroll down a little bit and find that it's all go down to image right here.
So a list item can contain an image.
If I expand this list I'll see that the div with class of item can have an image with a class of UI
avatar image.
Now in this case the class name of Avatar that you see on there is to just get the image to appear as
a circle.
In our case we probably don't want to show these thumbnails as a circle so we are not going to use the
Avatar class name.
Now you'll also notice that the content inside of this list has a div wrapped around it with a class
of content and then inside there is an element with a class of Hetter.
So it's essentially implement all these class names into our video item and I think it's going to help
our styling just a little bit.
All right tobacco-free here.
I'm going to first find my image tag.
I'll add on a class name of UI image and remember I do not need Avatar because all that's going to do
is turn the image into a circle.
And now after that I'm going to add a div I'm going to put my video snippet title inside there and I
will give that div a class name of content I'm going to wrap the title Inside of a another div inside
of your
and the inner div will get a class name of header like so.
So now I've got a very similar structure here of class names to what you can see in this example.
I've got the top level item the image a div with class content and then inside there in element with
class name header.
Now you will notice that they make use of an anchor tag.
In this case we don't have anything clickable per say just yet.
So we're going to render it simply as a div and even though we're using a different element the class
name is what really provides the styling with semantic UI.
So we can switch out the actual element type that we're using and just apply the same class name and
it will still do the appropriate styling to it.
OK.
So here's my video item.
I'm going to save this or then flip back over and we'll do a quick test so I'll search for buildings.
All right so that definitely definitely looks better than what we had before.
On the right hand side I've got my image I have the kind of nicely formatted because it's nice and bold
header on the right hand side.
But now the only issue is that the image is showing up to large and the text right here.
I feel like would be a lot better if it was kind of centered next to the image.
Now unfortunately to do those two changes to limit the size of the image and to center the text right
here we can't use semantic UI for that.
We're going to have to write just a little bit of custom CSSA rather than taking a pause So let's just
get it done right now so we can have one video that contains all the styling stuff we have to do.
All right.
So we're going to write out a little bit of custom styling here.
We could either add a custom style tag to the elements you display in here or we could create a separate
CSSA file.
In this case I'm going to decide to create a separate CSSA file so that we don't clutter up this component
with a bunch of styling rules.
So inside my component's directory I'm going to make a new file called Video item C Ss
and then I'm going to flip back over to the video item and I will import that CSSA file at the very
top.
So I will say simply import slash video item that SS like so now I remember a rule that I like to use
to find the root element that is returned from some component and give it a class name equal to the
component name.
And that just make sure that when I write some CSSA I can style just the GSX inside of your with some
reasonable certainty rather than having some CSSA that it's going to accidentally be applied to all
of the different elements inside my application.
And there's definitely some rules on how effective this is especially when my component is nesting some
other component but it's at least an approach or at least a start.
So on my route div right here I'll add on a class name of video dash item like so it's now over inside
of a video item that says I can target video dash item.
All right.
So inside of here we're going to put in just a little bit of custom CSSA to make sure that the title
right here appears directly centered next to the image and to also make sure that the image is not too
large.
Now we're not going to focus too much on the actual styling that we're doing here because as I've said
many times our focus in this course is react not quite so much the CSA side of things.
So I can't put on a display of flex and I'm going to mark this thing as important.
In general using an important rule is not super heavily advised but this is one case where again not
super heavily worried about the CSSA here.
I just want to get something that looks reasonable.
So then after that I'll do a line items center also with important.
And then I'll do a cursor of pointer and you'll see why we're putting that on.
And just a second.
Then after that I'll do a video dash item and I'm going to select the image that we are rendering inside
of that component.
And I'm going to give it a max width of one hundred and eighty pixels.
So let's just get to make sure that the image doesn't appear too large.
All right so if I now flip back over it appears that the text is correctly centered on the screen.
And if I zoom out 200 percent I don't think that the image style was picked up correctly we might have
to work on the selector we're using for that rule right there.
Yeah I don't see any.
Oh you know what do I put.
Now I got video dash item.
You only have to put on here is video dash item item like so let's try that out and I'll do a save.
OK.
That's much better.
So the reason that was not initially working was that there was probably some other style.
OK here it is right here.
There's some other rule there was setting a max with property with a higher importance than the one
that we were trying to assign.
So by adding on a more specific selector right.
Of item.
Our rule was made more specific than the default one.
And so our silent kicked in for the max width of the image.
OK.
So in total a little bit of styling craziness here but I think that we've now got a list that looks
pretty darn good.
So let's take another quick pause here and we'll continue in the next section.