Join Ray Villalobos for an in-depth discussion in this video Controlling media queries with Breakpoint, part of Building a Responsive Single-Page Design with Sass.
Now that we have the basics of working with Susy,…it's time to add responsiveness to our layout.…Now, in CSS, you do that with media queries.…But the way you write them can be a little bit complex.…I know that when I'm doing media queries in CSS,…it's one of those things I always have to look up.…And that's because the language for them looks like this.…You say, @media only screen and min-device-width.…And then you say max-device-width.…And if you want to do something in between those two,…you have to add both of them, kind of like this right here.…And just, there's a lot of language here that doesn't seem like needs to be there.…
They could be a lot simpler and that's really what this framework is for.…So it's called Breakpoint and it makes things just a lot simpler.…And all you do is, in the simplest form, you define a variable with Sass like this,…that specifies sort of a minimum media query point.…And then you just use that media query point whenever you want.…Just do an include, right?…And then you put the content within that section that you want…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Intermediate
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.