Join Ray Villalobos for an in-depth discussion in this video Scaffolding the header and footer, part of Responsive CSS with Sass and Compass.
Now that we have a basic template set up,…it's time to start creating some of the content.…I really want to take you through how…I create some of the HTML, because it's going to…help you understand my process of coding in…CSS when you understand the structure of the page.…So we'll start off with a header section.…Now I'm going to use the Emmett shortcuts that I talked about in the last movie.…Remember if you don't understand them don't worry,…it's going to spit out the HTML, If you want to…learn more about Emmett and how I use some of these shortcuts.…Make sure you check out my course on quoting faster with Emmett, so…I'm going to come over here to the body and create a header section.…
Now if I just hit Tab, it's just going to create the header tag.…If I add a greater than sign, it's going to put something inside…that header section, so I can do a hero, class right there.…Now if I do that, it's going to create a…header, with a div that has a class of hero.…And inside…the hero class, I want to create a section with a class of layout.…
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