1
00:00:07,640 --> 00:00:08,900
Welcome back.

2
00:00:08,930 --> 00:00:13,670
In this video, let me give you overview of taming CSIS.

3
00:00:14,060 --> 00:00:14,570
TV.

4
00:00:14,570 --> 00:00:17,000
CSIS is like bootstrap.

5
00:00:17,030 --> 00:00:25,430
They have a built in class names that we can use right away without worrying about writing our custom

6
00:00:25,460 --> 00:00:26,330
CSIS.

7
00:00:26,960 --> 00:00:31,520
Personally, I prefer to use in case of a bootstrap.

8
00:00:31,550 --> 00:00:38,900
One is that for bootstrap, the customization is not all that easy, but for having success.

9
00:00:38,900 --> 00:00:47,540
It is easy to customize CSS inside having CSS and for bootstrap any application that has been built

10
00:00:47,540 --> 00:00:53,870
using bootstrap, you can see that, well, this particular application was built using bootstrap,

11
00:00:53,880 --> 00:01:01,100
but for table access, you can see though by the few and it looks for me it looks better than using

12
00:01:01,100 --> 00:01:03,910
bootstrap, but a choice is yours.

13
00:01:03,920 --> 00:01:11,480
So for this one you can choose to use bootstrap or BOMA or any CSS framework, but for this we are going

14
00:01:11,480 --> 00:01:17,180
to use table and CSS and again, we are going to focus on the CSS part.

15
00:01:17,180 --> 00:01:24,860
But the logic behind front end application and for TV's access to our provide the component for you

16
00:01:24,860 --> 00:01:28,450
without you writing in the table CSS code.

17
00:01:28,460 --> 00:01:32,630
But if want to know more about saving CSS, let me show you the trick.

18
00:01:32,660 --> 00:01:34,430
It's all about the class names.

19
00:01:34,430 --> 00:01:40,880
So if you click on getting started and then scroll down on the core concept, we have what is called

20
00:01:40,880 --> 00:01:42,810
utility first fundamentals.

21
00:01:42,830 --> 00:01:44,330
If you click on that.

22
00:01:44,330 --> 00:01:47,150
So let me show you how the class names are being used.

23
00:01:47,180 --> 00:01:52,580
Let's say that we want to use a test color or a background for text.

24
00:01:52,740 --> 00:02:02,300
Start with word text and then the color is orange and then the opacity ranging from 1 to 900.

25
00:02:02,390 --> 00:02:10,310
So you can see that for this one, they gave it a color of slate with opacity for 500.

26
00:02:10,430 --> 00:02:13,970
The same way we did for our app here.

27
00:02:14,000 --> 00:02:20,900
Inside the app, you can see that we added a test color to it as text and then the color, then the

28
00:02:20,900 --> 00:02:21,880
opacity.

29
00:02:21,890 --> 00:02:29,000
So if a background is going to be as big as that, so this one, if I save it, let's see the background

30
00:02:29,000 --> 00:02:29,470
of it.

31
00:02:29,480 --> 00:02:32,960
And you can see that this is a background color of it.

32
00:02:33,230 --> 00:02:39,800
And if you want to have the IntelliSense from saving CSS, go ahead and then install the extension for

33
00:02:39,800 --> 00:02:40,940
TV in CSS.

34
00:02:40,940 --> 00:02:46,370
And this is what I installed and I'm going to have something like this one.

35
00:02:46,580 --> 00:02:49,560
So that is pretty much for the TV and CSS.

36
00:02:49,580 --> 00:02:54,350
So let's go ahead and focus the actual concept for our application.

37
00:02:54,560 --> 00:03:01,010
So let's go ahead and then configure our application to use React router in the next video.