Join Ray Villalobos for an in-depth discussion in this video Preparing our assets, part of Responsive CSS with Sass and Compass.
So it's time to get things ready for our project.…And I'm going to start by copying some files into my project folder.…And explaining a little bit of the process that I use for naming things.…So I'm going to copy this Images folder into my project folder.…And I'm going to open that up, and open up the…Images folder, so we can see some of the structure.…So I have an Artwork folder, which is where most of the…art from each of the artists is, as well as a speaker's folder.…These are just the photos for the artists and then a social media folder…that has the different icons that I use for social media in the project.…
The miscellaneous folder which is where we have the image for our here…are unit as well as some as the other photos and a logo.…And if you look at the Artwork folder is…where we store the art for each of the artists.…Notice that they are named pretty much like the artists.…Every photo has an artist's first name and last name…and then a number and then _TN if it's a thumbnail.…And without the _TN if it's the high resolution version of the image.…
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