Join Ray Villalobos for an in-depth discussion in this video Designing a complex layout, part of Building a Responsive Single-Page Design with Sass.
I bet by now you're getting the hang of this mixin stuff, so…now it's time to tackle a more complex layout.…Now, this one's going to involve some variable column widths and…show you how flexible laying out responsive grids with these tools can be.…So it's going to be the section right after this Welcome.…It's called Essential Info, and it has several parts to it.…So I want to go through the HTML.…And it's down over here under a class of scene and an ID of hotel info.…And we have essentially three parts to this.…
We have a part where we take care of the heading and…that's this essential info thing right here.…And then we have another article called useful info.…Now that has three different sections in it.…I've got them collapsed right now.…So, you can see the sections are arrival info and…then services as well as accessibilities.…Over here on the right hand side, arrival info, services and…then accessibilities right here.…Now notice that the sections on services as well as accessibility.…
Have an extra class of checklist.…
- 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?
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.