Join Ray Villalobos for an in-depth discussion in this video Adding Susy for responsive grids, part of Responsive CSS with Sass and Compass.
One of the key approaches that modern web designers…need to master is the ability to create responsive websites.…That just means websites that adjust to the…width of the device it's being viewed from.…So it looks different on a desktop device versus an iPhone.…Compass offers it's own set of mixins related to grids, but the system…it uses is a little bit old and based on the blueprint framework.…Which was really popular a few years ago,…but does seem a little bit dated.…Instead, what a lot of web designers are…currently using is a responsive grid system called Susy.…
It's super easy to use and set up, takes care…of all the math involved in calculating responsive design grids.…Now, we'll be talking more about that later, but for now we…need to get this installed and tour project, and it's super simple.…All we need to do is pull up the terminal, and type in gem,…install Susy.…You may need to run this with the pseudo command.…So if it doesn't work, make sure you do pseudo install, Susy, but…it looks like it took it for me. And we'll also need to modify our…
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>