Join Ray Villalobos for an in-depth discussion in this video Creating media queries outside your elements, part of Building a Responsive Single-Page Design with Sass.
Sometimes it's more convenient to embed your media queries inside other elements,…and sometimes it's better to do it outside.…Now this dining section is pretty similar to what we did in the intro section.…So, let's go ahead and put it together.…If you look at the page, this goes right after the room pictures.…And if you look at the HTML it's pretty simple.…So right past all the rooms we're going to get to this section right here with…a class of scene and an id of dining.…In there we have sort of three different parts an article with a id of area dining,…which is this top part right here and…then we have another article with an id of in hotel.…
That actually has three different sections, the Rooftop Café section,…the Smoothies Bar and the Breakfast & Coffee Bar.…And then at the bottom,…we have Room Service, which is just another article right here.…So the stuff that goes sort of in three columns is in this article,…and the other ones just kind of stand alone.…So that's pretty easy HTML.…Let's go ahead and take a look at the sass file.…
- 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.