All language subtitles for 001 Styling Solutions_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:05,329 In this section we'll finally add 2 00:00:05,329 --> 00:00:07,306 some styling to our website. 3 00:00:07,377 --> 00:00:10,772 Now, the simplest way to write some rules 4 00:00:10,772 --> 00:00:13,339 is by using a regular CSS file. 5 00:00:13,422 --> 00:00:16,361 This is especially useful for styles 6 00:00:16,361 --> 00:00:19,139 that will apply to our entire app. 7 00:00:19,221 --> 00:00:21,710 For example, let's create a 8 00:00:21,710 --> 00:00:24,106 file called "globals.css". 9 00:00:24,198 --> 00:00:26,097 The name doesn't really matter, 10 00:00:26,097 --> 00:00:28,888 but I'll follow the same convention 11 00:00:28,888 --> 00:00:30,802 used by Create Next App. 12 00:00:30,882 --> 00:00:33,552 Here we can write our CSS rules. 13 00:00:33,552 --> 00:00:35,727 Suppose we want to change the 14 00:00:35,727 --> 00:00:37,378 text font for example. 15 00:00:37,453 --> 00:00:40,518 We can add a rule matching the "body" element, 16 00:00:40,518 --> 00:00:43,019 and here set the "font-family". 17 00:00:43,019 --> 00:00:44,726 I'll use "sans-serif", 18 00:00:44,726 --> 00:00:47,428 which will select whatever sans serif 19 00:00:47,428 --> 00:00:49,985 font is the default on each system. 20 00:00:50,058 --> 00:00:52,986 Now, for this CSS file to actually be 21 00:00:52,986 --> 00:00:55,835 used we need to import it somewhere. 22 00:00:55,915 --> 00:00:58,780 And since it contains global styles, 23 00:00:58,780 --> 00:01:02,455 the best place to do that is in the layout file, 24 00:01:02,455 --> 00:01:06,445 because the RootLayout applies to all pages. 25 00:01:06,445 --> 00:01:10,346 So here we want to import "globals.css", 26 00:01:10,346 --> 00:01:14,007 relative to the same folder as this file. 27 00:01:14,007 --> 00:01:16,802 Note that we can import CSS files 28 00:01:16,802 --> 00:01:18,749 into a JavaScript file. 29 00:01:18,834 --> 00:01:21,267 This will be handled automatically 30 00:01:21,267 --> 00:01:23,127 by the Next.js dev server, 31 00:01:23,199 --> 00:01:25,437 and also by the build command. 32 00:01:25,437 --> 00:01:27,023 In fact, if we save 33 00:01:27,023 --> 00:01:29,112 you can see that our page is 34 00:01:29,112 --> 00:01:31,126 now using a different font. 35 00:01:31,201 --> 00:01:33,958 By the way, there's a warning in the Console, 36 00:01:33,958 --> 00:01:37,281 saying that a CSS file was preloaded 37 00:01:37,281 --> 00:01:40,603 "but not used within a few seconds". 38 00:01:40,695 --> 00:01:44,538 This is rather strange, because if it's a CSS file 39 00:01:44,538 --> 00:01:46,706 surely it must have been used, 40 00:01:46,706 --> 00:01:48,873 to apply the styles within it. 41 00:01:48,945 --> 00:01:50,962 I suspect this is a small issue 42 00:01:50,962 --> 00:01:52,523 with the Chrome browser, 43 00:01:52,588 --> 00:01:54,819 showing a false warning. 44 00:01:54,819 --> 00:01:56,856 Maybe by the time you watch this 45 00:01:56,856 --> 00:01:58,765 video it will have been fixed. 46 00:01:58,829 --> 00:02:01,765 But in any case, it only happens in dev, 47 00:02:01,765 --> 00:02:03,087 not in production, 48 00:02:03,160 --> 00:02:05,070 and we can safely ignore it. 49 00:02:05,070 --> 00:02:08,838 Back to our styles, they will apply to all pages. 50 00:02:08,838 --> 00:02:11,558 But what if we want some rules that 51 00:02:11,558 --> 00:02:14,279 only apply to a specific component? 52 00:02:14,357 --> 00:02:17,888 For example, in this page we have two lists: 53 00:02:17,888 --> 00:02:19,853 one with the navigation links, 54 00:02:19,853 --> 00:02:22,399 that's defined in the RootLayout. 55 00:02:22,399 --> 00:02:26,143 And the other one is specific to the Reviews page, 56 00:02:26,143 --> 00:02:29,062 listing all the available game reviews. 57 00:02:29,062 --> 00:02:31,433 Now, we'll want to style the list 58 00:02:31,433 --> 00:02:33,803 in the navigation bar differently 59 00:02:33,875 --> 00:02:37,139 from the review list in the middle of this page. 60 00:02:37,139 --> 00:02:40,031 We could do that with CSS classes, 61 00:02:40,031 --> 00:02:43,130 but there are also libraries that provide 62 00:02:43,130 --> 00:02:45,775 isolated styles for each component. 63 00:02:45,850 --> 00:02:48,396 Next.js supports a number of 64 00:02:48,396 --> 00:02:50,941 different styling solutions. 65 00:02:51,032 --> 00:02:54,779 We've already seen how to use a global CSS, 66 00:02:54,779 --> 00:02:57,031 that's the first item in this list. 67 00:02:57,031 --> 00:03:00,319 Another option is "CSS Modules", 68 00:03:00,319 --> 00:03:03,227 that, as I was mentioning, provides 69 00:03:03,227 --> 00:03:04,972 "locally scoped CSS". 70 00:03:05,055 --> 00:03:07,484 Let's take a quick look at an example. 71 00:03:07,484 --> 00:03:09,853 This approach lets us define 72 00:03:09,853 --> 00:03:12,138 rules in a regular CSS file 73 00:03:12,222 --> 00:03:14,617 and apply them to a CSS class, 74 00:03:14,617 --> 00:03:17,013 like in this case "dashboard". 75 00:03:17,092 --> 00:03:19,725 But then we can import those styles 76 00:03:19,725 --> 00:03:21,529 into our JavaScript code 77 00:03:21,605 --> 00:03:24,191 and reference each CSS class like 78 00:03:24,191 --> 00:03:26,777 a regular property in JavaScript, 79 00:03:26,855 --> 00:03:30,438 as "styles.dashboard" in this example. 80 00:03:30,438 --> 00:03:33,279 So this is one possible option. 81 00:03:33,279 --> 00:03:37,744 Then there are some libraries that do "CSS-in-JS", 82 00:03:37,744 --> 00:03:40,917 which means that we can write CSS styles 83 00:03:40,917 --> 00:03:43,455 directly in our JavaScript code. 84 00:03:43,534 --> 00:03:46,221 The most popular of these is probably 85 00:03:46,221 --> 00:03:47,673 "styled-components". 86 00:03:47,746 --> 00:03:50,291 So, if you're already familiar with it 87 00:03:50,291 --> 00:03:53,131 you can use it with Next.js as well. 88 00:03:53,131 --> 00:03:54,987 Some of you may have used 89 00:03:54,987 --> 00:03:56,844 the "Sass" pre-processor, 90 00:03:56,918 --> 00:03:59,970 and again, if that's your favorite choice 91 00:03:59,970 --> 00:04:02,473 you can find instructions on this page 92 00:04:02,473 --> 00:04:05,991 on how to set it up in a Next.js project. 93 00:04:05,991 --> 00:04:09,902 But for our example we'll be using Tailwind CSS, 94 00:04:09,902 --> 00:04:12,053 that is a very popular library, 95 00:04:12,053 --> 00:04:14,584 and it's also my preferred choice. 96 00:04:14,584 --> 00:04:19,146 Tailwind is a "utility-first" CSS framework. 97 00:04:19,146 --> 00:04:21,831 The example on this page gives the idea. 98 00:04:21,831 --> 00:04:24,142 Suppose we want to style this 99 00:04:24,142 --> 00:04:26,453 "ChitChat" notification card. 100 00:04:26,532 --> 00:04:28,523 With a traditional approach, 101 00:04:28,523 --> 00:04:32,803 you would add CSS classes to each HTML element, 102 00:04:32,803 --> 00:04:34,927 like a "chat-notification" 103 00:04:34,927 --> 00:04:36,969 class to the outer "div". 104 00:04:37,051 --> 00:04:39,915 And then, in a separate CSS file, 105 00:04:39,915 --> 00:04:43,385 you would write rules that apply to that class. 106 00:04:43,385 --> 00:04:46,509 For example, set "display" to "flex", 107 00:04:46,509 --> 00:04:48,704 to use the flexbox layout. 108 00:04:48,788 --> 00:04:51,541 The problem with this is that you end 109 00:04:51,541 --> 00:04:54,071 up with a very long list of rules, 110 00:04:54,145 --> 00:04:57,041 and they're not really reusable anyway, 111 00:04:57,041 --> 00:04:59,323 because they only apply to that 112 00:04:59,323 --> 00:05:01,384 chat notification component. 113 00:05:01,457 --> 00:05:04,011 Tailwind provides a number of 114 00:05:04,011 --> 00:05:06,388 ready-made utility classes. 115 00:05:06,476 --> 00:05:10,738 A utility class is simply a predefined CSS class, 116 00:05:10,738 --> 00:05:11,782 like "flex", 117 00:05:11,869 --> 00:05:15,123 that applies a specific rule to this element, 118 00:05:15,123 --> 00:05:17,594 like enabling flexbox layout. 119 00:05:17,594 --> 00:05:20,297 So we can add a bunch of these utility 120 00:05:20,297 --> 00:05:22,644 classes directly to each element, 121 00:05:22,715 --> 00:05:26,396 and this results in much more concise code. 122 00:05:26,396 --> 00:05:29,217 If you see this approach for the first time, 123 00:05:29,217 --> 00:05:31,012 it will look pretty strange. 124 00:05:31,076 --> 00:05:35,181 It even seems to go against CSS best practices. 125 00:05:35,181 --> 00:05:39,094 In fact, it looks similar to using inline styles. 126 00:05:39,094 --> 00:05:41,898 But there are some important differences. 127 00:05:41,898 --> 00:05:46,032 Tailwind provides a set of predefined classes, 128 00:05:46,032 --> 00:05:48,772 that constrain your choices, making 129 00:05:48,772 --> 00:05:50,964 your design more consistent. 130 00:05:51,043 --> 00:05:54,655 It also makes it easy to do responsive design, 131 00:05:54,655 --> 00:05:58,070 because it defines some default breakpoints 132 00:05:58,070 --> 00:06:00,483 that let you apply some rules only 133 00:06:00,483 --> 00:06:02,540 on large screens for example. 134 00:06:02,611 --> 00:06:06,053 It also provides a way to apply classes 135 00:06:06,053 --> 00:06:08,170 only to specific states, 136 00:06:08,259 --> 00:06:11,070 like "hover", "focus" and so on. 137 00:06:11,070 --> 00:06:13,593 All these things are not possible 138 00:06:13,593 --> 00:06:15,045 with inline styles. 139 00:06:15,121 --> 00:06:18,700 In my experience, Tailwind works especially well 140 00:06:18,700 --> 00:06:22,406 together with a component framework, like React. 141 00:06:22,406 --> 00:06:25,144 Because if you want to reuse some styles 142 00:06:25,144 --> 00:06:27,744 in different parts of your application 143 00:06:27,812 --> 00:06:31,028 you can simply extract a React component 144 00:06:31,028 --> 00:06:33,579 encapsulating the HTML elements 145 00:06:33,579 --> 00:06:35,801 together with their styles. 146 00:06:35,883 --> 00:06:39,091 We'll see how Tailwind works in practice 147 00:06:39,091 --> 00:06:41,786 as we develop our sample application. 148 00:06:41,786 --> 00:06:45,086 To begin with, in the next video we'll install 149 00:06:45,086 --> 00:06:48,922 and configure Tailwind CSS in our project. 10991

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