Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Finally, we're going to use media queries to help define element state rules in our project.
Quick Reference
Related Videos
Looking for more Sass courses?
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up