1
00:00:00,270 --> 00:00:01,010
I'm Nick Pettit.

2
00:00:01,010 --> 00:00:01,950
>> I'm Jason Seifer.

3
00:00:01,950 --> 00:00:04,860
>> And you're watching the Treehouse Show,
your weekly dose of internets where we

4
00:00:04,860 --> 00:00:07,560
talk about all things web design, web
development, and more.

5
00:00:07,560 --> 00:00:11,360
>> In this episode we'll be talking about
3D scrolling, flex box,

6
00:00:11,360 --> 00:00:13,540
material design, and more.

7
00:00:13,540 --> 00:00:14,795
>> Let's check it out.

8
00:00:14,795 --> 00:00:19,671
[MUSIC]

9
00:00:19,671 --> 00:00:21,888
First up is Space.js.

10
00:00:21,888 --> 00:00:27,010
This is HTML-driven narrative 3D
scrolling.

11
00:00:27,010 --> 00:00:29,010
>> That's spelled differently than I
thought.

12
00:00:29,010 --> 00:00:29,700
>> It is.

13
00:00:29,700 --> 00:00:33,600
But I would just call it 3D scrolling.

14
00:00:33,600 --> 00:00:34,910
Cuz that's, that's pretty much what it is.

15
00:00:34,910 --> 00:00:36,049
So when I scroll down the page,.

16
00:00:37,070 --> 00:00:39,120
Woah, what is happening?

17
00:00:39,120 --> 00:00:43,420
Is this a webpage or are we flying through
space?

18
00:00:43,420 --> 00:00:46,128
So I'm just gonna scroll through really
quickly there.

19
00:00:46,128 --> 00:00:46,690
>> Wow.
>> Yeah.

20
00:00:46,690 --> 00:00:47,760
>> I think we are flying through space.

21
00:00:47,760 --> 00:00:51,280
>> I think you guys, you know probably got
all the, all the code there.

22
00:00:51,280 --> 00:00:52,350
Got the idea.

23
00:00:52,350 --> 00:00:56,000
No actually we're gonna go to their GitHub
page.

24
00:00:56,000 --> 00:00:59,730
And learn a little bit more about how this
works.

25
00:00:59,730 --> 00:01:00,550
So.

26
00:01:00,550 --> 00:01:01,220
>> Magic.

27
00:01:01,220 --> 00:01:07,030
>> As you scroll down the page, these
frames start moving towards you.

28
00:01:07,030 --> 00:01:12,110
So this is a JavaScript library, and once
you type out some of this markup and

29
00:01:12,110 --> 00:01:17,050
include the JavaScript in your page, you
can create these frames.

30
00:01:17,050 --> 00:01:24,070
Now, they recommend having this space
frame along with this space inner frame

31
00:01:24,070 --> 00:01:29,550
to enable vertical and horizontal
centering inside each one.

32
00:01:29,550 --> 00:01:34,580
So then, you can also include some of
these options.

33
00:01:34,580 --> 00:01:40,280
Now you can have custom durations as well
as different types of transitions.

34
00:01:40,280 --> 00:01:40,850
There it is.

35
00:01:40,850 --> 00:01:42,310
Entry and exit.

36
00:01:42,310 --> 00:01:43,890
So, you can have them fade in or

37
00:01:43,890 --> 00:01:48,930
fade out or kind of zoom in or move to the
left or right.

38
00:01:48,930 --> 00:01:50,480
All sorts of stuff.

39
00:01:50,480 --> 00:01:52,090
Anyway, there we go.

40
00:01:52,090 --> 00:01:54,010
There's all the custom transitions.

41
00:01:54,010 --> 00:01:55,400
Pretty cool stuff, so

42
00:01:55,400 --> 00:02:01,300
definitely be sure to check this one out
if you wanna do some some 3D scrolling.

43
00:02:01,300 --> 00:02:04,760
>> You know, sometimes people ask Nick and
I where we find all of these great

44
00:02:04,760 --> 00:02:09,910
libraries and we found this out when we
were having drinks at the space bar.

45
00:02:11,660 --> 00:02:13,030
It's where we found out about Space.js.

46
00:02:13,030 --> 00:02:15,020
>> That's a complete lie.

47
00:02:15,020 --> 00:02:16,150
>> Get it?

48
00:02:16,150 --> 00:02:16,820
Yeah, I get it.

49
00:02:16,820 --> 00:02:17,340
>> Space Bar-
>> Yeah.

50
00:02:17,340 --> 00:02:18,550
>> Like it's a key on a keyboard-
>> It's, it's on the, right.

51
00:02:18,550 --> 00:02:19,820
>> But it also could be the name of like
a.

52
00:02:21,040 --> 00:02:21,810
>> An establishment.

53
00:02:21,810 --> 00:02:22,700
>> Yeah.
>> Yeah.

54
00:02:22,700 --> 00:02:23,680
>> Yeah.
>> Mm-hm.

55
00:02:23,680 --> 00:02:26,500
They got it.
>> Next, next up, we have an article about

56
00:02:26,500 --> 00:02:30,960
what nobody will tell you about the
will-change property in CSS.

57
00:02:30,960 --> 00:02:31,800
>> Except.

58
00:02:32,900 --> 00:02:34,800
The host of the Treehouse show [INAUDIBLE]
I tell you.

59
00:02:34,800 --> 00:02:37,360
>> And the blog that we read this from.

60
00:02:37,360 --> 00:02:38,440
>> Yeah.

61
00:02:38,440 --> 00:02:42,010
>> So anyway, the will-change property is
supposed to give browsers

62
00:02:42,010 --> 00:02:46,810
notice that you will be doing some sort of
manipulation to a DOM element and

63
00:02:46,810 --> 00:02:49,620
what kind of change is going to happen.

64
00:02:49,620 --> 00:02:55,730
Now the problem with this is that not all
browsers support the will-change property,

65
00:02:55,730 --> 00:03:00,710
and if the browser does not support it, it
may not render the element properly.

66
00:03:00,710 --> 00:03:02,320
So, here's a really simple example.

67
00:03:02,320 --> 00:03:06,720
There is two divs with the classes of box,
box1 and box2.

68
00:03:06,720 --> 00:03:10,220
Now if we look at the styling this looks
pretty good.

69
00:03:10,220 --> 00:03:13,278
The box has a width and height of 100
pixels.

70
00:03:13,278 --> 00:03:17,340
Box1 has a background of orange, box2 has
a background of teal.

71
00:03:17,340 --> 00:03:18,310
Now the big difference here,

72
00:03:18,310 --> 00:03:23,140
the box1 class has this will-change
property set to transform.

73
00:03:23,140 --> 00:03:27,950
What's gonna happen is if a browser does
not support the will-change property

74
00:03:27,950 --> 00:03:32,660
then the green box will be rendered and if
not the orange box will be rendered.

75
00:03:32,660 --> 00:03:37,410
Now the problem with this is that if you
are going to be testing in

76
00:03:37,410 --> 00:03:41,190
multiple browsers, you need to actually
make sure that this property renders.

77
00:03:41,190 --> 00:03:44,120
There is no real graceful degradation
there.

78
00:03:44,120 --> 00:03:48,820
The author of this article says that this
brings us back to the old IE 6 and 7 days.

79
00:03:48,820 --> 00:03:51,050
Anyway, this is just something to keep in
mind if you're using

80
00:03:51,050 --> 00:03:52,040
the will-change property.

81
00:03:52,040 --> 00:03:55,210
Maybe wait until is has more browser
support but go ahead and

82
00:03:55,210 --> 00:03:57,500
read the article for a little bit more
specifics.

83
00:03:57,500 --> 00:03:58,310
>> Very cool stuff.

84
00:03:58,310 --> 00:04:02,913
Well next up is the Flexbox Cheatsheet
Cheatsheet.

85
00:04:02,913 --> 00:04:04,080
>> Oh, good.

86
00:04:04,080 --> 00:04:08,630
>> So, there's lots of cheatsheets out
there for Flexbox but

87
00:04:08,630 --> 00:04:12,470
this article is saying that they kept
going back to the post

88
00:04:12,470 --> 00:04:16,160
on CSS tricks that's all about it which is
a very good post.

89
00:04:16,160 --> 00:04:20,500
I've referred to that one a lot myself, so
I know exactly what they're talking about.

90
00:04:20,500 --> 00:04:21,840
And they said, well,

91
00:04:21,840 --> 00:04:26,450
it might be a little bit nicer to actually
organize it a bit differently.

92
00:04:26,450 --> 00:04:29,100
And they have this little flow chart.

93
00:04:29,100 --> 00:04:34,280
So, first they just have the basic
concepts of a flex container

94
00:04:34,280 --> 00:04:36,820
with some flex items inside of it.

95
00:04:36,820 --> 00:04:40,640
So that's the basic setup for a Flexbox
layout.

96
00:04:40,640 --> 00:04:46,090
And then you have the cross access and
main access and that's, that's helpful.

97
00:04:46,090 --> 00:04:49,000
And then they have this flow chart here,
and they say,

98
00:04:49,000 --> 00:04:52,430
well, do you want rows or columns or

99
00:04:52,430 --> 00:04:57,200
first it says to activate the Flexbox
powers you have to say, Display flex.

100
00:04:57,200 --> 00:05:00,960
So that's what you would do on this Flex
container.

101
00:05:00,960 --> 00:05:03,260
Now it says, do you want rows or columns?

102
00:05:03,260 --> 00:05:07,840
Well, if you want rows then you're gonna
have to say flex direction row or

103
00:05:07,840 --> 00:05:09,050
flex direction column.

104
00:05:09,050 --> 00:05:11,430
And again you do that on the container.

105
00:05:11,430 --> 00:05:16,090
And then, same thing, you can also reverse
those if you want to do reversed rows and

106
00:05:16,090 --> 00:05:17,600
reversed columns.

107
00:05:17,600 --> 00:05:21,580
And then you can add a couple of more
properties and

108
00:05:21,580 --> 00:05:25,080
values to the container so it has those.

109
00:05:26,150 --> 00:05:28,710
And then down here, let's see.

110
00:05:28,710 --> 00:05:30,910
Where is it?

111
00:05:30,910 --> 00:05:36,280
Yes, on the flex items, there are a couple
of things you can do as well.

112
00:05:36,280 --> 00:05:41,310
Anyway, I just really liked the formatting
of this because it's in this simple

113
00:05:41,310 --> 00:05:44,070
sort of question and answer format, or

114
00:05:44,070 --> 00:05:48,050
flow chart format where you can say like
well, do you wanna do this or that?

115
00:05:48,050 --> 00:05:49,220
Yes or no?

116
00:05:49,220 --> 00:05:54,140
And it makes it really easy to figure out
which properties that you wanna use

117
00:05:54,140 --> 00:05:59,450
because Flexbox of course is a new method
for laying out web pages.

118
00:05:59,450 --> 00:06:03,740
And it's not perfectly supported in every
browser just yet.

119
00:06:03,740 --> 00:06:05,500
Support is coming along.

120
00:06:05,500 --> 00:06:09,420
But it's still really cool and definitely
worth learning about now, but

121
00:06:09,420 --> 00:06:10,830
it can be a little bit confusing.

122
00:06:10,830 --> 00:06:14,740
So this, this cheatsheet cheatsheet is
pretty helpful.

123
00:06:14,740 --> 00:06:16,910
>> Yeah, I can't wait until it has better
browser support.

124
00:06:16,910 --> 00:06:18,160
I could hardly contain myself.

125
00:06:19,500 --> 00:06:21,140
>> It'll make things a little bit more
flexible.

126
00:06:21,140 --> 00:06:22,120
>> Yeah.

127
00:06:22,120 --> 00:06:25,290
Next up, we have a project called
Materialize.

128
00:06:25,290 --> 00:06:28,920
Now, this is a responsive front-end
framework that is based

129
00:06:28,920 --> 00:06:30,940
on Material Design from Google.

130
00:06:30,940 --> 00:06:34,010
I know because it says that right on the
page here.

131
00:06:34,010 --> 00:06:37,900
Now this gives you a whole bunch of
material design components as well as

132
00:06:37,900 --> 00:06:40,130
Sass versions with the source scss files.

133
00:06:41,420 --> 00:06:46,250
It's very easy to set up, you include the
CSS and JavaScript and

134
00:06:46,250 --> 00:06:47,850
then you are good to go.

135
00:06:47,850 --> 00:06:51,270
Also it is supported on NPM and Bower and

136
00:06:51,270 --> 00:06:53,320
then it walks you through how the project
is set up.

137
00:06:53,320 --> 00:06:54,260
That's cool.

138
00:06:54,260 --> 00:06:58,340
Why don't we just look at some demos to
see what is actually supported.

139
00:06:58,340 --> 00:07:02,550
Now it gives you a ton of different color
palettes here.

140
00:07:02,550 --> 00:07:07,470
We can see we've got red paint and purple
as well as several different

141
00:07:07,470 --> 00:07:13,060
shades of colors as well as the accents,
one through four, darken, whatever.

142
00:07:13,060 --> 00:07:16,300
Now we also have grids and containers.

143
00:07:16,300 --> 00:07:21,090
Similar to if you're using bootstrap or
any of the other CSS frameworks.

144
00:07:21,090 --> 00:07:22,810
Hey, this has a grid too.

145
00:07:22,810 --> 00:07:27,090
And it gives you class names for row and
columns.

146
00:07:27,090 --> 00:07:31,470
Supports offsets and everything that you
expect from a CSS framework.

147
00:07:32,790 --> 00:07:37,170
What's really nice is the different
helpers and components here.

148
00:07:37,170 --> 00:07:40,010
So cards, here's a, here's a nice card.

149
00:07:40,010 --> 00:07:43,700
There are all sorts of design

150
00:07:43,700 --> 00:07:46,870
specifications lately where cards are
kinda the hot new thing.

151
00:07:46,870 --> 00:07:49,260
Hey you want a CSS framework that supports
cards?

152
00:07:49,260 --> 00:07:50,250
Boom, here's a card.

153
00:07:50,250 --> 00:07:53,680
They've got basics card, basic cards,
image cards with links.

154
00:07:53,680 --> 00:07:54,330
You want cards?

155
00:07:54,330 --> 00:07:56,180
Hey, tons of different cards here.

156
00:07:56,180 --> 00:07:58,300
Now not gonna walk through everything but

157
00:07:58,300 --> 00:08:01,730
if you do wanna see a nice little showcase
here of everything that's possible.

158
00:08:01,730 --> 00:08:03,080
Go ahead and check it out.

159
00:08:03,080 --> 00:08:07,570
You can find a link to material.cs at
materialize.css in the show notes right at

160
00:08:07,570 --> 00:08:09,620
the bottom of this video.

161
00:08:09,620 --> 00:08:10,280
>> Very cool stuff.

162
00:08:10,280 --> 00:08:17,300
Well, next up is A Living Style Guide
Tools In-depth Overview.

163
00:08:17,300 --> 00:08:20,100
That's a lot of words, so I should
probably explain some of them.

164
00:08:20,100 --> 00:08:22,830
>> Yeah, so we've talked about style
guides on the show before.

165
00:08:22,830 --> 00:08:27,760
Now this post is about how to make your
style guide sentient and an actual person.

166
00:08:27,760 --> 00:08:32,060
That is almost true, except not in the
slightest bit.

167
00:08:32,060 --> 00:08:35,670
A living style guide is basically a place
where we can put

168
00:08:35,670 --> 00:08:39,330
all of your different components and
colors and buttons and

169
00:08:39,330 --> 00:08:44,170
things that you end up creating as you are
building out a website.

170
00:08:44,170 --> 00:08:49,030
And it allows your style guide to be
flexible and

171
00:08:49,030 --> 00:08:53,390
basically include newer things as you
create them.

172
00:08:53,390 --> 00:08:55,570
>> That's basically exactly what I said.

173
00:08:55,570 --> 00:08:56,070
>> Sure.

174
00:08:57,270 --> 00:09:02,520
So this guide is for, Living Style Guide
Tools,

175
00:09:02,520 --> 00:09:06,840
that allow you to create these Living
Style Guides.

176
00:09:06,840 --> 00:09:09,600
So this is a big list and

177
00:09:09,600 --> 00:09:14,040
let's just scroll down to one that I
really like here.

178
00:09:14,040 --> 00:09:15,200
Here we go, pattern lab.

179
00:09:16,390 --> 00:09:21,340
So pattern lab is exactly what you would
expect out of a tool like this.

180
00:09:21,340 --> 00:09:26,090
It allows you to look at all of the
different colors for example.

181
00:09:26,090 --> 00:09:28,850
All of the different fonts that you're
using and

182
00:09:28,850 --> 00:09:33,710
it shows you what forms look like in your,
in your website.

183
00:09:33,710 --> 00:09:38,710
And you can use this sort of navigational
structure that they

184
00:09:38,710 --> 00:09:43,050
have built out here to click through each
one of those things.

185
00:09:43,050 --> 00:09:47,400
So, you'll go to an HTML page and it will
just have, like, for

186
00:09:47,400 --> 00:09:50,290
example, some forms on it but it will show
you,

187
00:09:50,290 --> 00:09:55,770
of course, what those forms look like
because your CSS is being applied to them.

188
00:09:55,770 --> 00:09:58,610
So, there's a lot of other tools like
this.

189
00:09:58,610 --> 00:10:04,190
I think there's a few generators and ruby
gems and all sorts of stuff in here.

190
00:10:04,190 --> 00:10:07,370
So, this is a pretty in-depth guide, but

191
00:10:07,370 --> 00:10:11,970
I definitely recommend you check this out
because creating a living style guide is,

192
00:10:11,970 --> 00:10:16,310
is pretty helpful when you're working on a
team of other people.

193
00:10:16,310 --> 00:10:20,590
And you have to sort of create these
things on the fly, but you also wanna keep

194
00:10:20,590 --> 00:10:24,320
other people informed about these
stylistic decisions that you're making.

195
00:10:24,320 --> 00:10:26,520
>> That was kind of like how Bootstrap got
started, I believe.

196
00:10:26,520 --> 00:10:28,170
>> Yes, that is true.

197
00:10:28,170 --> 00:10:28,948
>> Once.
>> Anyway, that's a.

198
00:10:28,948 --> 00:10:30,660
[LAUGH]
>> [LAUGH] That's

199
00:10:30,660 --> 00:10:31,850
about all we have time for today, Nick.

200
00:10:31,850 --> 00:10:32,770
Who are you on Twitter?

201
00:10:32,770 --> 00:10:33,432
>> I'm @nickrp.

202
00:10:33,432 --> 00:10:34,530
>> And I'm @jseifer.

203
00:10:34,530 --> 00:10:36,090
For more information on anything we talked
about,

204
00:10:36,090 --> 00:10:37,586
check out the show notes right below this
video.

205
00:10:37,586 --> 00:10:41,006
Thank you everybody for watching and we'll
talk to you next week.

206
00:10:41,006 --> 00:10:47,744
[MUSIC]