- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.640 --> 00:00:02.760
Now that we have our style guide in place.
2
00:00:02.760 --> 00:00:05.300
In this guide, we're gonna start to build out
3
00:00:05.300 --> 00:00:07.300
our homepage styles.
4
00:00:07.300 --> 00:00:10.130
One of the things that I personally find very helpful
5
00:00:10.130 --> 00:00:12.790
when I'm implementing styles is to have some type
6
00:00:12.790 --> 00:00:14.940
of design to work from.
7
00:00:14.940 --> 00:00:17.270
It gives me a frame of reference
8
00:00:17.270 --> 00:00:20.530
and it gives me essentially a goal to hit
9
00:00:20.530 --> 00:00:22.320
when I'm implementing styles.
10
00:00:22.320 --> 00:00:26.110
And so sometimes you may be working in a situation
11
00:00:26.110 --> 00:00:27.910
where you're working for a big company
12
00:00:27.910 --> 00:00:30.330
and you have a designer
13
00:00:30.330 --> 00:00:32.610
and that designer is gonna hand you off
14
00:00:32.610 --> 00:00:35.570
a set of designs and then you are going to go
15
00:00:35.570 --> 00:00:40.157
and you're gonna build those using HTML, JSX and SCSS
16
00:00:40.157 --> 00:00:41.830
and those kinds of tools.
17
00:00:41.830 --> 00:00:45.770
And sometimes you may simply have an example to go off of.
18
00:00:45.770 --> 00:00:49.330
So you may be a freelancer and you may have a client
19
00:00:49.330 --> 00:00:51.910
who says, hey, I want a website that looks kinda
20
00:00:51.910 --> 00:00:54.980
like this other one or they may have bits
21
00:00:54.980 --> 00:00:57.470
and pieces of the design that they want to implement.
22
00:00:57.470 --> 00:01:02.470
So it's good practice to work with any kind of design goal
23
00:01:02.530 --> 00:01:05.960
to hit and to work to implement those.
24
00:01:05.960 --> 00:01:08.370
In this guide, I'm gonna show you
25
00:01:08.370 --> 00:01:10.500
kind of what the finished product is gonna look like.
26
00:01:10.500 --> 00:01:13.650
So this is a earlier version of the course
27
00:01:13.650 --> 00:01:16.550
but we're building out the same type of application.
28
00:01:16.550 --> 00:01:20.300
So this is a final version and this is what
29
00:01:20.300 --> 00:01:23.900
I want our portfolio home page to look like.
30
00:01:23.900 --> 00:01:26.350
So we have this grid layout
31
00:01:26.350 --> 00:01:28.640
and then we have these cool hover effects.
32
00:01:28.640 --> 00:01:31.630
So when you hover over one of the projects,
33
00:01:31.630 --> 00:01:34.230
it shows a description of the project.
34
00:01:34.230 --> 00:01:36.300
and each one of these data points is something
35
00:01:36.300 --> 00:01:39.090
that we already have access to.
36
00:01:39.090 --> 00:01:42.060
So in this guide, we're gonna build the first part of this.
37
00:01:42.060 --> 00:01:46.890
So we're simply gonna focus on writing the SCSS code
38
00:01:46.890 --> 00:01:49.580
in this guide and then in the next one,
39
00:01:49.580 --> 00:01:52.736
we're gonna see how we can integrate it directly
40
00:01:52.736 --> 00:01:54.880
into our JSX code.
41
00:01:54.880 --> 00:01:56.730
So let's get started with that
42
00:01:56.730 --> 00:01:59.220
mostly we gonna open up our own application
43
00:01:59.220 --> 00:02:02.330
and then open up visual studio code.
44
00:02:02.330 --> 00:02:07.090
So to start off, I'm going to create a new file here.
45
00:02:07.090 --> 00:02:09.370
So inside of the style directory,
46
00:02:09.370 --> 00:02:14.240
I'm gonna create a new directory called portfolio/
47
00:02:14.240 --> 00:02:18.040
and then I'm gonna call this file list.scss
48
00:02:18.040 --> 00:02:19.100
just like that.
49
00:02:19.100 --> 00:02:21.030
You can call yours whatever you want,
50
00:02:21.030 --> 00:02:22.550
but that's what I'm calling mine.
51
00:02:22.550 --> 00:02:24.950
And then I'm gonna import this at the bottom.
52
00:02:24.950 --> 00:02:29.950
So here I can say that I want to import ./portfolio/list.
53
00:02:32.510 --> 00:02:37.380
So this is now a file that is going to be automatically
54
00:02:37.380 --> 00:02:40.880
rendered and put and all of the JSX code
55
00:02:40.880 --> 00:02:43.530
is gonna have access to any of these classes
56
00:02:43.530 --> 00:02:45.240
that we create here.
57
00:02:45.240 --> 00:02:46.990
So with that in place,
58
00:02:46.990 --> 00:02:49.490
let's start adding a few styles.
59
00:02:49.490 --> 00:02:50.940
The very first thing I'm gonna do
60
00:02:50.940 --> 00:02:53.440
is I'm gonna create the grid.
61
00:02:53.440 --> 00:02:56.110
So I'm gonna create a class here
62
00:02:56.110 --> 00:03:01.110
called portfolio-items-wrapper.
63
00:03:01.350 --> 00:03:02.760
So this is gonna be a wrapper,
64
00:03:02.760 --> 00:03:05.340
this is gonna be, if you want to take a look
65
00:03:05.340 --> 00:03:09.130
at the final project, this is gonna be the grid
66
00:03:09.130 --> 00:03:11.230
where we have these rows.
67
00:03:11.230 --> 00:03:15.180
In my case, I have four rows, depending on how many items
68
00:03:15.180 --> 00:03:17.730
that you might have, you might have a different number
69
00:03:17.730 --> 00:03:22.070
but we're gonna have four rows and then three columns.
70
00:03:22.070 --> 00:03:26.640
This is a perfect example of when we could use CSS grid.
71
00:03:26.640 --> 00:03:28.630
And so that's what we're gonna do.
72
00:03:28.630 --> 00:03:32.987
I'm going to first say that we want to display grid
73
00:03:34.400 --> 00:03:38.310
and then I'm gonna say grid-template-columns
74
00:03:38.310 --> 00:03:42.420
and then I want to do 1fr, 1fr, 1fr
75
00:03:42.420 --> 00:03:45.910
this is gonna give us those three columns.
76
00:03:45.910 --> 00:03:47.700
So I'm gonna hit Save here.
77
00:03:47.700 --> 00:03:48.810
And while I'm doing this,
78
00:03:48.810 --> 00:03:53.810
I'm gonna also open up our portfolio items list here
79
00:03:54.320 --> 00:03:56.570
and we're not gonna implement all these styles.
80
00:03:56.570 --> 00:03:59.730
They simply want to kind of test it out to make sure
81
00:03:59.730 --> 00:04:01.989
that we do have access to this code,
82
00:04:01.989 --> 00:04:05.550
to these classes and these styles we're writing.
83
00:04:05.550 --> 00:04:07.030
So I'll start off and I'll say,
84
00:04:07.030 --> 00:04:10.840
I want to call the ClassName and I'm gonna set this equal
85
00:04:10.840 --> 00:04:14.833
to portfolio-items-wrapper.
86
00:04:15.990 --> 00:04:19.530
Hit Save here and let's check on Google Chrome.
87
00:04:19.530 --> 00:04:20.480
And there we go.
88
00:04:20.480 --> 00:04:24.470
You can actually see, we have the first part of this grid.
89
00:04:24.470 --> 00:04:26.360
Now all of my logos are white.
90
00:04:26.360 --> 00:04:28.700
So that's why you're not seeing the logos
91
00:04:28.700 --> 00:04:31.810
but this is giving us essentially what we're looking for.
92
00:04:31.810 --> 00:04:33.860
This is giving us the basic grid
93
00:04:33.860 --> 00:04:36.810
and this is the only JSX implementation
94
00:04:36.810 --> 00:04:38.280
we're gonna do in this guide.
95
00:04:38.280 --> 00:04:41.230
But I first wanted to see and this is a good practice,
96
00:04:41.230 --> 00:04:42.940
this is something I personally do
97
00:04:42.940 --> 00:04:44.510
whenever I'm writing my styles.
98
00:04:44.510 --> 00:04:47.660
Before I get into the nitty gritty and writing
99
00:04:47.660 --> 00:04:49.750
all of that style code, I first make sure
100
00:04:49.750 --> 00:04:51.910
that the styles are being recognized
101
00:04:51.910 --> 00:04:53.730
and that I'm calling them properly.
102
00:04:53.730 --> 00:04:55.830
And in this case, we can see that that's happening
103
00:04:55.830 --> 00:04:58.050
because we have access to that grid.
104
00:04:58.050 --> 00:05:01.750
So now let's build out the rest of those styles.
105
00:05:01.750 --> 00:05:06.590
So inside of the wrapper, we're going to have an item.
106
00:05:06.590 --> 00:05:11.000
So here, I'm gonna say, .portfolio-item,
107
00:05:11.930 --> 00:05:15.300
not items, that's a difference between the two
108
00:05:15.300 --> 00:05:19.240
and then wrapper and very important
109
00:05:19.240 --> 00:05:24.240
that you nest portfolio item inside of items
110
00:05:24.350 --> 00:05:27.900
that is gonna give us the ability to then call
111
00:05:27.900 --> 00:05:31.980
and nest each one of the items inside of that list.
112
00:05:31.980 --> 00:05:35.110
So here, I'm simply gonna have one style
113
00:05:35.110 --> 00:05:38.510
and it's gonna be positioned relative
114
00:05:38.510 --> 00:05:41.900
and you'll see later, we exactly what each one of these
115
00:05:41.900 --> 00:05:43.990
is gonna represent.
116
00:05:43.990 --> 00:05:47.260
Now we have, if you look at all of the components
117
00:05:47.260 --> 00:05:49.070
that we need to have access to,
118
00:05:49.070 --> 00:05:51.560
we know we're gonna have an image background.
119
00:05:51.560 --> 00:05:54.940
So each one of these is gonna have an image background
120
00:05:54.940 --> 00:05:57.660
then we're gonna have a text wrapper.
121
00:05:57.660 --> 00:06:01.440
This is for that description and for the subtitle
122
00:06:01.440 --> 00:06:04.610
so we know that we're gonna have the wrapper for it
123
00:06:04.610 --> 00:06:08.010
then we have to style the code that text itself
124
00:06:08.010 --> 00:06:11.241
and then we're gonna have to have this hover effect
125
00:06:11.241 --> 00:06:12.990
and then we have a logo.
126
00:06:12.990 --> 00:06:15.910
So we need to take care of each of those styles.
127
00:06:15.910 --> 00:06:18.210
So you can just on this guide,
128
00:06:18.210 --> 00:06:21.980
you can kind of just follow along with the code I'm writing
129
00:06:21.980 --> 00:06:25.530
and after we implement it in the next guide,
130
00:06:25.530 --> 00:06:28.460
we're gonna walk through exactly what is happening
131
00:06:28.460 --> 00:06:29.910
with each one of these.
132
00:06:29.910 --> 00:06:32.710
So inside of portfolio item wrapper,
133
00:06:32.710 --> 00:06:36.457
I'm gonna add another style here called portfolio-img,
134
00:06:38.792 --> 00:06:40.683
short for image, background.
135
00:06:43.640 --> 00:06:46.580
And now inside of here, this is where we put in
136
00:06:46.580 --> 00:06:50.520
our custom styles for that background image.
137
00:06:50.520 --> 00:06:54.350
I'm gonna say, I want the background-size
138
00:06:54.350 --> 00:06:56.750
to be of type cover,
139
00:06:56.750 --> 00:07:01.750
then I want the background position to be centered,
140
00:07:02.150 --> 00:07:07.150
then I want the background repeat to be no-repeat.
141
00:07:08.750 --> 00:07:12.790
I want the height to be 350 pixels
142
00:07:12.790 --> 00:07:16.170
and I want the width to be a 100%.
143
00:07:16.170 --> 00:07:18.550
Those are just some styles we're gonna be adding
144
00:07:18.550 --> 00:07:20.410
to that image background.
145
00:07:20.410 --> 00:07:23.870
Now you can close off those curly brackets there
146
00:07:23.870 --> 00:07:28.870
and then add in img-text-wrapper.
147
00:07:30.620 --> 00:07:32.080
So this is going to be,
148
00:07:32.080 --> 00:07:34.020
and I used the wrong type of brackets,
149
00:07:34.020 --> 00:07:35.440
there we go, curly brackets.
150
00:07:35.440 --> 00:07:38.960
So this is gonna be that description text wrapper.
151
00:07:38.960 --> 00:07:42.720
So this is gonna give us the ability to center the text
152
00:07:42.720 --> 00:07:47.000
and to place each one of those items like the logo
153
00:07:47.000 --> 00:07:48.280
and all of those things.
154
00:07:48.280 --> 00:07:50.920
We're gonna have them all lined up properly.
155
00:07:50.920 --> 00:07:55.920
So here, I'm gonna say, I want the position to be absolute.
156
00:07:57.380 --> 00:07:59.810
I want the top to be zero
157
00:08:00.650 --> 00:08:02.730
and then I'm gonna use display flex.
158
00:08:02.730 --> 00:08:05.210
So we're gonna be using flex box here
159
00:08:05.210 --> 00:08:09.090
and then justify content is gonna be center,
160
00:08:09.090 --> 00:08:12.383
align items is also gonna be center,
161
00:08:13.250 --> 00:08:16.040
height will be a 100%
162
00:08:16.040 --> 00:08:20.550
and then we're going to text align center
163
00:08:20.550 --> 00:08:21.940
and then let's add some padding.
164
00:08:21.940 --> 00:08:23.380
So I'm gonna say padding,
165
00:08:23.380 --> 00:08:26.490
we want to do left and right at a 100 pixels
166
00:08:26.490 --> 00:08:30.610
so what we can do, we could either say padding-left,
167
00:08:30.610 --> 00:08:33.850
a 100 pixels and then padding right a 100 pixels
168
00:08:33.850 --> 00:08:38.830
or we could just say padding zero pixels and a 100 pixels.
169
00:08:38.830 --> 00:08:42.860
Whenever you pass padding or margin two values,
170
00:08:42.860 --> 00:08:47.390
what that's gonna do is the top and bottom is gonna be zero
171
00:08:47.390 --> 00:08:50.340
and then the second argument here, a 100,
172
00:08:50.340 --> 00:08:52.030
this is gonna be left and right.
173
00:08:52.030 --> 00:08:55.060
That's just some shorthand for how you can write that.
174
00:08:55.060 --> 00:08:58.900
So inside of the image text wrapper,
175
00:08:58.900 --> 00:09:03.030
I'm gonna add a subtitle, this is their description.
176
00:09:03.030 --> 00:09:06.760
So here, I'm gonna say that I have a subtitle class
177
00:09:06.760 --> 00:09:11.140
and then I want to have a nice and easy animation.
178
00:09:11.140 --> 00:09:15.650
So I can create an animation using the transition call
179
00:09:15.650 --> 00:09:18.140
and I want this to be one second,
180
00:09:18.140 --> 00:09:20.343
ease in and out.
181
00:09:21.430 --> 00:09:25.960
I wanna start with the color being transparent,
182
00:09:25.960 --> 00:09:27.713
nope, not transparentize, transparent,
183
00:09:29.360 --> 00:09:30.193
there you go.
184
00:09:31.500 --> 00:09:36.210
And then I'm gonna go with a font weight of 900
185
00:09:36.210 --> 00:09:40.850
and a font size of one and a half
186
00:09:40.850 --> 00:09:44.310
of the original size, this is the root em,
187
00:09:44.310 --> 00:09:46.470
or the root of the original size.
188
00:09:46.470 --> 00:09:50.140
So it's gonna be a little bit larger than normal.
189
00:09:50.140 --> 00:09:54.240
So just to kind of recap what we're doing there.
190
00:09:54.240 --> 00:09:56.640
So if you notice, we can't see
191
00:09:56.640 --> 00:10:00.070
any of these descriptions right away when the page loads,
192
00:10:00.070 --> 00:10:04.400
that is because we are making that text transparent.
193
00:10:04.400 --> 00:10:06.500
What we're gonna do next, is we're gonna say,
194
00:10:06.500 --> 00:10:09.120
whenever you hover over this item,
195
00:10:09.120 --> 00:10:12.040
I want you to change the color of the text.
196
00:10:12.040 --> 00:10:13.800
So it's no longer a transparent
197
00:10:13.800 --> 00:10:17.630
and now instead it's going to be that primary color,
198
00:10:17.630 --> 00:10:21.270
the same primary color that we added in the last guide.
199
00:10:21.270 --> 00:10:23.020
So now we have that subtitle,
200
00:10:23.020 --> 00:10:27.780
we're gonna break out of the image text wrapper entirely.
201
00:10:27.780 --> 00:10:30.680
And so we're gonna come down here,
202
00:10:30.680 --> 00:10:33.290
make sure by this time you should have
203
00:10:33.290 --> 00:10:36.010
two curly brackets underneath.
204
00:10:36.010 --> 00:10:40.247
And I'm gonna add a new class here called img-text-wrapper
205
00:10:42.390 --> 00:10:44.000
and actually I'm not adding a new one,
206
00:10:44.000 --> 00:10:45.790
it's the same one that we have here.
207
00:10:45.790 --> 00:10:48.940
But what I'm doing is I'm saying that when
208
00:10:48.940 --> 00:10:51.950
we're listening for a hover effect,
209
00:10:51.950 --> 00:10:54.740
then I want to change the subtitle,
210
00:10:54.740 --> 00:10:57.270
that's a way that you can write this code.
211
00:10:57.270 --> 00:10:59.830
So we're looking for the hover effect
212
00:10:59.830 --> 00:11:03.600
which means just like when we hover over one of these items,
213
00:11:03.600 --> 00:11:07.480
the SCSS code is gonna look and listen for that change
214
00:11:07.480 --> 00:11:12.430
and when that happens, we're gonna add in a new color
215
00:11:12.430 --> 00:11:13.730
or a different style.
216
00:11:13.730 --> 00:11:17.450
So we're gonna say, I want that subtitle to change
217
00:11:17.450 --> 00:11:20.130
to our primary variable.
218
00:11:20.130 --> 00:11:23.190
So it's kind of tying in what we did in that last guide
219
00:11:23.190 --> 00:11:25.730
and then we just have two more styles here
220
00:11:25.730 --> 00:11:28.430
and so let's actually get those implemented,
221
00:11:28.430 --> 00:11:32.100
the last one is gonna be the logo wrapper.
222
00:11:32.100 --> 00:11:34.620
So I'm gonna create a logo wrapper
223
00:11:34.620 --> 00:11:37.070
and here we're looking for the image.
224
00:11:37.070 --> 00:11:39.940
So this is where you look for the image tag
225
00:11:39.940 --> 00:11:42.700
inside of the logo wrapper.
226
00:11:42.700 --> 00:11:47.700
And for that, I want to set the width of that image to 50%
227
00:11:48.100 --> 00:11:51.220
and then I want to add a little bit of margin on the bottom.
228
00:11:51.220 --> 00:11:53.670
This is gonna give us space between the logo
229
00:11:53.670 --> 00:11:55.240
and the description.
230
00:11:55.240 --> 00:11:59.100
So I'll say margin bottom is gonna be, let's just say,
231
00:11:59.100 --> 00:12:02.440
20 pixels and that's all we need to do.
232
00:12:02.440 --> 00:12:06.870
So everything here should be all of the styles
233
00:12:06.870 --> 00:12:09.650
that we need in order to implement them
234
00:12:09.650 --> 00:12:11.750
into our portfolio item
235
00:12:11.750 --> 00:12:13.500
and we're gonna be in the next guide,
236
00:12:13.500 --> 00:12:16.630
we're gonna be very close to the set of styles
237
00:12:16.630 --> 00:12:18.070
that we have right here.
238
00:12:18.070 --> 00:12:21.620
So nice job if you went through that in the next guide,
239
00:12:21.620 --> 00:12:24.650
we are gonna see how we can take all of those styles
240
00:12:24.650 --> 00:12:27.990
that we just wrote and how we can call those
241
00:12:27.990 --> 00:12:29.380
from our JSX code
242
00:12:29.380 --> 00:12:31.820
and we're also gonna see how we can actually
243
00:12:31.820 --> 00:12:34.550
add some pretty cool dynamic styles
244
00:12:34.550 --> 00:12:37.103
based on reactive behavior.