Join Ray Villalobos for an in-depth discussion in this video Displaying content on media query breakpoints, part of Responsive CSS with Sass and Compass.
Now that we have the core structure of the layouts let's see…if we can add something that will only appear on bigger devices.…We'll add a hero unit, that's usually something that you see at…the top of every website and it usually has a big photo.…And it gives the users kind of a sense of what this site is about.…Right now, that section just has this logo right…here so we're going to add this big photo,…so if we look at your HTML we have this DIV right here with a class of hero and…then inside we have a section of layout. And then this branding with our logo.…
So that's where we're going to control.…Let's go ahead and go into our underscore folder, component sass…and open up the layout.scss, and we're going to put this inside the header.…So we'll look for the header section and we'll add right here a class of hero.…So, to that…we want to make sure that we'd start with the width of 100%.…And then we're going to add a break point, so we'll say Add Include, at Break Point.…
And then we'll use the variable called medium.…
Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.
- What are Sass and Compass?
- Adding version control
- Setting up a workflow with Grunt.js
- Modularizing your Sass with partials
- Creating a color palette with variables
- Using Compass mixins
- Creating a mobile-first layout
- Creating media-query breakpoints with Susy
- Designing a responsive grid with Susy