00:00:10.240 --> 00:00:12.970 All right, here's a quick video on.
00:00:13.940 --> 00:00:18.489 Styling in stuff and these going to briefly cover each of these
00:00:18.489 --> 00:00:21.260 few topics here I've got on my screen.
00:00:22.100 --> 00:00:30.370 Umm, I'm working in PEN which is 2023.1.
00:00:30.880 --> 00:00:35.142 So this is a react version, the latest version of react, the
00:00:35.142 --> 00:00:35.840 front end.
00:00:37.730 --> 00:00:40.623 Hopefully this will be brief enough that people will feel
00:00:40.623 --> 00:00:41.620 like referencing it.
00:00:41.830 --> 00:00:48.606 So first of all, the file architecture, all of the staff,
00:00:48.606 --> 00:00:56.083 why shouldn't say all but by and large, most of the SAS percept
00:00:56.083 --> 00:01:03.676 lives inside of uh S 07 portals, storefront, react source, Meta,
00:01:03.676 --> 00:01:09.400 Fiesta, and it all really join in clarity to SS.
00:01:09.440 --> 00:01:13.903 So this is essentially where all other files get imported into
00:01:13.903 --> 00:01:18.365 and then everything in here gets compiled down eventually into
00:01:18.365 --> 00:01:22.190 clarity dot CSS, which is what goes into the browser.
00:01:22.890 --> 00:01:23.290 Umm.
00:01:24.010 --> 00:01:27.372 So inside of, there really quickly would discover so at the
00:01:27.372 --> 00:01:30.342 top level you've got some bootstrap, you've got your
00:01:30.342 --> 00:01:33.648 bootstrap overrides which are really important when you're
00:01:33.648 --> 00:01:34.600 importing markup.
00:01:34.670 --> 00:01:37.410 You've got some custom DNN stuff.
00:01:38.080 --> 00:01:41.481 Umm, I don't know how much of this is actually still relevant,
00:01:41.481 --> 00:01:42.830 but no one touched it in.
00:01:42.840 --> 00:01:45.810 DNN keeps working, so probably a good idea to leave it all alone.
00:01:46.650 --> 00:01:50.874 Uh, and then next to that, you've got a couple folders
00:01:50.874 --> 00:01:55.712 components and third party third party is basically just kendo
00:01:55.712 --> 00:02:00.780 umm and then components is where the bulk of the out of box stuff
00:02:00.780 --> 00:02:01.240 lives.
00:02:01.810 --> 00:02:04.982 So as you can see, it's mostly divided by the various types of
00:02:04.982 --> 00:02:06.290 components on the website.
00:02:06.830 --> 00:02:09.120 Umm, so there's here.
00:02:09.130 --> 00:02:09.450 Cars.
00:02:09.670 --> 00:02:12.120 Uh, it's specific to brand admin.
00:02:13.030 --> 00:02:17.985 I guess the the parents detainer but buttons, carousels, catalog,
00:02:17.985 --> 00:02:18.660 whatever.
00:02:18.750 --> 00:02:23.314 So if you're editing a specific component that it's in here, you
00:02:23.314 --> 00:02:25.490 should edit one of these files.
00:02:25.500 --> 00:02:29.699 If you're working core or core, you should edit the equivalent
00:02:29.699 --> 00:02:33.964 file in the override so you go to rack skins, whatever the name
00:02:33.964 --> 00:02:37.896 of the project is, growing source meta and then see if the
00:02:37.896 --> 00:02:41.895 components and then put your overrides in here if if any of
00:02:41.895 --> 00:02:45.893 these folders don't exist, obviously feel free to just make
00:02:45.893 --> 00:02:49.892 the folder and then make the file and when you're making an
00:02:49.892 --> 00:02:53.691 override, that's a great idea that pretty much darn your
00:02:53.691 --> 00:02:54.290 required.
00:02:55.000 --> 00:02:59.606 You should copy the original, so I'd copy button and then you
00:02:59.606 --> 00:03:03.840 should paste it into the override so that you don't lose
00:03:03.840 --> 00:03:05.920 the styling we already have.
00:03:07.140 --> 00:03:10.134 Because let's say I go in here and I copy like catalog which
00:03:10.134 --> 00:03:11.360 has quite a bit of stuff.
00:03:12.050 --> 00:03:15.253 Uh, let's say that I just make an override for catalog, but I
00:03:15.253 --> 00:03:18.146 don't copy the file and I just have a blank file in the
00:03:18.146 --> 00:03:18.610 override.
00:03:19.000 --> 00:03:23.194 Then none of this stuff would be in the set CSS output because
00:03:23.194 --> 00:03:25.990 the build just looks for the files there.
00:03:26.000 --> 00:03:29.716 It doesn't look for what the content in the file is, so
00:03:29.716 --> 00:03:33.564 that's just a heads up when you're making overrides, make
00:03:33.564 --> 00:03:37.546 sure that you're copying from the original into the skin so
00:03:37.546 --> 00:03:40.664 that briefly the file architecture is not very
00:03:40.664 --> 00:03:44.910 complicated when you're making new components, you should just.
00:03:45.630 --> 00:03:50.351 Generally speaking, they can you file in here and put your filing
00:03:50.351 --> 00:03:50.780 there.
00:03:51.500 --> 00:03:53.590 Uh, so Brian markup.
00:03:53.600 --> 00:03:55.730 There's articles on this, there's videos on this.
00:03:56.500 --> 00:04:03.891 This is pretty decent article on NUCLEO, but essentially you're
00:04:03.891 --> 00:04:11.050 going to bring in right all the staff from the markup folder.
00:04:11.060 --> 00:04:13.250 Usually there's markup and they provide us with folder.
00:04:13.440 --> 00:04:17.515 You might have to look in their different teams do differently,
00:04:17.515 --> 00:04:21.462 but in here we bring in source styles and then all this stuff
00:04:21.462 --> 00:04:24.390 would have come in umm minus their bootstrap.
00:04:24.400 --> 00:04:27.290 We don't want to bring in their version of bootstrap because
00:04:27.290 --> 00:04:30.322 sometimes the markup team edits bootstrap directly and that can
00:04:30.322 --> 00:04:32.500 create an absolute hellish nightmare for you.
00:04:33.160 --> 00:04:33.720 Uh.
00:04:33.760 --> 00:04:36.683 Later on, when you're having two versions of Bootstrap that are
00:04:36.683 --> 00:04:37.870 competing with each other.
00:04:38.480 --> 00:04:41.847 Umm, but generally all the stuff in here, so largely the
00:04:41.847 --> 00:04:44.150 components all this looks very custom.
00:04:44.400 --> 00:04:49.378 You bring all of this in and you can put it into the skin and
00:04:49.378 --> 00:04:54.035 then you have so ten source meta CSS and then I generally
00:04:54.035 --> 00:04:58.210 different people have different ways of doing this.
00:04:58.220 --> 00:05:01.695 I generally do a new folder in CSS called markup and then
00:05:01.695 --> 00:05:04.930 everything in the markup folder just goes from there.
00:05:06.120 --> 00:05:10.009 With like I said, with the exception is restart stuff so
00:05:10.009 --> 00:05:14.239 and then you can just override clarity dot SCSS which is just
00:05:14.239 --> 00:05:16.080 inside of source media CSS.
00:05:17.080 --> 00:05:22.118 Uh, right here, so you can override that and then you add
00:05:22.118 --> 00:05:24.810 your new import for the markup.
00:05:24.900 --> 00:05:27.720 So you might do like at import markup.
00:05:30.240 --> 00:05:34.344 Flash and then whatever is there, their stuff is from
00:05:34.344 --> 00:05:34.800 there.
00:05:35.600 --> 00:05:39.140 Umm, bringing that their boots up variables is a little more
00:05:39.140 --> 00:05:42.040 complicated, but there's two ways to go about it.
00:05:42.050 --> 00:05:45.493 Generally speaking, you can either merge them into an,
00:05:45.493 --> 00:05:48.998 override the bootstrap variables, or if you really know
00:05:48.998 --> 00:05:52.503 what you're doing, careful, you can just bring in there
00:05:52.503 --> 00:05:56.133 variables file, bring in their overwrites first, and then
00:05:56.133 --> 00:06:00.139 default flag all of ours so that the arrow only set if the mark
00:06:00.139 --> 00:06:01.390 of teams aren't set.
00:06:02.270 --> 00:06:02.810 Umm.
00:06:03.370 --> 00:06:06.247 And then you can, you know, make sure you bring them in the right
00:06:06.247 --> 00:06:08.120 order and clarity, and that can also work.
00:06:08.710 --> 00:06:12.253 I'm a fan of the merge way because I think it's easier to
00:06:12.253 --> 00:06:16.040 have all the overrides in one place, but it does take longer.
00:06:16.190 --> 00:06:20.699 So uh might be based on the project you have and how much
00:06:20.699 --> 00:06:22.720 time you have that market.
00:06:22.730 --> 00:06:26.604 Briefly, one thing that a lot of newer devs traveled with is how
00:06:26.604 --> 00:06:30.180 to find a component you're trying to style and then finding
00:06:30.180 --> 00:06:31.610 styling deploying to it.
00:06:31.670 --> 00:06:37.470 So I'm just gonna load up in here real quick.
00:06:38.470 --> 00:06:38.770 Uh.
00:06:38.910 --> 00:06:43.180 And let's say that you know these buttons right here, right
00:06:43.180 --> 00:06:47.520 now, the active one is orange, which is the primary color on
00:06:47.520 --> 00:06:48.160 the side.
00:06:48.250 --> 00:06:51.670 But let's say that they want these to be the blue color,
00:06:51.670 --> 00:06:53.530 which is secondary on the site.
00:06:53.900 --> 00:06:57.295 So how do you go find these buttons and then how do you know
00:06:57.295 --> 00:06:58.630 what's making them blue?
00:06:58.640 --> 00:07:00.050 Orange, umm.
00:07:00.460 --> 00:07:04.403 The first thing you would do, probably pretty intuitively, is
00:07:04.403 --> 00:07:08.472 he would open the dev tools and you would just look for hey, is
00:07:08.472 --> 00:07:12.159 there anything that's like a unique ID in here that would
00:07:12.159 --> 00:07:14.130 tell me where this stuff lives?
00:07:15.020 --> 00:07:19.758 Umm, ideas are pretty reliable for finding any unique thing,
00:07:19.758 --> 00:07:24.340 because most of the time I do the unique on the page, they
00:07:24.340 --> 00:07:25.660 always should be.
00:07:25.670 --> 00:07:29.573 But sometimes there's like shipments are sharing the mid or
00:07:29.573 --> 00:07:32.240 civil IDs that exist on different pages.
00:07:33.180 --> 00:07:36.076 Umm, but that really shouldn't happen then your your ideas
00:07:36.076 --> 00:07:39.070 should be unique enough that you shouldn't worry about that.
00:07:39.080 --> 00:07:40.150 So here I looked.
00:07:40.160 --> 00:07:40.540 There's no.
00:07:41.890 --> 00:07:46.000 Umm, there's no ID to go off of here.
00:07:46.430 --> 00:07:49.888 So then the next thing that I would look for, there's kind of
00:07:49.888 --> 00:07:51.560 two different approaches here.
00:07:52.070 --> 00:07:56.165 You could either look for when you think might be a unique
00:07:56.165 --> 00:08:00.190 combination of classes, or you can look for unique class.
00:08:00.250 --> 00:08:05.040 So uh, for instance, pagination box.
00:08:05.350 --> 00:08:08.972 It's probably not in very many places, so if I was looking for
00:08:08.972 --> 00:08:11.960 this pagination box, umm, you know going down here?
00:08:14.170 --> 00:08:18.126 Copy the class name from the browser global search liquor
00:08:18.126 --> 00:08:20.240 pagination box and there it is.
00:08:20.280 --> 00:08:23.693 So I've only got 2 results, one in bid, which I don't care
00:08:23.693 --> 00:08:24.040 about.
00:08:24.110 --> 00:08:25.270 So then I'm building 1 result.
00:08:25.280 --> 00:08:26.040 So now I know.
00:08:26.530 --> 00:08:30.564 Hey, that container right there is this dip and you can see it
00:08:30.564 --> 00:08:33.060 has the calendar class which confirms.
00:08:33.070 --> 00:08:33.720 That's right.
00:08:34.090 --> 00:08:35.040 I look closer.
00:08:35.390 --> 00:08:38.849 You can see tech center and empty four and here we have text
00:08:38.849 --> 00:08:41.400 center MP4, so that's one good way to do it.
00:08:42.380 --> 00:08:46.594 Now, if you don't have a unique class and you don't have a
00:08:46.594 --> 00:08:51.236 unique ID, then the next way you can look is uh, I guess there's
00:08:51.236 --> 00:08:55.020 a couple 2 two more ways I can think of off the top.
00:08:55.030 --> 00:08:58.418 My head one would be looking for getting styling, so for
00:08:58.418 --> 00:09:02.221 instance, especially if there's something unique every day like
00:09:02.221 --> 00:09:05.728 a transform, you might be able to look for like transform,
00:09:05.728 --> 00:09:08.580 translate X or something with specific degrees.
00:09:08.850 --> 00:09:11.821 Well, at least the translate access is going to be somewhere
00:09:11.821 --> 00:09:14.450 there specifically in at the style tag is on the dev.
00:09:14.710 --> 00:09:19.140 You know that someone put this directly into the JSX, right?
00:09:19.150 --> 00:09:19.600 They did this.
00:09:20.590 --> 00:09:24.263 It's not coming from CSS because CSS doesn't apply to elements
00:09:24.263 --> 00:09:25.720 with the style attribute.
00:09:25.770 --> 00:09:29.662 You have to type out the style attribute on the if you're
00:09:29.662 --> 00:09:32.680 working on so that's another way to find it.
00:09:33.080 --> 00:09:36.983 And then the last way Goodwin find it is you can just use the
00:09:36.983 --> 00:09:37.990 react dev tools.
00:09:38.830 --> 00:09:42.663 What 4 components like Components tab, reactive tools
00:09:42.663 --> 00:09:46.780 come with two components and profiler umm and here we can
00:09:46.780 --> 00:09:49.690 actually use this little react selector.
00:09:50.610 --> 00:09:54.992 I can scroll up to the thing I'm looking for and here I see three
00:09:54.992 --> 00:09:58.310 buttons and here I can see catalog format switch.
00:09:58.320 --> 00:10:03.037 It's the the most unique name there and that is the name of
00:10:03.037 --> 00:10:06.810 the component and then stuff without exception.
00:10:06.870 --> 00:10:12.208 I believe as of 2023.1 all files have a name that matches the
00:10:12.208 --> 00:10:14.360 component that's in them.
00:10:14.630 --> 00:10:18.805 So if I go back to the code, hit control P, enter catalog format
00:10:18.805 --> 00:10:22.530 catalog format switch, hit enter and here's my component.
00:10:23.270 --> 00:10:23.730 Umm.
00:10:24.170 --> 00:10:26.620 And here's my here's here's everything.
00:10:26.730 --> 00:10:30.400 So there's the form group form label input group.
00:10:30.440 --> 00:10:33.250 If we go back here, here's the normal inspector.
00:10:34.500 --> 00:10:40.947 We can see form label input Group 3 buttons formally able
00:10:40.947 --> 00:10:44.170 infogroup and format options.
00:10:44.180 --> 00:10:45.990 If you look up here, there's only three of them.
00:10:46.380 --> 00:10:50.500 They each have the names grid table with, so that's also
00:10:50.500 --> 00:10:55.053 another way pretty much failed way of finding the thing you're
00:10:55.053 --> 00:10:55.920 looking for.
00:10:57.350 --> 00:11:00.675 Now, how do we know what making it orange and then how do we
00:11:00.675 --> 00:11:02.310 know how to change it to blue?
00:11:03.200 --> 00:11:05.678 Uh, let's figure brand new this after your brand new to
00:11:05.678 --> 00:11:06.960 bootstrap and you don't know.
00:11:06.970 --> 00:11:08.390 You know, we're not familiar with anything.
00:11:08.600 --> 00:11:11.602 So the first thing you would probably want to look at is how
00:11:11.602 --> 00:11:14.555 is this button the styling different from the other two and
00:11:14.555 --> 00:11:17.310 the most obvious thing would be the class thing, right?
00:11:17.440 --> 00:11:18.590 This has brown in button.
00:11:18.600 --> 00:11:21.783 Things have rounded button, but this one has button outlined
00:11:21.783 --> 00:11:22.930 primary and you don't.
00:11:23.420 --> 00:11:27.730 So then you think, well, what if I remove that class?
00:11:28.450 --> 00:11:30.881 So in the dev tools a lot of people don't know this,
00:11:30.881 --> 00:11:32.210 especially when starting out.
00:11:33.160 --> 00:11:35.070 There's a lot of really handy things for filing.
00:11:35.360 --> 00:11:38.310 One of the handy things is this dot CLS up here.
00:11:38.700 --> 00:11:41.468 If you click it, you can toggle the classes on the element
00:11:41.468 --> 00:11:42.500 you're selecting with.
00:11:42.510 --> 00:11:47.016 These cool little convenient checkboxes and here you can see
00:11:47.016 --> 00:11:51.595 that if I toggle button that one primary, this one just looks
00:11:51.595 --> 00:11:54.770 like I don't and have a toggle it back on.
00:11:55.360 --> 00:11:56.610 That's what makes it orange.
00:11:57.160 --> 00:12:00.880 So then now I know which class it is now.
00:12:00.890 --> 00:12:02.420 How do I know why it's orange?
00:12:02.510 --> 00:12:05.719 Well, aside from just looking at the general site and see what
00:12:05.719 --> 00:12:08.724 the general colors are, and knowing that you know the most
00:12:08.724 --> 00:12:10.710 common colors, probably primary color.
00:12:11.000 --> 00:12:14.102 Second most common color is probably the secondary color and
00:12:14.102 --> 00:12:14.610 the names.
00:12:15.290 --> 00:12:17.730 You could also just look here in the dev tools and Scroll down.
00:12:17.740 --> 00:12:22.994 Look for color, border color, background color and here we see
00:12:22.994 --> 00:12:27.580 it has a color of F7125 with a button now and primary.
00:12:27.730 --> 00:12:29.340 So now we know that's causing it.
00:12:30.010 --> 00:12:31.180 Now, what if I want to make it blue?
00:12:31.190 --> 00:12:32.860 How do I know what's making this blue?
00:12:32.930 --> 00:12:35.290 Well, we could just inspect it, right?
00:12:36.270 --> 00:12:36.960 Come over here.
00:12:36.970 --> 00:12:37.680 We look the NAV bar.
00:12:38.710 --> 00:12:43.116 Umm notice that I'm hovering over this, but more than this is
00:12:43.116 --> 00:12:44.750 blue to the background.
00:12:44.760 --> 00:12:47.130 Color is probably not on this right.
00:12:47.140 --> 00:12:49.740 It's probably somewhere else, so we can go up.
00:12:50.780 --> 00:12:54.504 Keep going up until we're we know we're wide enough that
00:12:54.504 --> 00:12:56.920 we're, uh, covering the whole thing.
00:12:57.470 --> 00:13:01.100 The call 12 covers the whole with the container does not and
00:13:01.100 --> 00:13:03.480 then header box covers the whole width.
00:13:04.240 --> 00:13:05.230 Well, here we have BG.
00:13:05.240 --> 00:13:10.078 Secondary doesn't take very long with bootstrapped and you know
00:13:10.078 --> 00:13:14.160 learning about it didn't learn the bee is background.
00:13:14.980 --> 00:13:18.517 Secondary would be referring to the variable or the variant
00:13:18.517 --> 00:13:18.870 Tyler.
00:13:18.940 --> 00:13:21.080 If I remove it, we see that the blue goes away.
00:13:22.060 --> 00:13:25.647 If I apply it, we see that it's the blue color I want, so
00:13:25.647 --> 00:13:28.800 secondary would be the variant of this blue color.
00:13:29.770 --> 00:13:31.060 And then I can go back over here.
00:13:31.070 --> 00:13:34.545 And before I go edit in the code, I'm just going to edit in
00:13:34.545 --> 00:13:36.340 the browser to see if it works.
00:13:36.850 --> 00:13:41.879 So here I'm going to put buttons outline secondary and now I can
00:13:41.879 --> 00:13:45.050 see hey that blue now instead of orange.
00:13:45.090 --> 00:13:49.892 OK, I want to blue and now I go edit it over here and I change
00:13:49.892 --> 00:13:54.236 this to secondary instead of on the button which sees is
00:13:54.236 --> 00:13:58.885 conditional instead of going over here, failing this, hoping
00:13:58.885 --> 00:14:03.610 it's right and then refreshing the browser and then when it's
00:14:03.610 --> 00:14:08.259 wrong I have to go keep loading the code over and over again
00:14:08.259 --> 00:14:12.527 because I'm editing the file here and then checking the
00:14:12.527 --> 00:14:14.660 browser when you're styling.
00:14:14.740 --> 00:14:15.540 Don't do that.
00:14:15.960 --> 00:14:19.250 First, you have these exact style you want in the browser.
00:14:19.320 --> 00:14:22.713 Then just top into classes over and paste them in the code where
00:14:22.713 --> 00:14:23.130 they go.
00:14:23.340 --> 00:14:24.950 Then save and then see if it worked.
00:14:25.940 --> 00:14:29.531 It's a much faster, much more efficient way so anyway, so that
00:14:29.531 --> 00:14:32.552 covers how to find the component, how to narrow down
00:14:32.552 --> 00:14:36.143 what's applying the orange, how to find a color from somewhere
00:14:36.143 --> 00:14:39.506 else to figure out what giving any elements that any given
00:14:39.506 --> 00:14:40.360 color you want.
00:14:41.110 --> 00:14:41.750 Umm.
00:14:42.010 --> 00:14:44.930 And then you know, you can try the class here.
00:14:45.710 --> 00:14:47.960 Umm, back cover that bullet points.
00:14:49.010 --> 00:14:50.170 Hopefully that will help somebody.
00:14:51.050 --> 00:14:53.280 Uh, using bootstrap again.
00:14:53.290 --> 00:14:55.000 Not gonna go over this, too, too.
00:14:55.630 --> 00:15:00.627 Too far for too long, but generally I mean if you want to
00:15:00.627 --> 00:15:06.053 learn about bootstrap, the best way to learn the documentation
00:15:06.053 --> 00:15:11.566 you can go to chat GPT and say you know how does bootstrap work
00:15:11.566 --> 00:15:15.270 or what are, what are the most common? Uh.
00:15:17.690 --> 00:15:21.580 YouTube of bootstrap right?
00:15:21.640 --> 00:15:22.670 And then it'll just tell you.
00:15:22.680 --> 00:15:22.990 Hey.
00:15:23.000 --> 00:15:26.393 Well, it's popular funded framework to provide question
00:15:26.393 --> 00:15:30.089 premium components helps with responsive web design offers a
00:15:30.089 --> 00:15:32.270 wide range of Qi components, right?
00:15:32.280 --> 00:15:34.673 And then you can dig in here with more questions if you want
00:15:34.673 --> 00:15:34.790 to.
00:15:35.930 --> 00:15:41.520 That's good to learn about the Trump and then how do you know?
00:15:41.970 --> 00:15:44.366 You know, once once you learn, it's easier to know what classes
00:15:44.366 --> 00:15:44.740 you apply.
00:15:47.610 --> 00:15:52.360 Generally bootstrap is made up of rows and columns.
00:15:52.410 --> 00:15:54.938 So if we look at the the grid here in the catalog, it's
00:15:54.938 --> 00:15:55.660 perfect example.
00:15:56.130 --> 00:16:00.324 So all these are in the same row and we have all these different
00:16:00.324 --> 00:16:00.840 columns.
00:16:01.130 --> 00:16:03.230 Every row is made up of 12 columns.
00:16:03.490 --> 00:16:07.486 It's just that something's span more than one of the 12, so each
00:16:07.486 --> 00:16:10.190 of these are expanding, which is like here.
00:16:11.700 --> 00:16:14.530 While these are just generic, OK, that's not a great example.
00:16:14.540 --> 00:16:20.603 These just have to call class, but generally you're going to
00:16:20.603 --> 00:16:26.765 find that if we go I guess to the parent here, uh, we can see
00:16:26.765 --> 00:16:30.640 that this has, you know column PK two.
00:16:31.680 --> 00:16:36.519 So this is 2 twelfths of this entire row, and then of course
00:16:36.519 --> 00:16:39.850 the other half of it is the Ten 2 + 1012.
00:16:40.540 --> 00:16:43.620 So that explains, you know, gives a simple example of the
00:16:43.620 --> 00:16:45.690 columns and rows system and bootstrap.
00:16:45.940 --> 00:16:50.508 You can read documentation if you really want to know more,
00:16:50.508 --> 00:16:55.379 but UM generally it just comes with a host of classes that make
00:16:55.379 --> 00:16:59.870 layout responsive design and styling a lot easier for you.
00:17:00.620 --> 00:17:04.539 Umm, whether that's starting text or backgrounds or grids or
00:17:04.539 --> 00:17:07.750 making things rounded or whatever you want to do.
00:17:08.380 --> 00:17:08.830 Umm.
00:17:09.340 --> 00:17:11.470 Now let's say you want to add a new bootstrap stuff class.
00:17:11.480 --> 00:17:15.074 So this is something I really like doing, because once in a
00:17:15.074 --> 00:17:18.727 while you find you know, you think of a you think of an idea
00:17:18.727 --> 00:17:22.200 on a project that you're like, well, wouldn't it be cool?
00:17:22.210 --> 00:17:26.667 It's like that was dynamic enough to just do that, like
00:17:26.667 --> 00:17:27.940 whenever I want.
00:17:28.050 --> 00:17:32.721 So an example would be I had a project where I wanted to change
00:17:32.721 --> 00:17:37.173 the placeholder to a different color in an input, and then I
00:17:37.173 --> 00:17:41.697 thought you know, wouldn't be cool if you could just make the
00:17:41.697 --> 00:17:44.470 placeholder the color of any variant.
00:17:45.250 --> 00:17:46.340 So that's what this does.
00:17:46.410 --> 00:17:49.056 And if you want to know what scene color is, you can just go
00:17:49.056 --> 00:17:50.270 look at bootstrap variables.
00:17:51.440 --> 00:17:51.860 Umm.
00:17:52.820 --> 00:17:53.900 And it would tell you.
00:17:56.990 --> 00:18:02.300 So if I go in here like protein colors, here we see this is what
00:18:02.300 --> 00:18:02.790 it is.
00:18:02.840 --> 00:18:03.970 I'll put this on the side.
00:18:05.290 --> 00:18:08.799 So the right side has all the different variants, so primary,
00:18:08.799 --> 00:18:10.440 secondary, success and so on.
00:18:10.990 --> 00:18:12.940 So sorry, I said right side.
00:18:13.030 --> 00:18:15.800 Left side has the variance, right side has the actual value.
00:18:15.810 --> 00:18:19.589 So, like, what's the actual value of primary, which would be
00:18:19.589 --> 00:18:21.570 a color, umm value of secondary.
00:18:21.900 --> 00:18:25.935 So pound something, something something, but that wouldn't be
00:18:25.935 --> 00:18:26.260 cool.
00:18:26.270 --> 00:18:30.246 If you can have a placeholder of any of those Barry, regardless
00:18:30.246 --> 00:18:31.860 of anything else going on.
00:18:32.130 --> 00:18:33.760 So I just looked through it.
00:18:34.290 --> 00:18:39.377 I added it to helpers SCSS and now let's say that I want to
00:18:39.377 --> 00:18:39.800 have.
00:18:39.870 --> 00:18:40.780 Let's see how did I build?
00:18:40.790 --> 00:18:41.800 It's a placeholder.
00:18:41.810 --> 00:18:42.240 Dash.
00:18:43.580 --> 00:18:48.636 So let's say I want this to have an orange placeholder
00:18:48.636 --> 00:18:52.680 placeholder, dash primary and well figures.
00:18:52.690 --> 00:18:53.660 It's not working right now.
00:18:53.670 --> 00:18:55.830 Probably something is or it is primary.
00:18:55.840 --> 00:18:56.480 Yeah, is working.
00:18:56.490 --> 00:19:01.660 So danger now it's red secondary doesn't want to do that one.
00:19:01.670 --> 00:19:05.062 It's only working for some of them, but there you can see dark
00:19:05.062 --> 00:19:06.300 and danger are working.
00:19:06.860 --> 00:19:09.530 I'm not sure why it's working not working for the other ones.
00:19:11.350 --> 00:19:15.791 Probably fighting some styling somewhere else, but there you
00:19:15.791 --> 00:19:20.231 see light works meeting work so so if you wanna add your own
00:19:20.231 --> 00:19:24.743 dynamic bootstrap style class one way good way to do it is to
00:19:24.743 --> 00:19:29.329 create a loop, loop the theme colors or whatever else you know
00:19:29.329 --> 00:19:33.842 you can loop through breakpoints or anything in here and then
00:19:33.842 --> 00:19:35.370 create a class named.
00:19:35.380 --> 00:19:36.140 It just makes sense.
00:19:36.230 --> 00:19:40.556 And then apply silly and putting it in helper for SS is a great
00:19:40.556 --> 00:19:44.882 place because obviously this is generic enough that it could be
00:19:44.882 --> 00:19:47.450 applied to anything with placeholder.
00:19:48.260 --> 00:19:49.550 Generally that would just be inputs.
00:19:49.560 --> 00:19:52.614 I don't know anything else like I guess text areas would also
00:19:52.614 --> 00:19:53.500 have like folders.
00:19:56.270 --> 00:19:59.861 So there you know, there being argument to move it into, like
00:19:59.861 --> 00:20:01.250 typography or something.
00:20:01.860 --> 00:20:05.710 Uh, but that's how you generally can add your own stuff.
00:20:06.260 --> 00:20:09.370 Of course, if it's only going to apply to buttons you know, put
00:20:09.370 --> 00:20:10.390 it in buttons, right?
00:20:10.850 --> 00:20:12.860 It doesn't have to mean helper just because it's a loop.
00:20:15.220 --> 00:20:18.790 And then that secret segue into the second last point here.
00:20:18.800 --> 00:20:20.570 So where and when to add custom styling?
00:20:20.630 --> 00:20:22.010 So you're working on a project?
00:20:22.730 --> 00:20:26.880 Umm, they got some sort of, you know, like a 10 year.
00:20:27.190 --> 00:20:29.920 So they've got something really content like this, right?
00:20:29.930 --> 00:20:30.940 This isn't out of box.
00:20:31.290 --> 00:20:32.870 This whole tiles thing.
00:20:34.670 --> 00:20:36.740 It's very, very unique to them.
00:20:37.550 --> 00:20:38.190 Umm.
00:20:38.690 --> 00:20:41.488 And you have to write some custom CSS for this and you
00:20:41.488 --> 00:20:43.980 probably wouldn't need to something this simple.
00:20:43.990 --> 00:20:45.120 But let's say it did.
00:20:45.130 --> 00:20:46.800 Let's say you need to write some custom CSS.
00:20:47.190 --> 00:20:49.614 Where do you put it and how do you make sure it's going to
00:20:49.614 --> 00:20:49.860 apply?
00:20:50.430 --> 00:20:55.929 So where you put it is somewhat dependent on how generic you're
00:20:55.929 --> 00:20:56.960 going to be.
00:20:57.570 --> 00:20:58.050 Umm.
00:20:58.390 --> 00:21:00.150 So let's say that we're gonna be really specific.
00:21:00.160 --> 00:21:04.737 We know we're gonna build out a component called like homepage
00:21:04.737 --> 00:21:06.190 categories grid. Uh.
00:21:07.730 --> 00:21:10.669 Or category, grid, alt or something and we know that all
00:21:10.669 --> 00:21:14.072 family we're gonna write is only going to apply to this component
00:21:14.072 --> 00:21:17.165 and the rest of the site will never know about it and never
00:21:17.165 --> 00:21:20.000 needs to share any of the styling gonna apply to this.
00:21:20.820 --> 00:21:21.890 So where do you put it?
00:21:22.700 --> 00:21:24.090 There's two good options.
00:21:24.100 --> 00:21:27.686 I think that one is more favor with most people than the other,
00:21:27.686 --> 00:21:30.150 but I will explain them both in this video.
00:21:30.460 --> 00:21:34.906 So the first option is you create a new file under your
00:21:34.906 --> 00:21:35.620 override.
00:21:35.630 --> 00:21:40.322 So in my case portal, as in Portal storefront reacted skins,
00:21:40.322 --> 00:21:45.167 ten source meta CSS components and then I would just name this
00:21:45.167 --> 00:21:48.550 file whatever the name of the component is.
00:21:48.790 --> 00:21:55.653 So in my case, I think I said home page categories grid that
00:21:55.653 --> 00:21:55.990 OK.
00:21:56.840 --> 00:22:01.515 So and then you put whatever you need to in here goes without
00:22:01.515 --> 00:22:04.380 saying, you know, be specific, right?
00:22:04.420 --> 00:22:06.650 So probably a good idea.
00:22:06.760 --> 00:22:12.595 Put an ID on the container for this whole thing and then target
00:22:12.595 --> 00:22:16.150 that you know home page category grid.
00:22:19.520 --> 00:22:22.347 And then everything else you need to do should be nested
00:22:22.347 --> 00:22:25.421 inside of here so that you're not accidentally changing stuff
00:22:25.421 --> 00:22:26.660 you don't tend to change.
00:22:27.510 --> 00:22:29.100 Umm, so that's one option.
00:22:29.110 --> 00:22:35.420 And then of course in here you can use any SAS syntax like
00:22:35.420 --> 00:22:38.200 normal to and label color.
00:22:39.740 --> 00:22:42.500 Whatever you like, it's like out there.
00:22:42.730 --> 00:22:42.980 OK.
00:22:44.220 --> 00:22:48.610 Like a color here would be white, but I actually did pick
00:22:48.610 --> 00:22:50.880 something so so I do that now.
00:22:50.890 --> 00:22:55.170 Of course, this isn't gonna show up anywhere because we're not
00:22:55.170 --> 00:22:59.313 importing it into and the main file right, right now this is
00:22:59.313 --> 00:23:02.030 the file detached from everything, all.
00:23:02.040 --> 00:23:05.900 It's just in a folder, but it's not actually being built, so to
00:23:05.900 --> 00:23:09.157 get it to build you need to import your new file into
00:23:09.157 --> 00:23:09.940 clarity SCSS.
00:23:10.650 --> 00:23:15.414 Uh, so here I like to keep things nice and organized and
00:23:15.414 --> 00:23:16.500 alphabetical.
00:23:16.970 --> 00:23:21.299 So I have homepage categories grid, so I look in here for
00:23:21.299 --> 00:23:22.120 components.
00:23:22.550 --> 00:23:26.061 Header doesn't look like these are now five order, so I
00:23:26.061 --> 00:23:29.070 typically they were and then they do component.
00:23:31.950 --> 00:23:34.640 And then it'll even give me port.
00:23:35.580 --> 00:23:37.000 Probably that would be that.
00:23:37.710 --> 00:23:40.900 And then semicolon and there we go and now it would start
00:23:40.900 --> 00:23:42.000 compiling that file.
00:23:42.470 --> 00:23:45.572 I'm not actually building component, but if I was it
00:23:45.572 --> 00:23:49.025 should start compiling that file, adding it to the output,
00:23:49.025 --> 00:23:52.771 and then my son will be in there the other way to do it is that
00:23:52.771 --> 00:23:54.760 you'll see occasionally in stuff.
00:23:54.770 --> 00:24:00.931 As of right now, is sometimes you'll see like a dot module dot
00:24:00.931 --> 00:24:07.092 FFS, so model is an example of this because it has complicated
00:24:07.092 --> 00:24:08.950 uh keyframes thing.
00:24:10.180 --> 00:24:14.116 So you can make an file next to the component file you're
00:24:14.116 --> 00:24:14.590 making.
00:24:14.600 --> 00:24:15.970 So here we have model PSX.
00:24:15.980 --> 00:24:19.666 Here's component brightness to it little dot module to SCSS and
00:24:19.666 --> 00:24:23.122 then here you can write all the staff and for your specific
00:24:23.122 --> 00:24:26.635 component and then you just import this file into what looks
00:24:26.635 --> 00:24:30.264 like time being used anymore I guess because we we change this
00:24:30.264 --> 00:24:32.970 over to bootstrap model so it doesn't need it.
00:24:34.590 --> 00:24:41.637 But you would import that file you know import classes from dot
00:24:41.637 --> 00:24:45.490 slash modal dot module dot Exeter.
00:24:45.760 --> 00:24:49.240 If I'm reason TypeScript as of the time of recording, this
00:24:49.240 --> 00:24:53.014 doesn't seem to like importing this even though totally can and
00:24:53.014 --> 00:24:53.780 it does work.
00:24:54.460 --> 00:24:59.183 Umm I I haven't figured out why and I don't know if anyone ever
00:24:59.183 --> 00:25:03.610 will, but classes would just represent every possible class
00:25:03.610 --> 00:25:04.200 in here.
00:25:04.980 --> 00:25:09.570 So I was going to import this and then I want to apply it.
00:25:10.020 --> 00:25:14.680 I could do app added to content class name here.
00:25:17.210 --> 00:25:17.990 And I would do.
00:25:21.370 --> 00:25:24.700 Classes, dot and then whatever the name of the class is.
00:25:24.790 --> 00:25:29.058 So here if I want to see hi I can copy that to see hi and
00:25:29.058 --> 00:25:33.694 what's cool about this is that this class Z high will actually
00:25:33.694 --> 00:25:37.889 get turned into something very like unique uh, when it's
00:25:37.889 --> 00:25:40.390 actually rendered in the browser.
00:25:40.450 --> 00:25:40.970 Cause what?
00:25:41.030 --> 00:25:42.790 Some some magic webpack does.
00:25:43.460 --> 00:25:43.800 Umm.
00:25:44.320 --> 00:25:47.057 So let's say that I wanna really generic class name in here
00:25:47.057 --> 00:25:47.330 right?
00:25:47.340 --> 00:25:51.050 I just want like I don't know dot.
00:25:57.100 --> 00:26:00.110 What comes in BTN right?
00:26:00.530 --> 00:26:05.000 So BPN VPN is a class on bootstrap right?
00:26:05.450 --> 00:26:08.350 And but I want to apply it to all my buttons in here.
00:26:08.420 --> 00:26:11.532 But I don't want to interfere with all the other buttons on
00:26:11.532 --> 00:26:14.695 the site, but I also don't want to change his name because I
00:26:14.695 --> 00:26:15.420 like BTN well.
00:26:15.430 --> 00:26:20.060 What's cool is let's just say I do padding 0.
00:26:20.100 --> 00:26:20.450 Important.
00:26:21.650 --> 00:26:25.290 What's cool is if I go over here and I apply, of course I
00:26:25.290 --> 00:26:28.490 wouldn't do this to a mobile, but classes dot VPN.
00:26:29.860 --> 00:26:35.632 This right here will turn into something like a some hash,
00:26:35.632 --> 00:26:41.404 underscore classes, underscore BTN, underscore like model,
00:26:41.404 --> 00:26:43.360 something like that.
00:26:43.370 --> 00:26:47.196 Something very unique that one exists anywhere else and then
00:26:47.196 --> 00:26:50.770 all the files that are in here will apply as that class.
00:26:51.540 --> 00:26:54.155 So what this means is I can use the BTN class and I don't have
00:26:54.155 --> 00:26:56.770 to worry about interfering with all the other buttons on site.
00:26:57.700 --> 00:27:00.483 Are all the other buttons are using the PSTN Clauss so that is
00:27:00.483 --> 00:27:01.410 kind of a cool thing?
00:27:02.410 --> 00:27:05.452 Umm, about South modules that maybe not a lot of people know,
00:27:05.452 --> 00:27:08.298 but that's another alternative for where you can put your
00:27:08.298 --> 00:27:08.690 styling.
00:27:09.920 --> 00:27:13.355 There's no real preference to clarity as far as I know, or I'm
00:27:13.355 --> 00:27:13.900 concerned.
00:27:14.510 --> 00:27:18.815 Uh, just, you know, trying to put it somewhere that makes
00:27:18.815 --> 00:27:19.260 sense.
00:27:19.270 --> 00:27:24.080 That's easier for easy for other developers to figure out what
00:27:24.080 --> 00:27:28.660 you did, but it's not a cut and dry thing, so there's that.
00:27:28.670 --> 00:27:32.120 And then I think the last one here is styling the browser.
00:27:32.130 --> 00:27:34.427 I kind of briefly covered this, but I'll cover it a little more
00:27:34.427 --> 00:27:34.750 in depth.
00:27:35.420 --> 00:27:38.718 So, but they're telling the browser, umm, we're the biggest
00:27:38.718 --> 00:27:42.181 thing is just knowing what all tools are that are available to
00:27:42.181 --> 00:27:42.400 you.
00:27:42.450 --> 00:27:48.085 So if you go in here that I go pick uh, when everything this
00:27:48.085 --> 00:27:53.812 column here just trivial example and I wanna, you know pretty
00:27:53.812 --> 00:27:56.490 much anything you want to do.
00:27:56.500 --> 00:27:59.110 I mean, you can even create transforms.
00:27:59.120 --> 00:28:00.290 You can create keyframes.
00:28:01.430 --> 00:28:06.128 I don't think you could do it here, but you can just you know
00:28:06.128 --> 00:28:10.674 you can right click this and click edit HTML the experiment
00:28:10.674 --> 00:28:14.917 and then you can just put whatever you want here on the
00:28:14.917 --> 00:28:17.720 fly and it won't get saved anywhere.
00:28:18.130 --> 00:28:22.315 So let's say I just wanna do like a keyframe thing like I can
00:28:22.315 --> 00:28:26.568 just do it right here without without ever writing the code in
00:28:26.568 --> 00:28:27.850 the in the CS code.
00:28:28.590 --> 00:28:29.460 Uh, and saving it?
00:28:29.470 --> 00:28:32.257 Just having to guess if it works I can just edit it right here
00:28:32.257 --> 00:28:34.910 and I can prove that it works before I go to save the file.
00:28:35.250 --> 00:28:36.830 So that's one thing that's really handy.
00:28:38.030 --> 00:28:44.561 You'll also find the Sandy if, let's say you have, uh like you
00:28:44.561 --> 00:28:45.390 want to.
00:28:47.490 --> 00:28:52.171 If something like put both of these in the same container, so
00:28:52.171 --> 00:28:57.154 you can at this additional go to the thing you want to put in the
00:28:57.154 --> 00:29:01.230 container, so the URL and the dev after that I think.
00:29:03.950 --> 00:29:07.510 Like butter and that's it.
00:29:08.250 --> 00:29:11.586 And let's say I want to see what it would be like if I had these
00:29:11.586 --> 00:29:14.460 in their own container before I actually gonna make it.
00:29:14.630 --> 00:29:15.970 Well, I can just add a new dive in here.
00:29:19.730 --> 00:29:24.040 And now my dev actually just exists and then I want to do.
00:29:24.050 --> 00:29:24.590 I don't know.
00:29:24.660 --> 00:29:27.311 This wouldn't look good here, but something like Keflex,
00:29:27.311 --> 00:29:27.590 right?
00:29:27.980 --> 00:29:30.190 Because I want those to be horizontal and vertical.
00:29:30.760 --> 00:29:34.070 Well, I can just do that right now instead of having to put
00:29:34.070 --> 00:29:37.490 this over there and just guess that deflects might look good.
00:29:38.320 --> 00:29:42.010 Umm, so that's another thing you do more stuff you can do.
00:29:42.020 --> 00:29:44.573 You can see what it would be like if you applied any of these
00:29:44.573 --> 00:29:45.190 pseudo classes.
00:29:45.580 --> 00:29:49.467 So like what a little like when someone clicked on it, it looks
00:29:49.467 --> 00:29:53.292 like when someone focused on it will look like when it's being
00:29:53.292 --> 00:29:57.056 hovered, which seems kind of silly now, but let's say we pick
00:29:57.056 --> 00:30:00.882 something like this button with the cover, we can actually see
00:30:00.882 --> 00:30:04.525 what styles are applied when it's hovered without having to
00:30:04.525 --> 00:30:08.290 hover it ourselves, which is really handy because you know, I
00:30:08.290 --> 00:30:10.050 don't even think it shows up.
00:30:11.070 --> 00:30:13.941 You know when you put your mouse over it to hover, styling
00:30:13.941 --> 00:30:16.130 doesn't show up here, so that's really cool.
00:30:16.190 --> 00:30:17.080 So these are really handy.
00:30:17.390 --> 00:30:18.650 You see, as much as you can.
00:30:19.930 --> 00:30:21.900 And then dot feel that this is the most common thing.
00:30:21.910 --> 00:30:27.155 I use this like every day if we want to see what additional
00:30:27.155 --> 00:30:29.340 classes would do or what.
00:30:29.350 --> 00:30:33.259 Removing some of the classes would do you know you can just
00:30:33.259 --> 00:30:34.170 see all of it.
00:30:34.300 --> 00:30:37.007 I mean, so that's what this the button would look like with no
00:30:37.007 --> 00:30:37.350 styling.
00:30:38.140 --> 00:30:39.930 Umm, that's just plain old.
00:30:41.170 --> 00:30:44.322 Whatever the browser wants to do so probably needs is really
00:30:44.322 --> 00:30:44.580 cool.
00:30:44.790 --> 00:30:46.180 You can add more here.
00:30:46.240 --> 00:30:50.720 So if I wanna do like Inc primary I can do it.
00:30:50.850 --> 00:30:52.090 I wanna do big.
00:30:53.040 --> 00:30:55.817 I can do it and then I can know what they look like before I
00:30:55.817 --> 00:30:57.000 actually edits by onto it.
00:30:57.320 --> 00:30:58.460 So there's one more in here.
00:30:58.470 --> 00:30:59.730 You can even add a.
00:31:00.690 --> 00:31:03.620 You can get a quick selector for the element you're on.
00:31:03.630 --> 00:31:07.686 Here I've click the plus button and it gave me button uh with ID
00:31:07.686 --> 00:31:09.870 and then put in the ID right away.
00:31:09.980 --> 00:31:13.488 So if I'm creating a new SAP file like I mentioned and I
00:31:13.488 --> 00:31:17.364 wanna target within ID, if you don't feel like typing out your
00:31:17.364 --> 00:31:20.932 ID for some reason because you're lazy, you're already in
00:31:20.932 --> 00:31:22.470 here, you can just click.
00:31:22.480 --> 00:31:26.040 Plus, umm, there's even more in here.
00:31:26.050 --> 00:31:29.438 I don't know what it does, but the last thing I'll cover here
00:31:29.438 --> 00:31:32.060 really styling is, uh, the pool computer thing.
00:31:32.130 --> 00:31:36.546 So this will show you what all the values actually computed out
00:31:36.546 --> 00:31:36.960 to be.
00:31:37.120 --> 00:31:40.867 So for instance, background color is primary, but this will
00:31:40.867 --> 00:31:44.863 tell me what primary actually is in RGB, UMM and then you click
00:31:44.863 --> 00:31:48.422 on it a little arrow and it actually tell you where it's
00:31:48.422 --> 00:31:49.670 coming from as well.
00:31:50.160 --> 00:31:51.910 So computer is super helpful.
00:31:52.040 --> 00:31:53.690 Let's say you're adding is 1 R.E.M.
00:31:54.040 --> 00:31:56.688 Well, here it will actually tell you what the pixels of the
00:31:56.688 --> 00:31:57.570 padding actually is.
00:31:57.580 --> 00:32:00.310 So 28 pixels, 20 pixels and so on.
00:32:00.680 --> 00:32:03.242 It will tell you what borders you've got, what margin you've
00:32:03.242 --> 00:32:03.410 got.
00:32:03.460 --> 00:32:05.639 I don't think it mentions outlined anywhere because
00:32:05.639 --> 00:32:06.770 outline is kind of its own.
00:32:06.860 --> 00:32:07.440 Weird.
00:32:07.920 --> 00:32:12.134 Absolutely positioned thing and then it'll tell you even like
00:32:12.134 --> 00:32:14.920 what font families are applying to this.
00:32:15.410 --> 00:32:17.210 I think you might even be able to edit.
00:32:17.220 --> 00:32:18.360 You can't edit them on the fly.
00:32:18.410 --> 00:32:20.050 OK, but you can't at least see them.
00:32:20.810 --> 00:32:22.800 Umm so I use that all the time.
00:32:22.810 --> 00:32:25.260 That's a really handy thing to get used to.
00:32:25.350 --> 00:32:26.000 You're familiar with.
00:32:26.010 --> 00:32:29.659 If you're not used to it already, and then there's a lot
00:32:29.659 --> 00:32:33.756 more stuff in here, I don't tend to use most of this stuff, but
00:32:33.756 --> 00:32:37.725 it does exist and you can you can play around with it and see
00:32:37.725 --> 00:32:41.630 what more there might be, but they'll show you all the event
00:32:41.630 --> 00:32:43.550 listeners show you properties.
00:32:43.630 --> 00:32:46.794 So I guess properties of this actual element so I could see
00:32:46.794 --> 00:32:48.850 like what's actually in the flat list.
00:32:49.320 --> 00:32:52.444 So you don't really care about this in react, but if you were
00:32:52.444 --> 00:32:55.366 using jQuery or something, you might want to actually see
00:32:55.366 --> 00:32:58.540 what's straight up actually at the lowest level of the browser
00:32:58.540 --> 00:32:59.950 can tell us what's in there.
00:33:00.040 --> 00:33:02.520 So really cool stuff.
00:33:02.530 --> 00:33:05.492 Most of the stuff you'd want to use for day-to-day clarity would
00:33:05.492 --> 00:33:06.540 be styles and computed.
00:33:06.750 --> 00:33:08.730 So would be they go on course.
00:33:08.740 --> 00:33:12.164 There's all the other tabs which this video isn't about, just
00:33:12.164 --> 00:33:15.533 we're just doing our styling so that I think that's a pretty
00:33:15.533 --> 00:33:16.140 good click.
00:33:16.150 --> 00:33:17.840 Intro to styling clarity.
00:33:17.890 --> 00:33:19.590 I hope that you found the temple.