Join Ray Villalobos for an in-depth discussion in this video Padding elements with Susy, part of Building a Responsive Single-Page Design with Sass.
The guest room section is going to be similar to what we've done before.…but I'll show you how you can use another Susy feature called padding.…It lets you expand elements by padding them with columns.…So let's go into the HTML, just to take a look at how this area is structured.…We have, essentially, a div with a class of scene, id of rooms, and then in there,…we have a header.…Which is just this top part right here, and then we have several articles,…each article is a class of room.…
And notice that we also have this full height class here and…then they have an ID for whichever room it is.…That's because I'm going to be using this id to target these and…put different background elements or background images in there.…And that's pretty much it.…Inside those, I have just a headline with some text.…It is important to note that I put these inside a section with a class of content,…because I'm going to need to lay those out slightly different.…So, that's pretty much it, it ends up right there.…And we're going to dig into the CSS.…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Advanced
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.