Join Ray Villalobos for an in-depth discussion in this video Adjusting your layouts, part of Building a Responsive Single-Page Design with Sass.
In the last video, I showed you how to do some flexible layouts…by creating different columns for different widths.…So, right here in this Essential Info section,…right now I have three different columns.…And as I make these smaller, you'll notice that this arrival info spans…the width of the entire window, and these are now two column instead of three.…And then if we make this a little smaller, we can see that it's all one column,…but we definitely need to treat this one a little bit differently.…So, I'll start by fixing how this works and…then styling the rest of this essential info section.…
So right here, I'm going to target the section that has an ID of arrivalinfo.…That is going to get just this top section right here, this Arrival Information.…And in there, I'm going to set the unordered list to have a margin of 0.…And then, I'm going to set the list items to have a list-style of none.…So I don't want the square bullets on these elements at the top.…
And I'm going to make some other adjustments.…
- 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 Intermediate
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?
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.