All language subtitles for 003 Layout Styling_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian Download
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:03,000 --> 00:00:06,604 We set up Tailwind CSS in our project. 2 00:00:06,604 --> 00:00:08,747 Now let's see how to use it, 3 00:00:08,747 --> 00:00:11,481 to add some styles to our layout. 4 00:00:11,607 --> 00:00:15,381 Let's say we want some padding inside the body. 5 00:00:15,381 --> 00:00:18,987 With React, we need to set the "className" prop, 6 00:00:18,987 --> 00:00:22,181 and here we'll add some utility classes. 7 00:00:22,181 --> 00:00:25,457 Tailwind has some excellent documentation, 8 00:00:25,457 --> 00:00:27,697 so if we search for "padding" 9 00:00:27,697 --> 00:00:30,269 we'll find the relevant instructions. 10 00:00:30,269 --> 00:00:32,692 We can add "horizontal padding" 11 00:00:32,692 --> 00:00:37,222 by writing "px-" and then a number, like 8. 12 00:00:37,222 --> 00:00:39,940 This will seem cryptic at first, 13 00:00:39,940 --> 00:00:42,441 but the "p" stands for "padding", 14 00:00:42,441 --> 00:00:47,320 "x" means along the X axis, that is horizontally, 15 00:00:47,320 --> 00:00:50,258 and 8 is the amount of padding. 16 00:00:50,258 --> 00:00:53,372 If we want some "vertical padding" instead, 17 00:00:53,372 --> 00:00:56,772 we'll write "py-" followed by the number. 18 00:00:56,772 --> 00:00:58,961 "p" always means padding, 19 00:00:58,961 --> 00:01:03,300 and "y" means on the Y axis, that is vertically. 20 00:01:03,300 --> 00:01:06,371 As you get used to these naming conventions, 21 00:01:06,371 --> 00:01:08,535 you'll be able to quickly figure 22 00:01:08,535 --> 00:01:10,225 out the right class names 23 00:01:10,293 --> 00:01:12,955 even without looking at the documentation. 24 00:01:12,955 --> 00:01:15,885 So, let's add some horizontal padding, 25 00:01:15,885 --> 00:01:17,957 by writing "px-" 26 00:01:17,957 --> 00:01:19,660 and the editor will suggest 27 00:01:19,660 --> 00:01:21,299 all the available options. 28 00:01:21,362 --> 00:01:23,998 This is thanks to the Tailwind extension 29 00:01:23,998 --> 00:01:26,304 we installed in the previous video. 30 00:01:26,370 --> 00:01:29,328 The popup shows exactly which rules 31 00:01:29,328 --> 00:01:32,202 will be applied by each CSS class. 32 00:01:32,286 --> 00:01:35,915 So "px-0" will set both "padding-left" 33 00:01:35,915 --> 00:01:38,588 and "padding-right" to zero. 34 00:01:38,684 --> 00:01:44,284 While "px-1" will set them both to "0.25 rem", 35 00:01:44,284 --> 00:01:47,850 where "rem" is a CSS unit that is relative 36 00:01:47,850 --> 00:01:51,162 to the font size of the "root element". 37 00:01:51,246 --> 00:01:54,370 As the comment shows, by default 38 00:01:54,370 --> 00:01:57,103 "0.25 rem" will be 4 pixels. 39 00:01:57,201 --> 00:02:02,471 "px-2" will use "0.5 rem", or 8px. 40 00:02:02,471 --> 00:02:08,711 "px-3" is "0.75 rem", or "12px", and so on. 41 00:02:08,711 --> 00:02:11,517 So, you can see that Tailwind gives us 42 00:02:11,517 --> 00:02:14,102 a number of options to choose from, 43 00:02:14,176 --> 00:02:16,361 but within some constraints. 44 00:02:16,361 --> 00:02:20,484 There's no class to apply 10 pixels for example. 45 00:02:20,484 --> 00:02:22,839 We can either choose "px-2", 46 00:02:22,839 --> 00:02:24,941 that's effectively "8px", 47 00:02:25,025 --> 00:02:28,618 or "px-3", that's "12px". 48 00:02:28,618 --> 00:02:31,156 Limiting the available choices will 49 00:02:31,156 --> 00:02:33,477 make our design more consistent. 50 00:02:33,549 --> 00:02:36,193 Anyway, let's select "px-4", 51 00:02:36,193 --> 00:02:37,815 that is "1rem". 52 00:02:37,815 --> 00:02:38,893 And if we save, 53 00:02:38,893 --> 00:02:41,965 you can see that there's now some horizontal 54 00:02:41,965 --> 00:02:43,641 padding around the body. 55 00:02:43,711 --> 00:02:47,021 Let's add some vertical padding as well, 56 00:02:47,021 --> 00:02:47,849 with "py", 57 00:02:47,931 --> 00:02:49,732 maybe "py-2". 58 00:02:49,811 --> 00:02:52,157 And you can see the result in the page. 59 00:02:52,157 --> 00:02:54,590 When it comes to choosing a number, 60 00:02:54,590 --> 00:02:56,756 you can basically just try something 61 00:02:56,756 --> 00:02:58,380 and see what it looks like, 62 00:02:58,441 --> 00:03:02,686 and then pick a bigger number if you want more padding, 63 00:03:02,686 --> 00:03:03,767 or vice versa. 64 00:03:03,844 --> 00:03:06,318 By the way, there's always this annoying 65 00:03:06,318 --> 00:03:08,236 warning in the browser console. 66 00:03:08,298 --> 00:03:10,983 What I'll do is simply filter it out, 67 00:03:10,983 --> 00:03:13,723 by writing "-preload" here, 68 00:03:13,723 --> 00:03:16,862 which means it will exclude any messages 69 00:03:16,862 --> 00:03:18,667 that contain "preload". 70 00:03:18,746 --> 00:03:22,077 Otherwise it just fills the logs with noise. 71 00:03:22,077 --> 00:03:24,452 Now, we may want to add some space 72 00:03:24,452 --> 00:03:26,827 around the "main" element as well. 73 00:03:26,897 --> 00:03:29,795 We just need some vertical padding here, 74 00:03:29,795 --> 00:03:31,887 let's try "py-3". 75 00:03:31,887 --> 00:03:33,280 That looks better. 76 00:03:33,280 --> 00:03:35,762 Next, we could sort out the links 77 00:03:35,762 --> 00:03:37,417 in the navigation bar. 78 00:03:37,492 --> 00:03:40,555 We'll want to display them all in the same row, 79 00:03:40,555 --> 00:03:43,588 and one way to do that is using "flex". 80 00:03:43,588 --> 00:03:46,571 You can also hover over a CSS class 81 00:03:46,571 --> 00:03:49,387 to see exactly which rules it applies. 82 00:03:49,387 --> 00:03:51,593 "flex" simply sets the "display" 83 00:03:51,593 --> 00:03:53,041 property accordingly. 84 00:03:53,110 --> 00:03:56,265 We'll also want some space between each item, 85 00:03:56,265 --> 00:03:57,690 with "gap-2". 86 00:03:57,765 --> 00:04:01,177 "gap" is a property you can use with flexbox. 87 00:04:01,177 --> 00:04:03,187 You can see that all the links 88 00:04:03,187 --> 00:04:04,862 are now on the same line, 89 00:04:04,929 --> 00:04:07,101 with some space between them. 90 00:04:07,101 --> 00:04:09,889 I'll just use the various Tailwind 91 00:04:09,889 --> 00:04:12,185 utility classes from now on, 92 00:04:12,267 --> 00:04:15,557 without explaining each one in great detail. 93 00:04:15,557 --> 00:04:19,134 So you can get a feel for how Tailwind works, 94 00:04:19,134 --> 00:04:22,601 but we won't spend too much time on styling. 95 00:04:22,601 --> 00:04:24,247 Remember that you can always 96 00:04:24,247 --> 00:04:25,717 look at the documentation 97 00:04:25,776 --> 00:04:28,942 if you want to see more detailed instructions. 98 00:04:28,942 --> 00:04:30,880 Now, since we're positioning 99 00:04:30,880 --> 00:04:32,611 the elements on the page, 100 00:04:32,680 --> 00:04:35,465 let's take care of the "footer" as well. 101 00:04:35,465 --> 00:04:38,455 For a start, we can center the text. 102 00:04:38,455 --> 00:04:41,631 We could also make it smaller with "xs", 103 00:04:41,631 --> 00:04:43,647 that means "extra-small". 104 00:04:43,647 --> 00:04:46,215 This will decrease the font size. 105 00:04:46,215 --> 00:04:49,638 The footer always contains the fine print. 106 00:04:49,638 --> 00:04:51,486 Maybe we could also separate it 107 00:04:51,486 --> 00:04:53,036 from the rest of the page, 108 00:04:53,096 --> 00:04:55,634 by adding some border at the top. 109 00:04:55,634 --> 00:04:57,620 The "t" stands for "top". 110 00:04:57,620 --> 00:05:00,762 The line is too close to the text though; 111 00:05:00,762 --> 00:05:03,512 let's add some vertical padding as well. 112 00:05:03,512 --> 00:05:05,193 Ok, that's better. 113 00:05:05,193 --> 00:05:07,208 Now, ideally the footer should 114 00:05:07,208 --> 00:05:09,154 be at the bottom of the page. 115 00:05:09,222 --> 00:05:12,941 Even if the rest of the content doesn't fill the full screen, 116 00:05:12,941 --> 00:05:14,039 like in this case. 117 00:05:14,100 --> 00:05:16,653 We can push the footer to the bottom 118 00:05:16,653 --> 00:05:19,207 by setting the "body" to use flexbox 119 00:05:19,278 --> 00:05:22,531 but in the column direction, with "flex-col". 120 00:05:22,531 --> 00:05:25,374 Then set a minimum height for the body, 121 00:05:25,374 --> 00:05:30,430 using "min-h-screen", which sets it to "100vh", 122 00:05:30,430 --> 00:05:34,561 that means 100% of the visible height. 123 00:05:34,561 --> 00:05:36,652 In other words, the body should 124 00:05:36,652 --> 00:05:37,934 fill the full page. 125 00:05:38,001 --> 00:05:41,472 And then we can set the "main" element to expand, 126 00:05:41,472 --> 00:05:43,655 by using the "grow" class, 127 00:05:43,655 --> 00:05:46,302 that sets "flex-grow" to 1. 128 00:05:46,302 --> 00:05:48,946 This way the main content will expand 129 00:05:48,946 --> 00:05:51,232 to take all the available space, 130 00:05:51,303 --> 00:05:53,541 pushing the footer to the bottom. 131 00:05:53,541 --> 00:05:56,722 You can always use the Chrome Developer Tools 132 00:05:56,861 --> 00:05:59,621 to inspect any element on the page, 133 00:05:59,621 --> 00:06:02,133 and see what styles it's using. 134 00:06:02,133 --> 00:06:05,125 For example, if we select the "main" element 135 00:06:05,125 --> 00:06:08,666 we can see that it has the "py-3" class, 136 00:06:08,666 --> 00:06:13,081 that sets "padding-top" and "padding-bottom" 137 00:06:13,081 --> 00:06:14,385 to "0.75rem". 138 00:06:14,486 --> 00:06:16,584 And the "grow" class, that 139 00:06:16,584 --> 00:06:18,521 sets "flex-grow" to "1". 140 00:06:18,601 --> 00:06:21,970 We can also see the the "body" is using "flex". 141 00:06:21,970 --> 00:06:25,962 The DevTools have special support for flexbox, 142 00:06:25,962 --> 00:06:29,339 showing a dotted line around each item. 143 00:06:29,339 --> 00:06:31,635 If you're not familiar with 144 00:06:31,635 --> 00:06:33,847 the Flexbox layout in CSS, 145 00:06:33,932 --> 00:06:36,220 you can find a link in the Resources 146 00:06:36,220 --> 00:06:37,300 for this lecture, 147 00:06:37,364 --> 00:06:39,583 where you can learn more about it. 148 00:06:39,583 --> 00:06:42,093 But we can see that the "main" element 149 00:06:42,093 --> 00:06:43,877 takes up most of the space, 150 00:06:43,943 --> 00:06:46,065 because we set it to "grow". 151 00:06:46,065 --> 00:06:49,185 And that's how we can make sure that the footer 152 00:06:49,185 --> 00:06:51,907 is always at the very bottom of the page. 153 00:06:51,973 --> 00:06:54,928 So, we used Tailwind to position all 154 00:06:54,928 --> 00:06:57,389 the main elements of our page. 155 00:06:57,471 --> 00:06:59,347 In the next video we'll see 156 00:06:59,347 --> 00:07:00,944 how to add some colors. 11383

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.