Join Ray Villalobos for an in-depth discussion in this video Adding defaults to your background mixing, part of Building a Responsive Single-Page Design with Sass.
So far, we've been using a similar layout for both of our longer pages.…Let's try something different.…We're going to do a layout that makes content be sized at 50% of the browser…window when it's a certain size, and 100% of the browser window otherwise.…Now, we're also going to need to adjust our background image mixin.…That's the one that we created earlier, and is under the mixins.scss file.…So we're going to need to make some adjustments so…that we can position the images within our content a little bit better.…
And I'll also show you how to add a gradient to this.…But before we do that, let's go ahead and move over into our index.html file.…Just to take a look at this section and how it's coded again.…So we've got this div with a class of scene,…just like all the other scenes, and an id of event.…And then we have two articles, one for each one of the elements.…So we have a businessmeetings id element here, and a weddings element over here.…Notice that because they both have the class of fullheight,…
- 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.