Join Ray Villalobos for an in-depth discussion in this video Starting our layout structure, part of Responsive CSS with Sass and Compass.
So now that we set up Susy let's dig into the main layout structure.…Now if you go to the Susy documentation and you click on…Getting Started, so you scroll down over here to the Usage section.…You'll see that we've already taken care of some of these things.…We've imported Susy and we created the default grid values, which is pretty good.…Now there's a couple of more things that you need to do to use Susy.…First is to create a container…for the grid.…So, anything with this class will be a container for our grid.…
We've already done that in our HTML.…If you remember from our index.html file, we created a class called layout.…And that class is being used in places where I want my layout to take over.…Now, notice that my layout is inside another class.…And I do that for a very specific reason. If you look at the completed version…of this website, you'll notice that I don't want things…like my navigation to be the full width of the page.…Otherwise, the navigation would start right here at the edge.…But I do want to be able to control the background…
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>