1 00:00:02,110 --> 00:00:06,470 So let's continue working on our base CSS file 2 00:00:06,470 --> 00:00:10,730 and the base CSS code that we wanna have for this project, 3 00:00:10,730 --> 00:00:12,190 some base styles. 4 00:00:12,190 --> 00:00:14,563 And I wanna to continue by setting up the 5 00:00:14,563 --> 00:00:17,610 theme for this project. 6 00:00:17,610 --> 00:00:20,700 Now, you might recall that earlier in the course, 7 00:00:20,700 --> 00:00:24,968 we had a section where we introduced you a little bit to, 8 00:00:24,968 --> 00:00:26,370 to web design, 9 00:00:26,370 --> 00:00:30,060 but also to certain CSS features 10 00:00:30,060 --> 00:00:32,940 that help with creating themes, 11 00:00:32,940 --> 00:00:35,700 and with reducing work. 12 00:00:35,700 --> 00:00:40,700 Specifically, we did introduce you to CSS variables 13 00:00:40,720 --> 00:00:43,100 and whilst we haven't used them too much 14 00:00:43,100 --> 00:00:44,200 throughout the course, 15 00:00:44,200 --> 00:00:48,590 since most parts of the course, then weren't about CSS. 16 00:00:48,590 --> 00:00:50,460 I do want to use them here. 17 00:00:50,460 --> 00:00:54,350 I do want to set up a general color palette and a couple of 18 00:00:54,350 --> 00:00:58,170 general margin and padding settings. 19 00:00:58,170 --> 00:01:01,510 So to say, which we can then use throughout 20 00:01:01,510 --> 00:01:03,470 this entire website here, 21 00:01:03,470 --> 00:01:08,184 so that indifferent CSS files and different CSS rules, 22 00:01:08,184 --> 00:01:13,184 we don't have to remember and repeat our color definitions, 23 00:01:13,330 --> 00:01:15,880 but we can instead simply refer 24 00:01:15,880 --> 00:01:19,960 to our clearly defined CSS variables 25 00:01:19,960 --> 00:01:24,960 and CSS variables basically work like JavaScript variables. 26 00:01:25,120 --> 00:01:28,019 You can use them to define a value once 27 00:01:28,019 --> 00:01:32,720 and then use it repeatedly in different parts of your code. 28 00:01:32,720 --> 00:01:37,180 And that is what I want to do here in this HTML element. 29 00:01:37,180 --> 00:01:40,170 I wanted to define some CSS variables here, 30 00:01:40,170 --> 00:01:42,770 some global CSS variables, 31 00:01:42,770 --> 00:01:44,680 which I then can use anywhere 32 00:01:44,680 --> 00:01:48,550 in any ever see us as rule and file. 33 00:01:48,550 --> 00:01:50,830 And that's why I'm using base CSS 34 00:01:50,830 --> 00:01:53,870 and the HTML selector here. 35 00:01:53,870 --> 00:01:56,440 Base CSS, because I will include 36 00:01:56,440 --> 00:01:59,230 this file in all my views 37 00:01:59,230 --> 00:02:00,470 and HTML, 38 00:02:00,470 --> 00:02:05,470 because if I then define CSS variables in this tag selector, 39 00:02:05,710 --> 00:02:10,169 these variables thanks to inheritance will be available in 40 00:02:10,169 --> 00:02:14,670 all other selectors for all other elements as well. 41 00:02:14,670 --> 00:02:16,710 That's why I'm doing it here. 42 00:02:16,710 --> 00:02:20,466 We could also use the star selector to define our variables, 43 00:02:20,466 --> 00:02:24,978 but the difference is that this selector will actually visit 44 00:02:24,978 --> 00:02:29,330 every single element on the page and apply certain styles, 45 00:02:29,330 --> 00:02:33,230 which means it would apply our CSS variables to a lot of 46 00:02:33,230 --> 00:02:37,740 elements repeatedly. Whereas if we rely on inheritance, 47 00:02:37,740 --> 00:02:40,310 the styles only get applied once 48 00:02:40,310 --> 00:02:42,680 and the browser then just inherits them. 49 00:02:42,680 --> 00:02:46,300 And from a performance perspective that is more efficient 50 00:02:46,300 --> 00:02:49,060 than using this star selector. 51 00:02:49,060 --> 00:02:50,900 You want to use that star selector 52 00:02:50,900 --> 00:02:53,560 in cases like for box sizing here, 53 00:02:53,560 --> 00:02:56,260 where you want to apply a certain style 54 00:02:56,260 --> 00:02:58,105 to all elements on the page. 55 00:02:58,105 --> 00:03:00,640 But the style you do want to apply 56 00:03:00,640 --> 00:03:04,270 is not inheritable as box sizing is. 57 00:03:04,270 --> 00:03:05,560 You can't inherit that, 58 00:03:05,560 --> 00:03:08,190 and therefore we wanted to find it like this. 59 00:03:08,190 --> 00:03:09,930 So that was a lot of talking, 60 00:03:09,930 --> 00:03:13,123 but I wanna to ensure that we're all on the same page and 61 00:03:13,123 --> 00:03:16,620 that we all understand why certain decisions are made. 62 00:03:16,620 --> 00:03:18,520 And therefore now here in HTML, 63 00:03:18,520 --> 00:03:21,130 we can define a couple of CSS variables. 64 00:03:21,130 --> 00:03:25,330 And you might remember that you define a CSS variable, 65 00:03:25,330 --> 00:03:29,819 not as in JavaScript with a keyword like let or a const, 66 00:03:29,819 --> 00:03:32,470 but that instead you use two dashes 67 00:03:32,470 --> 00:03:34,830 and then any name of your choice. 68 00:03:34,830 --> 00:03:36,900 So you add a custom property. 69 00:03:36,900 --> 00:03:39,760 That's the official name of CSS variables, 70 00:03:39,760 --> 00:03:41,170 custom properties, 71 00:03:41,170 --> 00:03:45,760 and those custom CSS properties start with two dashes. 72 00:03:45,760 --> 00:03:50,010 And then we could, for example, define a gray background, 73 00:03:50,010 --> 00:03:53,500 color So I'll choose color gray as a name here. 74 00:03:53,500 --> 00:03:56,850 And I wanted to find different shades of gray here 75 00:03:56,850 --> 00:03:59,570 so that we can use these different shades 76 00:03:59,570 --> 00:04:01,620 for different parts of the page. 77 00:04:01,620 --> 00:04:03,500 And a common technique here is 78 00:04:03,500 --> 00:04:06,440 to then use a relatively big numbers, 79 00:04:06,440 --> 00:04:11,440 like 500 to express darker shades with higher numbers and 80 00:04:11,618 --> 00:04:15,510 lighter, brighter shades with lower numbers. 81 00:04:15,510 --> 00:04:19,820 And I'll use 500 as a relatively dark gray. 82 00:04:19,820 --> 00:04:23,373 And here I already picked a gray in advance, 83 00:04:23,373 --> 00:04:26,220 which has this RGB code, 84 00:04:26,220 --> 00:04:29,490 but of course you can use any gray you want. 85 00:04:29,490 --> 00:04:32,971 And I definitely want to emphasize that you should take 86 00:04:32,971 --> 00:04:36,253 this project to really all's experiment, 87 00:04:36,253 --> 00:04:38,540 experiment with the code, 88 00:04:38,540 --> 00:04:39,640 pause to videos, 89 00:04:39,640 --> 00:04:42,600 and try implementing certain solutions on your own, 90 00:04:42,600 --> 00:04:45,080 and also play around with the colors 91 00:04:45,080 --> 00:04:47,964 and feel free to pick different colors. 92 00:04:47,964 --> 00:04:51,060 Now, this is my dark gray, 93 00:04:51,060 --> 00:04:53,490 which I'll use in various parts of this page, 94 00:04:53,490 --> 00:04:56,860 but I will also use other shades of gray. 95 00:04:56,860 --> 00:04:58,910 And now to ensure that I don't bore you, 96 00:04:58,910 --> 00:05:03,080 I will quickly fast forward and add all the color variables 97 00:05:03,080 --> 00:05:04,770 I plan on using, 98 00:05:04,770 --> 00:05:07,060 of course you attached find a file, 99 00:05:07,060 --> 00:05:09,320 which contains all these variables 100 00:05:09,320 --> 00:05:11,140 so that you can simply copy 101 00:05:11,140 --> 00:05:13,860 and paste them into your base CSS file. 102 00:05:13,860 --> 00:05:16,393 If you don't want to type them out on your own. 103 00:05:20,870 --> 00:05:24,300 Now here are the colors I picked in advance, 104 00:05:24,300 --> 00:05:26,840 a nice little schema with a primary color, 105 00:05:26,840 --> 00:05:30,550 some gray colors and some extra colors which we'll need for 106 00:05:30,550 --> 00:05:32,410 all the this course section. 107 00:05:32,410 --> 00:05:34,680 And these are the colors I will work with. 108 00:05:34,680 --> 00:05:35,513 But as mentioned, 109 00:05:35,513 --> 00:05:37,753 definitely feel free to add your own colors. 110 00:05:39,060 --> 00:05:41,530 Now colors aren't everything I want to add. 111 00:05:41,530 --> 00:05:43,480 Instead, I also want to ensure 112 00:05:43,480 --> 00:05:46,350 that whenever I work with spacing, 113 00:05:46,350 --> 00:05:49,000 specifically with padding and margin, 114 00:05:49,000 --> 00:05:52,750 I don't have to always guess which margin or padding to use, 115 00:05:52,750 --> 00:05:55,540 but I want to have some clearly defined values, 116 00:05:55,540 --> 00:05:58,027 which I use over and over again. 117 00:05:58,027 --> 00:05:58,860 And the offer. 118 00:05:58,860 --> 00:06:01,720 I will always add a couple of special variables, 119 00:06:01,720 --> 00:06:03,370 which I don't use for colors, 120 00:06:03,370 --> 00:06:05,580 but for sizes instead. 121 00:06:05,580 --> 00:06:07,770 And I'll name the first one, 122 00:06:07,770 --> 00:06:08,770 space one, 123 00:06:08,770 --> 00:06:11,057 and that will hold a value of 0.25rem 124 00:06:12,000 --> 00:06:14,710 Now rem is that special unit you learned about 125 00:06:14,710 --> 00:06:15,700 in this course, 126 00:06:15,700 --> 00:06:18,760 which is relative to the font size in the end. 127 00:06:18,760 --> 00:06:21,670 And it's a great unit to use to ensure 128 00:06:21,670 --> 00:06:25,570 that whenever your users set a different 129 00:06:25,570 --> 00:06:28,530 font size than the default of 16 pixels, 130 00:06:28,530 --> 00:06:32,540 your overall layout will scale with that font size 131 00:06:32,540 --> 00:06:36,370 and your spaces, margins, paddings, which you're using 132 00:06:36,370 --> 00:06:38,268 fit the bigger fonts. 133 00:06:38,268 --> 00:06:41,262 That's why rem is a great unit to use. 134 00:06:41,262 --> 00:06:46,262 And why it's often preferable to pixels or other units. 135 00:06:46,510 --> 00:06:49,040 Of course, you could also build this app with pixels though, 136 00:06:49,040 --> 00:06:52,763 if you prefer that, but rem are quite commonly used. 137 00:06:53,840 --> 00:06:56,420 Now all the find a couple of rem values here, 138 00:06:56,420 --> 00:06:58,500 so that I got different spaces, 139 00:06:58,500 --> 00:07:01,930 different space variables to choose from when I want to set 140 00:07:01,930 --> 00:07:05,270 up some spacing later. 141 00:07:05,270 --> 00:07:07,680 And what I'll do here basically is I'll pick 142 00:07:07,680 --> 00:07:09,530 incrementing numbers 143 00:07:09,530 --> 00:07:13,470 and they are multiples of the smallest possible space. 144 00:07:13,470 --> 00:07:17,350 So space four there is four times 0.25rem, 145 00:07:17,350 --> 00:07:18,770 which is 1rem. 146 00:07:18,770 --> 00:07:21,110 And of course you can as always add 147 00:07:21,110 --> 00:07:24,630 as many variables here as you will need for your project. 148 00:07:24,630 --> 00:07:25,700 In my case here, 149 00:07:25,700 --> 00:07:28,690 the variables I'm defining here, show to do the trick, 150 00:07:28,690 --> 00:07:30,973 and we can always add more if we need more. 151 00:07:32,790 --> 00:07:34,040 Now last but not least, 152 00:07:34,040 --> 00:07:37,960 I will also work with a couple of border radius 153 00:07:37,960 --> 00:07:40,340 and shadows for all to this section. 154 00:07:40,340 --> 00:07:42,420 And I want to ensure that I have a 155 00:07:42,420 --> 00:07:44,330 standardized border radius 156 00:07:44,330 --> 00:07:46,670 and shadow definition for this as well. 157 00:07:46,670 --> 00:07:48,989 And hence, I'll always add a border radius, 158 00:07:48,989 --> 00:07:52,160 small variable here, 159 00:07:52,160 --> 00:07:55,230 where I store a --border-radius-small of 4px 160 00:07:55,230 --> 00:07:59,673 and --border-radius-medium which is 6px for me. 161 00:08:00,930 --> 00:08:03,620 And here I am using pixels because 162 00:08:03,620 --> 00:08:07,650 unlike with distances between boxes and so on. 163 00:08:07,650 --> 00:08:11,400 The border radius could scale with font size, 164 00:08:11,400 --> 00:08:13,990 but they don't necessarily have to, 165 00:08:13,990 --> 00:08:15,230 it is something you can discuss, 166 00:08:15,230 --> 00:08:18,470 and you can come up with different solutions, 167 00:08:18,470 --> 00:08:20,888 but I prefer pixels here. 168 00:08:20,888 --> 00:08:22,927 The last but not least I'll add a 169 00:08:22,927 --> 00:08:27,927 -shadow-medium-variable here where I want to define my 170 00:08:28,222 --> 00:08:32,082 definition for a medium-sized drop shadow. 171 00:08:32,082 --> 00:08:35,460 And for such a shadow, you define find a couple of values, 172 00:08:35,460 --> 00:08:38,573 like the offset on the X and the Y axis, 173 00:08:38,573 --> 00:08:42,580 and then the blur radius of the shadow. 174 00:08:42,580 --> 00:08:44,870 So the size of the shadows, so to say, 175 00:08:44,870 --> 00:08:48,920 and then RGB a color to have an alpha channel, 176 00:08:48,920 --> 00:08:53,920 which adds transparency of 0,0,0,0.2 here, 177 00:08:54,120 --> 00:08:56,320 and the distance to shadow I will use, 178 00:08:56,320 --> 00:08:58,220 which gives us a nice of drop shadow 179 00:08:58,220 --> 00:09:00,550 with some offset to the bottom, 180 00:09:00,550 --> 00:09:01,560 um, 181 00:09:01,560 --> 00:09:06,560 a relatively big radius and then distance parent color. 182 00:09:06,570 --> 00:09:09,686 But again, of course you can pick your favorite shadow. 183 00:09:09,686 --> 00:09:14,070 And with that, I set up my main theme-ing variables, 184 00:09:14,070 --> 00:09:16,240 which I'll use for this project. 185 00:09:16,240 --> 00:09:20,670 And these variables should help us write consistent CSS code 186 00:09:20,670 --> 00:09:22,363 in the other files as well.