Join Ray Villalobos for an in-depth discussion in this video Improving our Speakers section, part of Responsive CSS with Sass and Compass.
I wanted to show you how to do a more dramatic transformation of your content.…And we've got the speaker area right here it looks a little bit plain…and frankly the line with of the page is probably a little bit too long.…So I'm going to make it look something like this.…When we get finished with this sort of transition in it.…Think that looks a lot nicer and it works really well on very wide displays.…It may take us a couple videos to get this done.…But we'll get started right now, and I'll show you some things on the way.…
So lets go back into our code, and I'm still in the layout…section, and in this section I'm going to create a new area called speakers list.…And I'll do it right on top of the footer.…So, I'll create another one of these sections…(SOUND).…And then I am on the target the class called Speakers List.…Now in here, this is going to be a design that's only…going to work whenever my break point is in the medium state, so…I'll say add include, add break point and then use the…medium variable and then I'm going to start modifying some of the styles.…
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