Join Ray Villalobos for an in-depth discussion in this video Creating a mobile-first layout, part of Responsive CSS with Sass and Compass.
So it's time to start fixing the layout for our website.…We're going to place that in the layout partial that we created.…Now this will be a layout that will work for smaller devices.…And you really want to make sure that you focus on smaller devices first.…It's part of an approach that was coined by one of our other lynda authors.…LUKE W, and you can read more about it in…his book, called MOBILE FIRST, or also on his website.…So let's go ahead and get started, we're going to go over to…the components, and the sass folder and finally look into the layout.scss file.…
And we want to do is start coding things that…will make this layout work better on mobile devices.…So we will start off with the header.…And we will create our new header section right here and…inside that we were going to work with the images inside the header.…Right now we only have this roux academy meetup logo.…So we're going to control that by setting the width to 95% and we'll create a…margin and I'll set that to 2.5% and I'm going to also set a maximum width.…
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
Skill Level Intermediate
Q: I am having trouble with the "Modularing your Sass with partials" video. Does Susy still support the @include at-breakpoint() mixin?
<div>A: The new version of Susy (2.1.3) doesn't support the @include at-breakpoint() mixin. This course is written for version 1.0 of Susy; however, you can still use the Susy 1.0 syntax as long as you modify the include command. In the styles.scss file, change the line that says: </div><div> </div><div><span style="font-family: Courier;">@import "susy" </span></div><div> </div><div>to </div><div> </div><div><span style="font-family: Courier;">@import "susyone" </span></div><div> </div><div>And you should be able to use the older syntax. There's more information at <a target="_blank" href="http://susy.readthedocs.org/en/latest/susyone">http://susy.readthedocs.org/en/latest/susyone/</a>.</div><div> </div>