Join Carrie Dils for an in-depth discussion in this video Inserting the main content, part of Responsive CSS Workflow with Sass, Bourbon, and Susy.
- [Narrator] We're now ready to add…the main content for our home page here.…Just like before I've gone ahead…and created a file where I can…copy and paste this since it's quite a bit of code…and this file will be available for you as well.…I'm going to go ahead and copy that…take it back to line 35 of my index.html file…and may have to do just a little bit…of indenting here to get it back where we want it.…
Let's look at what we've got here.…Whoops we're still not quite indented properly.…There we go.…First I've got a div class and it's got…this class of site-inner and what…that's going to indicate is that this…is going to be sort of the interior portion…of my page.…It's going to have my features, my content…and my sidebar.…I'm starting out again with that div class of wrap…which means that my site-inner could go full width…if I wanted it to.…
But anything here inside this wrap class…is going to be nice and tidy in a confined space.…So I'm defining a section and I'm giving…it the class features and this is where…
- Reviewing what Sass is and how it works
- Analyzing workflow options
- Setting up a folder structure
- Adding version control
- Working with package managers
- Setting up a workflow with Grunt
- Scaffolding HTML
- Modularizing a Sass with partials
- Creating a color palette with variables
- Using Font Awesome
- Creating a mobile-first layout
Skill Level Intermediate
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
CSS to Sass: Converting an Existing Sitewith John Riviello2h 28m Intermediate
1. Getting Started
2. Working with Package Managers
3. Setting Up a Workflow with Grunt.js
4. Scaffolding Your HTML
5. Sass Principles
6. Styling with Sass and Bourbon
7. Responsive Layout Grids with Susy
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.