Preview
Video Player
00:00
00:00
Creating Element States
7:42Finally, we're going to use media queries to help define element state rules in our project.
So the last thing we're gonna do is use
media queries to help to
0:00
find an element state rules.
0:03
Now we briefly discussed state rules in
the previous stage,
0:05
where we learn that state rules are
applied to elements to
0:08
indicate a change in state while the page
is still running.
0:11
So, inside our states directory I've
created partials for
0:15
a collapsed state and for grid display.
0:19
We're gonna write our state rules, using
the SMACSS naming convention for
0:23
element states.
0:27
They're usually prefixed with is.
0:28
So, first, to define a state where
elements are collapsed in mobile views, or
0:31
in the small breakpoint range, we can
write is
0:36
collapsed mobile.
0:40
Then we'll include the media query mix in
for the small break point.
0:47
And inside the media query we're going to
write a few properties to
0:56
create that collapsed state.
1:00
So, first we'll say, this ability collapse
1:01
followed by padding zero then height zero.
1:08
We'll also give it a margin and a line
height of zero.
1:14
So, when writing state rules,
1:21
we can't really rely on inheritance the
way we normally do with other rules.
1:23
Well, that's because state rules usually
need to override other styles.
1:28
So now, this class represents a collapsed
state in mobile devices, and
1:33
we're doing that by zeroing out all the
height, margins, line height, and padding.
1:38
Now, a lot of the time, state rules have a
JavaScript dependency.
1:44
In our case, we'll use a media query to
apply the collapsed layout,
1:48
then later use JavaScript to toggle the
class on and off.
1:52
So next, let's go over to our grid
displayed on SCSS file, and
1:57
let's create a visibility class that hides
or
2:02
reveals elements in mobile devices and
narrow view per sizes only.
2:04
So we'll create our new visibility class
by writing, is displayed mobile.
2:10
Then we'll include the media query mix in
for the small break point.
2:18
And in the small break point, we're gonna
set the display to block.
2:26
So now we need to include a media query
mixing for the medium break point, so
2:32
I will just go ahead and copy the one we
wrote, paste it below,
2:36
then change small to medium.
2:41
And this time, we're gonna set the display
property to none.
2:44
So, again, in the small device or viewport
range,
2:49
display will be set to block and in the
medium range, it will be set to none.
2:53
So next, to create a hidden state in
mobile devices,
2:58
we can nest an at root directive inside
the small media query.
3:02
So, right beneath the display block
declaration, we'll say at root.
3:06
Then, we'll specify width, media.
3:13
[BLANK_AUDIO]
3:16
So now, we'll create our new hidden class
by writing is, hidden, mobile.
3:19
Then, we'll need to set the display value
to none.
3:29
So, inside the rule, we'll write display,
none.
3:33
So, what the at root directive does is,
3:39
it allows us to nest this rule without
nesting the output.
3:41
So, it's sort of jumps out of the root
selector context.
3:46
But, because we've defined with media,
3:49
it stays inside the media query in the
output.
3:53
So now, when we take a look at our CSS
output, notice how we get both the is
3:57
displayed mobile, and the is hidden mobile
classes inside the media query.
4:02
But, also notice how the is hidden mobile
class is at the root level,
4:08
instead of a descendant of this is
displayed mobile class.
4:13
So, that's what at root does for us.
4:18
So, we're gonna go back to our index.html
file, and
4:21
revisit the toggle menu icon we built in
the first stage.
4:24
[LAUGH] We didn't forget about it.
4:27
So, the first thing we'll do is, we need
to change the toggle menus class to icon
4:29
nav toggle, since it now has a bem naming
convention for icon, so let's go ahead and
4:35
replace that with icon dash, dash, nav,
dash, toggle.
4:41
And let's also give it an id of toggle
which we'll use as a JavaScript hook.
4:48
And we also want our toggle menu icon to
display in mobile views or
4:56
the small break point, so let's give it to
the class is displayed mobile.
5:00
So, right after the icon nav toggle class,
well say is displayed mobile.
5:05
And below that we want our navigation to
appear collapsed in mobile views as well.
5:13
So, lets give it that collapsed state
class of is collapsed mobile.
5:19
So, now our nav is in a collapsed state
and
5:27
a small break point, but the default is in
an expanded state.
5:30
And we also want to hide the big hero
image from mobile view.
5:33
So, let's also give its main grid
container is hidden mobile.
5:38
So, when we save our index.html file and
refresh the preview,
5:47
we can see that when the Viewport is in
the small break point range,
5:52
the nav component is collapsed and the
toggle icon appears in it's place.
5:57
We're also now seeing that big hero image
below, since it's now hidden.
6:02
Finally, I've added a simple J query
function to the bottom of our HTML file,
6:08
which toggles the is-collapsed-mobile
class, on and
6:14
off when we click the Toggle icon.
6:17
So, when we take a look at our preview
once again, and
6:21
go into that small break point range.
6:24
We can see how the nav menu opens up,
6:28
and once again takes on the collapsed
state on click.
6:31
Okay, so looks like we're all done here.
6:36
Now, to view the entire Poly UI tool kit,
6:40
you'll find the link to the GitHub
repository in the teacher's notes.
6:43
[BLANK_AUDIO]
6:47
[SOUND] So, as we've learned in this
course, there are many factors to
6:59
consider, when building a front end
architecture with Sass.
7:03
Hopefully, we've helped you learn useful
functions and mixins,
7:07
a new naming convention, or a better
organization strategy for your project.
7:10
And like I've said throughout this course,
use these guidelines, and
7:16
suggestions to find what works for you and
your team.
7:19
If in the end, your code can be
successfully adopted across an entire
7:22
team, you've done a good job.
7:25
Remember we're always here to help, so if
you have questions about anything we've
7:28
covered in this course, feel free to reach
out to our support team, the wonderful
7:31
treehouse community on our forum, or you
can get a hold of me on twitter.
7:35
I'm @GillH.
7:39
Thanks everyone.
7:40