1
00:00:00,380 --> 00:00:03,380
So the last thing we're gonna do is use
media queries to help to

2
00:00:03,380 --> 00:00:05,648
find an element state rules.

3
00:00:05,648 --> 00:00:08,940
Now we briefly discussed state rules in
the previous stage,

4
00:00:08,940 --> 00:00:11,780
where we learn that state rules are
applied to elements to

5
00:00:11,780 --> 00:00:15,270
indicate a change in state while the page
is still running.

6
00:00:15,270 --> 00:00:19,760
So, inside our states directory I've
created partials for

7
00:00:19,760 --> 00:00:23,850
a collapsed state and for grid display.

8
00:00:23,850 --> 00:00:27,690
We're gonna write our state rules, using
the SMACSS naming convention for

9
00:00:27,690 --> 00:00:28,770
element states.

10
00:00:28,770 --> 00:00:31,480
They're usually prefixed with is.

11
00:00:31,480 --> 00:00:36,520
So, first, to define a state where
elements are collapsed in mobile views, or

12
00:00:36,520 --> 00:00:40,317
in the small breakpoint range, we can
write is

13
00:00:40,317 --> 00:00:47,920
collapsed mobile.

14
00:00:47,920 --> 00:00:51,710
Then we'll include the media query mix in
for the small break point.

15
00:00:56,850 --> 00:01:00,110
And inside the media query we're going to
write a few properties to

16
00:01:00,110 --> 00:01:01,540
create that collapsed state.

17
00:01:01,540 --> 00:01:08,740
So, first we'll say, this ability collapse

18
00:01:08,740 --> 00:01:13,080
followed by padding zero then height zero.

19
00:01:14,600 --> 00:01:18,480
We'll also give it a margin and a line
height of zero.

20
00:01:21,960 --> 00:01:23,740
So, when writing state rules,

21
00:01:23,740 --> 00:01:28,430
we can't really rely on inheritance the
way we normally do with other rules.

22
00:01:28,430 --> 00:01:33,110
Well, that's because state rules usually
need to override other styles.

23
00:01:33,110 --> 00:01:38,320
So now, this class represents a collapsed
state in mobile devices, and

24
00:01:38,320 --> 00:01:44,650
we're doing that by zeroing out all the
height, margins, line height, and padding.

25
00:01:44,650 --> 00:01:48,940
Now, a lot of the time, state rules have a
JavaScript dependency.

26
00:01:48,940 --> 00:01:52,770
In our case, we'll use a media query to
apply the collapsed layout,

27
00:01:52,770 --> 00:01:57,430
then later use JavaScript to toggle the
class on and off.

28
00:01:57,430 --> 00:02:02,010
So next, let's go over to our grid
displayed on SCSS file, and

29
00:02:02,010 --> 00:02:04,930
let's create a visibility class that hides
or

30
00:02:04,930 --> 00:02:10,080
reveals elements in mobile devices and
narrow view per sizes only.

31
00:02:10,080 --> 00:02:15,650
So we'll create our new visibility class
by writing, is displayed mobile.

32
00:02:18,370 --> 00:02:22,960
Then we'll include the media query mix in
for the small break point.

33
00:02:26,380 --> 00:02:31,780
And in the small break point, we're gonna
set the display to block.

34
00:02:32,940 --> 00:02:36,430
So now we need to include a media query
mixing for the medium break point, so

35
00:02:36,430 --> 00:02:41,010
I will just go ahead and copy the one we
wrote, paste it below,

36
00:02:41,010 --> 00:02:44,310
then change small to medium.

37
00:02:44,310 --> 00:02:47,450
And this time, we're gonna set the display
property to none.

38
00:02:49,830 --> 00:02:53,270
So, again, in the small device or viewport
range,

39
00:02:53,270 --> 00:02:58,520
display will be set to block and in the
medium range, it will be set to none.

40
00:02:58,520 --> 00:03:02,000
So next, to create a hidden state in
mobile devices,

41
00:03:02,000 --> 00:03:06,590
we can nest an at root directive inside
the small media query.

42
00:03:06,590 --> 00:03:13,470
So, right beneath the display block
declaration, we'll say at root.

43
00:03:13,470 --> 00:03:16,552
Then, we'll specify width, media.

44
00:03:16,552 --> 00:03:19,960
[BLANK_AUDIO]

45
00:03:19,960 --> 00:03:27,620
So now, we'll create our new hidden class
by writing is, hidden, mobile.

46
00:03:29,170 --> 00:03:33,200
Then, we'll need to set the display value
to none.

47
00:03:33,200 --> 00:03:36,640
So, inside the rule, we'll write display,
none.

48
00:03:39,080 --> 00:03:41,840
So, what the at root directive does is,

49
00:03:41,840 --> 00:03:46,090
it allows us to nest this rule without
nesting the output.

50
00:03:46,090 --> 00:03:49,950
So, it's sort of jumps out of the root
selector context.

51
00:03:49,950 --> 00:03:53,730
But, because we've defined with media,

52
00:03:53,730 --> 00:03:57,020
it stays inside the media query in the
output.

53
00:03:57,020 --> 00:04:02,100
So now, when we take a look at our CSS
output, notice how we get both the is

54
00:04:02,100 --> 00:04:08,080
displayed mobile, and the is hidden mobile
classes inside the media query.

55
00:04:08,080 --> 00:04:13,590
But, also notice how the is hidden mobile
class is at the root level,

56
00:04:13,590 --> 00:04:18,430
instead of a descendant of this is
displayed mobile class.

57
00:04:18,430 --> 00:04:21,450
So, that's what at root does for us.

58
00:04:21,450 --> 00:04:24,730
So, we're gonna go back to our index.html
file, and

59
00:04:24,730 --> 00:04:27,985
revisit the toggle menu icon we built in
the first stage.

60
00:04:27,985 --> 00:04:29,830
[LAUGH] We didn't forget about it.

61
00:04:29,830 --> 00:04:35,970
So, the first thing we'll do is, we need
to change the toggle menus class to icon

62
00:04:35,970 --> 00:04:41,520
nav toggle, since it now has a bem naming
convention for icon, so let's go ahead and

63
00:04:41,520 --> 00:04:48,780
replace that with icon dash, dash, nav,
dash, toggle.

64
00:04:48,780 --> 00:04:53,837
And let's also give it an id of toggle
which we'll use as a JavaScript hook.

65
00:04:56,010 --> 00:05:00,830
And we also want our toggle menu icon to
display in mobile views or

66
00:05:00,830 --> 00:05:05,980
the small break point, so let's give it to
the class is displayed mobile.

67
00:05:05,980 --> 00:05:11,510
So, right after the icon nav toggle class,
well say is displayed mobile.

68
00:05:13,220 --> 00:05:19,350
And below that we want our navigation to
appear collapsed in mobile views as well.

69
00:05:19,350 --> 00:05:24,250
So, lets give it that collapsed state
class of is collapsed mobile.

70
00:05:27,810 --> 00:05:30,040
So, now our nav is in a collapsed state
and

71
00:05:30,040 --> 00:05:33,900
a small break point, but the default is in
an expanded state.

72
00:05:33,900 --> 00:05:38,590
And we also want to hide the big hero
image from mobile view.

73
00:05:38,590 --> 00:05:43,870
So, let's also give its main grid
container is hidden mobile.

74
00:05:47,400 --> 00:05:52,980
So, when we save our index.html file and
refresh the preview,

75
00:05:52,980 --> 00:05:57,460
we can see that when the Viewport is in
the small break point range,

76
00:05:57,460 --> 00:06:02,580
the nav component is collapsed and the
toggle icon appears in it's place.

77
00:06:02,580 --> 00:06:06,830
We're also now seeing that big hero image
below, since it's now hidden.

78
00:06:08,510 --> 00:06:14,130
Finally, I've added a simple J query
function to the bottom of our HTML file,

79
00:06:14,130 --> 00:06:17,790
which toggles the is-collapsed-mobile
class, on and

80
00:06:17,790 --> 00:06:21,140
off when we click the Toggle icon.

81
00:06:21,140 --> 00:06:24,800
So, when we take a look at our preview
once again, and

82
00:06:24,800 --> 00:06:28,170
go into that small break point range.

83
00:06:28,170 --> 00:06:31,340
We can see how the nav menu opens up,

84
00:06:31,340 --> 00:06:34,610
and once again takes on the collapsed
state on click.

85
00:06:36,610 --> 00:06:38,970
Okay, so looks like we're all done here.

86
00:06:40,510 --> 00:06:43,003
Now, to view the entire Poly UI tool kit,

87
00:06:43,003 --> 00:06:47,366
you'll find the link to the GitHub
repository in the teacher's notes.

88
00:06:47,366 --> 00:06:57,366
[BLANK_AUDIO]

89
00:06:59,766 --> 00:07:03,632
[SOUND] So, as we've learned in this
course, there are many factors to

90
00:07:03,632 --> 00:07:07,117
consider, when building a front end
architecture with Sass.

91
00:07:07,117 --> 00:07:10,754
Hopefully, we've helped you learn useful
functions and mixins,

92
00:07:10,754 --> 00:07:15,050
a new naming convention, or a better
organization strategy for your project.

93
00:07:16,190 --> 00:07:19,270
And like I've said throughout this course,
use these guidelines, and

94
00:07:19,270 --> 00:07:22,420
suggestions to find what works for you and
your team.

95
00:07:22,420 --> 00:07:25,940
If in the end, your code can be
successfully adopted across an entire

96
00:07:25,940 --> 00:07:28,100
team, you've done a good job.

97
00:07:28,100 --> 00:07:31,680
Remember we're always here to help, so if
you have questions about anything we've

98
00:07:31,680 --> 00:07:35,980
covered in this course, feel free to reach
out to our support team, the wonderful

99
00:07:35,980 --> 00:07:39,210
treehouse community on our forum, or you
can get a hold of me on twitter.

100
00:07:39,210 --> 00:07:40,255
I'm @GillH.

101
00:07:40,255 --> 00:07:42,160
Thanks everyone.